提问人：f.ardelian 提问时间：2/15/2011 最后编辑：Samuel Liewf.ardelian 更新时间：8/6/2020 访问量：567543
如何在 JavaScript 中从字符串中剥离 HTML 标签？[复制]
How to strip HTML tags from string in JavaScript? [duplicate]
问：
如何在 JavaScript 中从字符串中剥离 HTML？
答：
89赞
Felix
2/15/2011
#1
var html = "<p>Hello, <b>World</b>";
var div = document.createElement("div");
div.innerHTML = html;
alert(div.innerText); // Hello, World
这几乎是最好的方法，你让浏览器做它最擅长的事情——解析HTML。
编辑：如下面的评论所述，这不是最跨浏览器的解决方案。最跨浏览器的解决方案是递归遍历元素的所有子元素，并连接您找到的所有文本节点。但是，如果您使用的是 jQuery，它已经为您完成了：
alert($("<p>Hello, <b>World</b></p>").text());
查看 text 方法。
评论
4赞
Tim Down
2/15/2011
并非每个浏览器都支持 .innerText
9赞
Sukima
1/5/2012
一个简明的jQuery可能看起来像这样： 使用允许您重复使用相同的元素和更少的内存进行连续调用或循环。var html = "<b>test</b>"; var text = $("<div/>").html(html).text();$("<div/>")
3赞
Till
8/19/2012
同样的问题，用：$（...） 崩溃。html（'<script>alert（“嗨”）;</script>'）.text（）;
1赞
frumbert
10/17/2012
并查看 text 方法，了解您不在 DOM 节点中代理字符串的位置。3 行输入，2 行输出。var txt = "<p>my line</p><p>my other line</p>some other text"; alert($(txt).text();
1赞
Francesco Marchetti-Stasi
12/8/2020
jQuery解决方案对于我们所有人（我猜我们大多数人）来说都是最好的，他们已经在几乎任何地方使用它。请记住，如果字符串位于变量中，则必须将其插入元素中，例如 .let text = $(`<div>${html_fragment}</div>`)
492赞
ReactiveRaven
2/15/2011
#2
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'
^^^^^^^^^^^^^^^^^^ ^^^^^^
如果有人试图破坏您的应用程序，此正则表达式将无法保护您。仅当您已经知道输入的格式时，才应使用它。正如其他知识渊博且大多数理智的人所指出的那样，要安全地剥离标签，您必须使用解析器。
如果你没有像 DOM 这样方便的解析器，并且你不能相信你的输入是正确的格式，你最好使用像 sanitize-html 这样的包，并且还有其他清理程序可用。
评论
42赞
f.ardelian
2/15/2011
对不起，但这会打破<img alt="a>b" src="a_b.gif" />
140赞
Ziggy
5/8/2013
@f.ardelian 那些以打破滥用正则表达式来解析一般 HTML 为爱好的人很棒。这是一个很棒的爱好。
18赞
Ziggy
5/8/2013
@f.Ardelian不！真！每次我读到这些评论线程之一时，我都会感到有点兴奋。“呵，”我想“<img alt=\”a>b\“ src=\”a_b.gif\“ />，太聪明了！
36赞
peterh
1/26/2015
@f.ardelian 那将是有问题的 html，它必须是 <img alt=“a>b" .
16赞
Sara
6/2/2016
使用 reg 不是好方法 stackoverflow.com/questions/1732348/......
317赞
Tim Down
2/15/2011
#3
在当前浏览器中，使用浏览器的解析器可能是最好的选择。以下方法将起作用，但需要注意以下几点：
- 您的 HTML 在元素中有效。包含在 或 或 标记中的 HTML 在 a 中无效，因此可能无法正确解析。
<div><body><html><head><div> textContent（DOM 标准属性）和innerText（非标准属性）属性不相同。例如，将在元素中包含文本，而不会（在大多数浏览器中）。这只影响 IE <=8，这是唯一不支持 .textContent<script>innerTexttextContent- 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 || "";
评论
6赞
Till
8/19/2012
当字符串包含类似 <script>alert（'hi'） 的内容时不起作用;</script>。然后它崩溃了，并带有“非法令牌”等。
2赞
Ryan Rapp
1/25/2013
很好的警告。如果还不清楚，我想补充一点，如果 的值是 ，Firefox 会崩溃。更糟糕的是，它不会正确报告错误（而是说父函数有）。Chrome/IE 不会崩溃。div.innerHTML = htmlhtmlNULLTypeError
5赞
Khizar Ali
8/9/2016
安全问题...当您设置 div.innerHTML ...我敢肯定你不想执行一些不需要的脚本。...手动清理会很酷。
4赞
Harijoe
4/14/2017
优雅的解决方案，但不是通用的。如果在节点服务器上使用它，则由于文档依赖性，它不起作用
2赞
eomeroff
1/20/2020
<p>test</p><p>test</p>给出 testtest，应该在
34赞
Till
9/8/2012
#4
我知道这个问题有一个公认的答案，但我觉得它并非在所有情况下都有效。
为了完整起见，由于我在这方面花费了太多时间，我们这样做了：我们最终使用了 php.js 中的一个函数（对于那些更熟悉 PHP 但偶尔也会做一些 JavaScript 的人来说，这是一个非常好的库）：
http://phpjs.org/functions/strip_tags:535
它似乎是唯一一段 JavaScript 代码，它成功地处理了我塞进应用程序中的所有不同类型的输入。也就是说，在不破坏它的情况下 - 请参阅我对上面标签的评论。<script />
评论
2赞
ebt
10/5/2013
^ 这个，绝对比Chrome 30.0及更高版本的公认答案要好
0赞
Mogsdad
12/4/2014
在没有 DOM 支持的情况下在服务器端运行良好，例如 Google Apps Script。
1赞
Chris Cinelli
2/20/2016
如果您使用允许的参数，则容易受到 XSS： returns 的攻击stripTags('<p onclick="alert(1)">mytext</p>', '<p>')<p onclick="alert(1)">mytext</p>
3赞
Sebj
1/17/2019
更新链接： locutus.io/php/strings/strip_tags
评论