如何用正则仅替换HTML字符串class属性内的指定类名

当前代码会把HTML文本内容里的目标类名字符串也一并替换，要实现只修改class属性范围内的类名，需要用带上下文断言的正则来精准匹配。

原问题代码 #

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);
};

修改后的代码实现 #

通过正则的正向预查和反向预查，限定匹配范围仅在class="..."的引号内部：

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';
  // 仅匹配class属性引号内的目标类名
  const regex = new RegExp(`(?<=class="[^"]*)\\b${className}\\b(?=[^"]*")`, 'g');

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

正则规则说明 #

• (?<=class="[^"]*)：正向预查，确保匹配位置处于class="开头的引号内部，前面是class属性的起始部分
• \\b${className}\\b：匹配完整的目标类名单词，避免误匹配包含该类名的其他字符串（比如class-to-replace-extra）
• (?=[^"]*")：反向预查，确保匹配位置仍在class属性的引号内部，后面是引号结尾部分

修改后，只会替换class属性中的class-to-replace，文本内容里的同名字符串不会被改动。

内容的提问来源于stack exchange，提问作者mati