使用正则表达式将HTML中指定文本的包裹标签替换为h2

需求明确：在压缩后的HTML字符串中，找到**内容完全等于"hi"**的标签，把该标签替换为<h2>。注意只替换内容恰好是"hi"的情况，像<p>hi 123</p>这种包含hi但还有其他内容的不处理。

以下是补全后的完整代码：

var htmlString = `
<h1>title</h1><p>Lorem ipsum dolor quas!</p><p>Lorem ipsum dolor</p><p>hi</p><p>hi 123</p><div>hi</div><span>Lorem ipsum dolor, sit.</span>
`;

const changeTagByText = (html) => {
  const text = "hi";
  // 正则匹配内容恰好为text的标签，替换为h2
  const regex = new RegExp(`<([a-z0-9]+)>${text}<\\/\\1>`, "gi");
  return html.replace(regex, `<h2>${text}</h2>`);
};

console.log(changeTagByText(htmlString));

代码说明 #

• 正则表达式<([a-z0-9]+)>hi<\/\1>：
  • <([a-z0-9]+)>：捕获开始标签的标签名（支持字母、数字组成的标签）
  • hi：精确匹配内容为"hi"的情况
  • <\/\1>：反向引用捕获的标签名，确保闭合标签和开始标签一致
  • 修饰符gi：g表示全局匹配所有符合条件的标签，i表示忽略标签名的大小写（比如<DIV>hi</DIV>也能匹配，不需要的话可以去掉i）
• 使用replace方法将匹配到的标签整体替换为<h2>hi</h2>

运行结果 #

输出与期望一致：

<h1>title</h1><p>Lorem ipsum dolor quas!</p><p>Lorem ipsum dolor</p><h2>hi</h2><p>hi 123</p><h2>hi</h2><span>Lorem ipsum dolor, sit.</span>

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