如何在 JavaScript 中从字符串中删除 HTML 标签? [重复]

问题描述 投票:0回答:4

如何在 JavaScript 中从字符串中删除 HTML?

javascript html-parsing
4个回答
510
投票
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 这样的包,并且 其他清理工具也可用.


320
投票

使用浏览器的解析器可能是当前浏览器中的最佳选择。以下方法可行,但有以下注意事项:

  • 您的 HTML 在
    <div>
    元素内有效。
    <body>
    <html>
    <head>
    标签中包含的 HTML 在
    <div>
    中无效,因此可能无法正确解析。
  • textContent
    (DOM 标准属性)和
    innerText
    (非标准)属性并不相同
    。例如,
    textContent
    将在
    <script>
    元素中包含文本,而
    innerText
    则不会(在大多数浏览器中)。这只影响 IE <=8, which is the only major browser not to support
    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 || "";

89
投票
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方法。


34
投票

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

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

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

这似乎是唯一一段能够成功处理我塞入应用程序的所有不同类型输入的 JavaScript 代码。也就是说,在不破坏它的情况下 – 请参阅我对上面的

<script />
标签的评论。

© www.soinside.com 2019 - 2024. All rights reserved.