Replace class name inside class attribute in HTML string

Question

I have HTML string and I want to replace specific class name with another. I want do it using regular expression. I found a way, to replace all strings inside HTML string, but I want to be sure that I will replace only this one inside class="...".

I have something like this:

export const replace = () => {
  const htmlString =
  '<di class="class-to-replace">\n<div class="row">\n <p>class-to-replace</p></div>\n</di>';

  const className = 'class-to-replace';
  const classReplacement = 'new-class';
  const regex = new RegExp('\\b' + className + '\\b', 'g');

  return htmlString.replace(regex, classReplacement);
};

And it works, however it replaces all the occurrences. How can I scope it only to class attribute so that changing the class name does not also affect the change of content?

Answer 1

Here's how to use DOMparser to do this correctly

const replace = (html, search, replace) => {
    const doc = new DOMParser().parseFromString(html, "text/html");
    doc.querySelectorAll(`.${search}`).forEach(el => el.classList.replace(search, replace));
    return doc.body.innerHTML;
};

const htmlString = '<di class="class-to-replace">\n<div class="row">\n <p>class-to-replace</p></div>\n</di>';
const className = 'class-to-replace';
const classReplacement = 'new-class';
console.log(replace(htmlString, className, classReplacement));