使用正则表达式删除 Javascript 中的 HTML 标签答案

【问题标题】：Remove HTML Tags in Javascript with Regex使用正则表达式删除 Javascript 中的 HTML 标签
【发布时间】：2010-12-02 18:17:22
【问题描述】：

我正在尝试从 Javascript 中的字符串中删除所有 html 标记。这就是我所拥有的......我无法弄清楚为什么它不起作用......任何知道我做错了什么吗？

<script type="text/javascript">

var regex = "/<(.|\n)*?>/";
var body = "<p>test</p>";
var result = body.replace(regex, "");
alert(result);

</script>

非常感谢！

【问题讨论】：

标签： javascript regex

【解决方案1】：

这是一个老问题，但我偶然发现了它，并认为我会分享我使用的方法：

var body = '<div id="anid">some <a href="link">text</a></div> and some more text';
var temp = document.createElement("div");
temp.innerHTML = body;
var sanitized = temp.textContent || temp.innerText;

sanitized 现在将包含："some text and some more text"

简单，不需要 jQuery，即使在更复杂的情况下也不应该让您失望。

【讨论】：

嗨。好吧，基本上它所做的只是创建一个新的 DIV，将内部 HTML 内容设置为提供的任何内容（我假设这意味着任何 HTML 代码都被解析），然后询问 div 的所有文本内容，它忽略了所说的 HTML .
在我的浏览器中，该对象没有字段innerText
@Adrian 最后一行将选择temp.textContent 的输出（如果存在），如果不存在则仅尝试temp.innerText。您的浏览器应该有前者，但对于没有的浏览器，则使用后者:)
再次调查后（那里有很多答案）。我正在使用这种方法。这与 text-angular 中使用的方法相同。他们添加了一些我在这个线程中包含的附加内容
这个解决方案对我来说失败了，我正在使用 @kolkov Text Editor for Angular。

【解决方案2】：

这是 HTML 标签和 &nbsp 等的解决方案，您可以删除和添加条件获取没有 HTML 的文本，你可以用任何替换它。

convertHtmlToText(passHtmlBlock)
{
   str = str.toString();
  return str.replace(/<[^>]*(>|$)|&nbsp;|&zwnj;|&raquo;|&laquo;|&gt;/g, 'ReplaceIfYouWantOtherWiseKeepItEmpty');
}

【讨论】：

谢谢！我还要添加“"” -> "html_string".replace(/]*(>|$)| |"|‌|»|«|>/g, '');干杯！
"html_string".replace(/]*(>|$)| |"|'|‌|»|«|&gt ;/G， ''）; --> 添加了 "|'

【解决方案3】：

我这样做的方式实际上是单行的。

该函数创建一个Range object，然后在Range中创建一个DocumentFragment，该字符串作为子内容。

然后它抓取片段的文本，删除所有“不可见”/零宽度字符，并修剪它的任何前导/尾随空白。

我意识到这个问题很老，我只是认为我的解决方案是独一无二的，并想分享。 :)

function getTextFromString(htmlString) {
    return document
        .createRange()
        // Creates a fragment and turns the supplied string into HTML nodes
        .createContextualFragment(htmlString)
        // Gets the text from the fragment
        .textContent
        // Removes the Zero-Width Space, Zero-Width Joiner, Zero-Width No-Break Space, Left-To-Right Mark, and Right-To-Left Mark characters
        .replace(/[\u200B-\u200D\uFEFF\u200E\u200F]/g, '')
        // Trims off any extra space on either end of the string
        .trim();
}

var cleanString = getTextFromString('<p>Hello world! I <em>love</em> <strong>JavaScript</strong>!!!</p>');

alert(cleanString);

【讨论】：

【解决方案4】：

这是 TextAngular（WYSISYG 编辑器）的工作方式。我还发现这是最一致的答案，即 NO REGEX。

@license textAngular
Author : Austin Anderson
License : 2013 MIT
Version 1.5.16
// turn html into pure text that shows visiblity
function stripHtmlToText(html)
{
    var tmp = document.createElement("DIV");
    tmp.innerHTML = html;
    var res = tmp.textContent || tmp.innerText || '';
    res.replace('\u200B', ''); // zero width space
    res = res.trim();
    return res;
}

【讨论】：

【解决方案5】：

正如其他人所说，正则表达式不起作用。花点时间阅读我的article，了解为什么您不能也不应该尝试使用正则表达式解析 html，这就是您尝试从源字符串中剥离 html 时所做的事情。

【讨论】：

【解决方案6】：

我的 simple JavaScript 库名为 FuncJS 有一个名为“strip_tags()”的函数，它可以为您完成任务 - 无需您输入任何正则表达式。

例如，假设您要从句子中删除标签-使用此功能，您可以这样做：

strip_tags("This string <em>contains</em> <strong>a lot</strong> of tags!");

这将产生“这个字符串包含很多标签！”。

为了更好地理解，请阅读文档 GitHub FuncJS.

此外，如果您愿意，请通过表单提供一些反馈。这对我很有帮助！

【讨论】：

您能否提供strip_tags() 所做的事情，而不是仅仅宣传您的图书馆而不是解释它？该链接解释了 API 的使用，但没有它的作用。
嗯，在他给的那个网站上找到的，strip_tags = function(e) { var _hasTag, _tag_string; if (!(e === void 0 || e === null || e === "")) { _tag_string = e; if (typeof _tag_string === "object") { _tag_string = _tag_string.outerHTML; } _hasTag = _tag_string.match(/(<([^>]+)>)/ig); if (_hasTag) { return trim(_tag_string.replace(/(<([^>]+)>)/ig, '')); } else { return trim(_tag_string); } } else { throw new Error("The 'strip_tags' function expects one argument in the form of a string or object."); } };

【解决方案7】：

选择的答案并不总是确保 HTML 被剥离，因为仍然可以通过制作如下所示的字符串来通过它构造无效的 HTML 字符串。

  "<<h1>h1>foo<<//</h1>h1/>"

此输入将确保剥离为您组装一组标签，并将导致：

  "<h1>foo</h1>"

另外，jquery 的 text 函数会去除没有被标签包围的文本。

这是一个使用 jQuery 的函数，但对这两种情况应该更健壮：

var stripHTML = function(s) {
    var lastString;

    do {            
        s = $('<div>').html(lastString = s).text();
    } while(lastString !== s) 

    return s;
};

【讨论】：

【解决方案8】：

这对我有用。

   var regex = /(&nbsp;|<([^>]+)>)/ig
      ,   body = tt
     ,   result = body.replace(regex, "");
       alert(result);

【讨论】：

+1 谢谢。这一个班轮醒来非常适合我的需要。 console.log( my_html.replace(/(&nbsp;|<([^>]+)>)/ig, "") );

【解决方案9】：

<html>
<head>
<script type="text/javascript">
function striptag(){
var html = /(<([^>]+)>)/gi;
for (i=0; i < arguments.length; i++)
arguments[i].value=arguments[i].value.replace(html, "")
}
</script>
</head> 
<body>
       <form name="myform">
<textarea class="comment" title="comment" name=comment rows=4 cols=40></textarea><br>
<input type="button" value="Remove HTML Tags" onClick="striptag(this.form.comment)">
</form>
</body>
</html>

【讨论】：

【解决方案10】：

试试这个，注意 HTML 的语法太复杂，正则表达式无法 100% 正确：

var regex = /(<([^>]+)>)/ig
,   body = "<p>test</p>"
,   result = body.replace(regex, "");

console.log(result);

如果您愿意使用 jQuery 这样的库，您可以这样做：

console.log($('<p>test</p>').text());

【讨论】：

为什么要将正则表达式包装在字符串中？ var 正则表达式 = /(]+)>)/ig;
这行不通。具体来说，它会在短标签上失败：is-thought.co.uk/book/sgml-9.htm#SHORTTAG
这是一个老问题，但我会在这里发布：jsperf.com/regex-replace-vs-jquery-text
尝试在"<img src=bogus onerror=alert(1337)" 上运行它。第一个失败是因为 HTML 解析器不要求最后一个标签由 > 关闭，第二个失败是因为图像加载甚至在已解析的 DOM 树添加到 DOM 之前就开始了，$('<img ...>') 调用 HTML解析器。
如果属性值中包含>，则正则表达式解决方案也会失败；像这样<div data="a + b > c">

【解决方案11】：

您可以使用强大的库来管理字符串，即undrescore.string.js

_('a <a href="#">link</a>').stripTags()

=> '一个链接'

_('a <a href="#">link</a><script>alert("hello world!")</script>').stripTags()

=> 'a linkalert("hello world!")'

不要忘记将这个库导入如下：

        <script src="underscore.js" type="text/javascript"></script>
        <script src="underscore.string.js" type="text/javascript"></script>
        <script type="text/javascript"> _.mixin(_.str.exports())</script>

【讨论】：

我查看了源代码，他们实际上使用了内部其他答案中建议的相同正则表达式。

【解决方案12】：

有关 JS 中正确的 HTML 清理程序，请参阅http://code.google.com/p/google-caja/wiki/JsHtmlSanitizer

【讨论】：