如何用JavaScript正则移除HTML中指定随机属性？

现有一段HTML字符串：

'<div _ngcontent-isd-c78="" pdroppable="formElements" class="panel" ng-reflect-scope="formElements" id="divPanelId" style="color: red">DivContent</div>'

希望将其转换为：

'<div id="divPanelId" style="color: red">DivContent</div>'

需要移除的属性包括：随机生成的_ngcontent-*、pdroppable、class以及ng-reflect-scope。请问能否用JavaScript结合正则表达式实现这个需求？

完全可以用JavaScript结合正则表达式实现，核心是精准匹配目标属性并替换为空。

实现代码 #

const originalHtml = '<div _ngcontent-isd-c78="" pdroppable="formElements" class="panel" ng-reflect-scope="formElements" id="divPanelId" style="color: red">DivContent</div>';

// 匹配所有需要移除的属性并替换
const cleanedHtml = originalHtml.replace(
  /(_ngcontent-\S+="")|(pdroppable="[^"]+")|(class="[^"]+")|(ng-reflect-scope="[^"]+")/g,
  ''
).trim();

console.log(cleanedHtml);
// 输出结果: '<div id="divPanelId" style="color: red">DivContent</div>'

正则规则说明 #

• _ngcontent-\S+=""：匹配以_ngcontent-开头的Angular样式隔离属性，这类属性值通常为空
• pdroppable="[^"]+"：匹配pdroppable属性及其完整值（[^"]+表示匹配除双引号外的任意字符）
• class="[^"]+"：匹配class属性及其值
• ng-reflect-scope="[^"]+"：匹配Angular调试用的ng-reflect-scope属性及其值
• |：表示逻辑“或”，匹配上述任意一种属性
• g：全局匹配标志，确保替换所有符合条件的属性

额外优化 #

替换后可能会出现多个连续空格，trim()可以去除首尾多余空格；如果需要清理标签内的连续空格，可再追加一步替换：

const finalHtml = cleanedHtml.replace(/\s+/g, ' ');

内容的提问来源于stack exchange，提问作者Hasan Kaan TURAN