如何从 JavaScript 中的字符串中去除 HTML 标签?

IT技术 javascript html-parsing
2021-01-13 15:58:26

如何从 JavaScript 中的字符串中去除 HTML?

4个回答
cleanText = strInputCode.replace(/<\/?[^>]+(>|$)/g, "");

摘自本网站 (web.achive)

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

例子:

'<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 之类的包,并且还有其他可用的 sanitizers

@f.ardelian 那将是有问题的 html,它必须是 <img alt="a>b" 。
2021-03-18 15:58:26
使用 reg 不是一个好方法stackoverflow.com/questions/1732348/...
2021-03-19 15:58:26
@f.ardelian 以打破正则表达式在解析一般 HTML 中的不当使用为爱好的人很棒。这是一个很好的爱好。
2021-04-02 15:58:26
@f.ardelian 不!真的!每次我读到这些评论中的一个时,我都会有点激动。“呵呵呵呵,”我觉得“<img alt=\"a>b\" src=\"a_b.gif\" />,太聪明了!”
2021-04-02 15:58:26
对不起,但那会打破 <img alt="a>b" src="a_b.gif" />
2021-04-07 15:58:26

使用浏览器的解析器可能是当前浏览器中最好的选择。以下将起作用,但有以下注意事项:

  • 您的 HTML 在<div>元素内有效<body><html><head>标签中包含的 HTML在 a 中无效<div>,因此可能无法正确解析。
  • textContent(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 || "";
<p>test</p><p>test</p> 给出 testtest,之间应该有 spave 或换行符
2021-03-13 15:58:26
当字符串包含诸如 <script>alert('hi');</script> 之类的内容时不起作用。然后它会因“非法令牌在”等而崩溃。
2021-03-16 15:58:26
安全问题...当您设置 div.innerHTML 时,这可能很容易受到攻击...我确定您不想执行一些不需要的脚本。...手动清理会很酷。
2021-03-17 15:58:26
优雅的解决方案,但不是通用的。由于文档依赖性,如果您在节点服务器上使用它,则它不起作用
2021-03-23 15:58:26
很好的警告。在情况下,它是不是已经很清楚我想补充一点,火狐会崩溃的div.innerHTML = html,如果值htmlNULL更糟糕的是,它不会正确报告错误(而是说父函数有TypeError)。Chrome/IE 不会崩溃。
2021-04-06 15:58:26
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());

查看文本方法。

并非每个浏览器都支持innerText.
2021-03-13 15:58:26
简洁的 jQuery 可能如下所示:var html = "<b>test</b>"; var text = $("<div/>").html(html).text();Using$("<div/>")让您可以为连续调用或 for 循环重用相同的元素和更少的内存。
2021-03-13 15:58:26
同样的问题,崩溃它: $(...).html('<script>alert("hi");</script>').text();
2021-03-25 15:58:26
并查看 text 方法,了解var txt = "<p>my line</p><p>my other line</p>some other text"; alert($(txt).text();您不在 dom 节点中代理字符串的地方。3 行输入,2 行输出。
2021-04-04 15:58:26
我喜欢 jQuery 解决方案,因为据我所知,它不易受到代码注入的影响。
2021-04-06 15:58:26

我知道这个问题有一个公认的答案,但我觉得它并不适用于所有情况。

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

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

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

如果您使用允许的参数,您很容易受到 XSS 攻击: stripTags('<p onclick="alert(1)">mytext</p>', '<p>')返回<p onclick="alert(1)">mytext</p>
2021-04-01 15:58:26
^ 这个,绝对比 Chrome 30.0 及更高版本的公认答案好
2021-04-04 15:58:26
在没有 DOM 支持的服务器端很好地工作,例如 Google Apps 脚本。
2021-04-04 15:58:26
2021-04-10 15:58:26