【发布时间】：2011-06-27 11:46:14
【问题描述】：
如何从 JavaScript 中的字符串中去除 HTML？
【问题讨论】：
【发布时间】：2011-06-27 11:46:14
【问题描述】：
cleanText = strInputCode.replace(/<\/?[^>]+(>|$)/g, "");
此正则表达式查找<、可选斜杠/、一个或多个不是> 的字符，然后是> 或$（行尾）
例子：
'<div>Hello</div>' ==> 'Hello'
^^^^^ ^^^^^^
'Unterminated Tag <b' ==> 'Unterminated Tag '
^^
但这不是防弹的：
'If you are < 13 you cannot register' ==> 'If you are '
^^^^^^^^^^^^^^^^^^^^^^^^
'<div data="score > 42">Hello</div>' ==> ' 42">Hello'
^^^^^^^^^^^^^^^^^^ ^^^^^^
如果有人试图破坏你的应用程序，这个正则表达式不会保护你。仅当您已经知道输入的格式时才应使用它。正如其他knowledgable and mostly sane 人指出的那样，为了安全地剥离标签，您必须使用解析器。
如果您无法访问像 DOM 这样方便的解析器，并且您不能相信您的输入格式正确，那么您最好使用像 sanitize-html 和 other sanitizers are available 这样的包。
【讨论】：
-
抱歉，这会破坏
<img alt="a>b" src="a_b.gif" /> -
@f.ardelian 热衷于打破滥用正则表达式解析一般 HTML 的爱好的人非常棒。这是一个很棒的爱好。
-
@f.ardelian 不！真的！每次我阅读其中一个评论主题时，我都会感到有些兴奋。 “嗬嗬嗬”，我觉得“b\" src=\"a_b.gif\" />，太聪明了！”
-
@f.ardelian 那将是错误的 html，它必须是
-
使用 reg 不是好方法stackoverflow.com/questions/1732348/…
使用浏览器的解析器可能是当前浏览器中最好的选择。以下将起作用，但有以下警告：
- 您的 HTML 在
<div>元素中有效。<body>或<html>或<head>标记中包含的 HTML 在<div>中无效，因此可能无法正确解析。 -
textContent(the DOM standard property) andinnerText(non-standard) properties are not identical。例如，textContent将在<script>元素中包含文本，而innerText不会（在大多数浏览器中）。这只会影响 IE textContent 的主流浏览器。 - HTML 不包含
<script>元素。 - HTML 不是
null - HTML 来自受信任的来源。将其与任意 HTML 一起使用可以执行任意不受信任的 JavaScript。这个例子来自 Mike Samuel 对重复问题的评论：
<img onerror='alert(\"could run arbitrary JS here\")' src=bogus>
代码：
var html = "<p>Some HTML</p>";
var div = document.createElement("div");
div.innerHTML = html;
var text = div.textContent || div.innerText || "";
【讨论】：
-
当字符串包含 之类的内容时不起作用。然后它以“非法令牌”等崩溃。
-
很好的警告。如果还不清楚我想补充一点，如果
html的值为NULL，Firefox 将在div.innerHTML = html上崩溃。更糟糕的是，它不会正确报告错误（而是说父函数有TypeError）。 Chrome/IE 不会崩溃。 -
安全问题...这可能很容易受到您设置 div.innerHTML 的影响...我确定您不想执行一些不需要的脚本。 ...手动清理会很酷。
-
优雅的解决方案，但不是通用的。由于文档依赖性，在节点服务器上使用它不起作用
-
test
test
给出 testtest，中间应该有 spave 或 newline
var html = "<p>Hello, <b>World</b>";
var div = document.createElement("div");
div.innerHTML = html;
alert(div.innerText); // Hello, World
这几乎是最好的方法，你让浏览器做它最擅长的事情——解析 HTML。
编辑：正如下面的 cmets 所述，这不是最跨浏览器的解决方案。最跨浏览器的解决方案是递归遍历元素的所有子元素并连接您找到的所有文本节点。但是，如果您使用的是 jQuery，它已经为您完成了：
alert($("<p>Hello, <b>World</b></p>").text());
查看text 方法。
【讨论】：
-
并非所有浏览器都支持
innerText。 -
简洁的 jQuery 可能如下所示：
var html = "<b>test</b>"; var text = $("<div/>").html(html).text();使用$("<div/>")可以让您在连续调用或循环时重复使用相同的元素并减少内存。 -
同样的问题，让它崩溃：$(...).html('').text();
-
并查看
var txt = "<p>my line</p><p>my other line</p>some other text"; alert($(txt).text();的文本方法，其中您不代理 dom 节点中的字符串。 3 行进 2 行出。 -
我喜欢 jQuery 解决方案，因为据我所知，它不易受到代码注入的影响。
我知道这个问题有一个公认的答案，但我觉得它并不适用于所有情况。
为了完整起见，由于我在这方面花费了太多时间，所以我们做了以下事情：我们最终使用了来自 php.js 的函数（对于那些更熟悉 PHP 但也使用一点 JavaScript 的人来说，这是一个非常不错的库时不时地）：
http://phpjs.org/functions/strip_tags:535
它似乎是唯一能成功处理我塞进应用程序的所有不同类型输入的 JavaScript 代码。也就是说，在不破坏它的情况下——请参阅上面关于 <script /> 标签的我的 cmets。
【讨论】：
-
^ 这个，绝对比 Chrome 30.0 及更高版本的公认答案更好
-
在没有 DOM 支持的情况下在服务器端很好地工作，例如Google Apps 脚本。
-
如果您使用允许的参数，您很容易受到 XSS 攻击：
stripTags('<p onclick="alert(1)">mytext</p>', '<p>')返回<p onclick="alert(1)">mytext</p>