如何从JavaScript字符串中剥离HTML标签?

如何从JavaScript字符串中剥离HTML ?

516204 次浏览
小开 
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());

检查文本方法。

小开 
cleanText = strInputCode.replace(/<\/?[^>]+(>|$)/g, "");

从本网站(web. achieve)提炼。

这个正则表达式查找<，一个可选的斜杠/，一个或多个不是>的字符，然后是>或$(行尾)

例子:

'<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和还有其他消毒剂可供选择这样的包。

小开
最佳答案

在当前的浏览器中，使用浏览器的解析器可能是最好的选择。下面的方法可以工作，但有以下注意事项:

  • 你的HTML在<div>元素内有效。包含在<body>或<html>或<head>标记中的HTML在<div>中无效，因此可能无法正确解析。
  • __ABC0 (DOM标准属性)和innerText(非标准属性)是不相同的。例如，textContent将包含<script>元素中的文本，而innerText则不会(在大多数浏览器中)。这只影响IE <=8，它是唯一不支持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 || "";
小开

我知道这个问题有一个公认的答案，但我觉得它并不是在所有情况下都适用。

为了完整起见，由于我在这上面花了太多时间，下面是我们所做的:我们最终使用了php.js中的函数(对于那些更熟悉PHP的人来说，这是一个非常好的库，但也会时不时地做一些JavaScript):

http://phpjs.org/functions/strip_tags:535

这似乎是唯一一段JavaScript代码，它成功地处理了我塞进应用程序中的所有不同类型的输入。也就是说，在不破坏它的情况下-请参阅上面我对<script />标记的评论。


提交答案