Remove B tag with inline css Using regex

Question

I have a content like this.

<strong>Citation1:</strong> Firs<b style="font-weight:bold">t</b> Ci<b style="font-weight:bold">t</b>a<b style="font-weight:bold">t</b>ion

I want to remove all <b> tag using regex I am using below but its not working with multiple b tag.

function removeBoldString(str) {
    const re = new RegExp('(<b(.*)">)|(</b>)', 'g');
    return str.replace(re, '');
}

Answer 1

You'll need to use something like [^>]* instead of .*, here is an example:

const str = `<strong>Citation1:</strong> Firs<b style="font-weight:bold">t</b> Ci<b style="font-weight:bold">t</b>a<b style="font-weight:bold">t</b>ion`;

function removeBoldString(str) {
  const re = new RegExp('(<b([^>]*)">)|(</b>)', 'g');
  return str.replace(re, '');
}

const result = removeBoldString(str);

console.log(result);

But it isn't a good idea to process HTML using regex, there are a lot of methods of processing HTML in JavaScript, especially if you're doing this in a browser. Here is an example:

const str = `<strong>Citation1:</strong> Firs<b style="font-weight:bold">t</b> Ci<b style="font-weight:bold">t</b>a<b style="font-weight:bold">t</b>ion`;

const doc = new DOMParser().parseFromString(str, 'text/html');

doc.querySelectorAll('b').forEach((b) => {
  b.replaceWith(doc.createTextNode(b.textContent));
});

console.log(doc.body.innerHTML);