使用正则表达式从 html 字符串值中删除 html 属性

Question

我需要从 html 字符串中删除 html 属性。我有一些格式化的文本输入字段，允许用户复制和粘贴文本，同时保留基本的 html。问题在于，从 Word 文档复制的某些文本带有需要删除的属性。目前，我使用的正则表达式可以在正则表达式测试器中运行，但没有任何属性被删除。

删除属性的代码：

var stringhtml = '<div class="Paragraph  BCX0 SCXW244271589" paraid="1364880375" paraeid="{8e523337-60c9-4b0d-8c73-fb1a70a2ba58}{165}" style="margin-bottom: 0px;margin-left:96px;padding:0px;user-select:text;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent; overflow-wrap: break-word;">some text</div>'

var regex = /[a-zA-Z]*=".*?"/;

var replacedstring = stringhtml.replace(regex, '');

document.write(replacedstring);

如有任何帮助，我们将不胜感激！

Answer 1

有很多文献解释了为什么使用正则表达式解析 HTML 可能相当危险 – 这个著名的 StackOverflow 问题 就是一个很好的例子。

正如 @Polymer 所指出的，您当前的正则表达式将错过带单引号的属性，但也存在其他可能性：

data

属性 - 例如

data-id="233"

将被错过，还有非引号属性，例如

disabled

。可能还有更多！

您最终可能会一直追赶这种方法，当您在 HTML 中遇到新的组合时，总是必须更改您的正则表达式。

更安全的方法可能是使用

DOMParser

方法将字符串解析为 HTML，并以这种方式从中提取内容：

let stringhtml = '<div class="Paragraph  BCX0 SCXW244271589" paraid="1364880375" paraeid="{8e523337-60c9-4b0d-8c73-fb1a70a2ba58}{165}" style="margin-bottom: 0px;margin-left:96px;padding:0px;user-select:text;-webkit-user-drag:none;-webkit-tap-highlight-color:transparent; overflow-wrap: break-word;">some text</div>'

let parser = new DOMParser();
let parsedResult = parser.parseFromString(stringhtml, 'text/html');

let element = document.createElement(parsedResult.body.firstChild.tagName);

element.innerText = parsedResult.documentElement.textContent;

console.log(element);

Answer 2

使用 reg exp 适用于任何 HTML 标签的通用且简单的解决方案：

function removeHtmlAttributes(htmlString) {
  return htmlString.replace(/<(\w+)[^>]*>/g, '<$1>');
}