Javascript中如何使用Regex移除嵌套HTML标签的所有属性？

正则适配方案（仅适用于格式规范的HTML场景） #

针对绝大多数符合W3C规范的HTML内容，可使用以下正则全局替换实现所有标签属性的移除，支持普通标签、自闭合标签、多层嵌套场景：

• 匹配正则：/<([a-z][a-z0-9]*)\b[^>]*?(\/?)>/gi
• 替换规则：<$1$2>

正则逻辑说明 #

• 捕获组1匹配合法的HTML标签名，适配大小写标签（修饰符i实现大小写不敏感）
• \b做标签名边界隔离，避免误匹配标签名内部字符
• 非贪婪匹配[^>]*?匹配标签内所有属性内容，不会误切后续标签
• 捕获组2匹配自闭合标签的斜杠，保留自闭合标签的格式
• 修饰符g实现全局匹配，处理所有HTML标签

效果验证 #

你提供的示例输入经过替换后，输出结果如下：

<div>
    <img />
    <p>
    The event is celebrating its 50th anniversary K&ouml;&nbsp;
    <a>exhibition grounds in Cologne</a>.
    </p>
    <p></p>
    <p>
       <strong>A festival for art lovers</strong>
    </p>
</div>

第二个嵌套示例替换后结果为：

<span><p> Test text</p></span>

正则方案局限性 #

如果HTML存在非规范写法，比如属性值中包含>字符（如<div title="测试>内容">），正则无法区分属性值内的>和标签结束符，会出现匹配错误。同时正则方案存在被恶意构造的HTML绕过的风险，安全场景下不推荐使用正则方案。 #

生产级安全方案（推荐） #

出于安全考虑，优先使用HTML解析器处理，可100%适配所有合法/非合法HTML场景，无正则的边界问题，不同语言的实现参考如下：

JavaScript 实现 #

function removeAllHtmlAttributes(html) {
  const tempContainer = document.createElement('div');
  tempContainer.innerHTML = html;
  // 遍历所有元素移除全部属性
  tempContainer.querySelectorAll('*').forEach(element => {
    while (element.attributes.length > 0) {
      element.removeAttribute(element.attributes[0].name);
    }
  });
  return tempContainer.innerHTML;
}

Python 实现（依赖BeautifulSoup） #

from bs4 import BeautifulSoup

def remove_all_html_attributes(html: str) -> str:
    soup = BeautifulSoup(html, 'html.parser')
    for tag in soup.find_all(True):
        # 清空标签的所有属性字典
        tag.attrs = {}
    return str(soup)

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