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

108

我正在尝试从Java字符串中删除所有html标记。这是我所拥有的...我不知道为什么它不起作用....有人知道我做错了吗？

<script type="text/javascript">

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

</script>

非常感谢！

javascript regex

— 加布
source

237

尝试此操作，注意HTML语法过于复杂，以至于正则表达式在100％的时间内都是正确的：

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

console.log(result);

如果您愿意使用jQuery之类的库，则只需执行以下操作：

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

— karim79
source

2

为什么将正则表达式包装在字符串中？var regex = /（<（[^>] +）>）/ ig;

— brianary

这行不通。具体来说，它将在短标签上失败：is-thought.co.uk/book/sgml-9.htm#SHORTTAG

— Mike Samuel

4

这是一个古老的问题，但我将在此处发布：jsperf.com/regex-replace-vs-jquery-text

— 约书亚

2

尝试在上运行"<img src=bogus onerror=alert(1337)"。第一个失败是因为HTML解析器不需要最后一个标记用来关闭>，第二个失败是因为甚至在将解析的DOM树添加到DOM之前就开始图像加载并$('<img ...>')调用HTML解析器。

— Mike Samuel

1

如果>在属性值中包含a，则正则表达式解决方案也会失败；像这样<div data="a + b > c">

— MT0

34

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

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，即使在更复杂的情况下也不应让您失望。

— jsdw
source

iya 好吧，基本上它所做的就是创建一个新的DIV，将内部HTML内容设置为所提供的内容（我认为这意味着已解析任何HTML代码），然后要求div的所有文本内容，而忽略了所述HTML 。

— jsdw

在我的浏览器中，对象没有字段innerText

— Adrian

@Adrian最后一行将选择的输出（temp.textContent如果存在），并且仅尝试temp.innerText不存在的输出。您的浏览器应具有前者，但对于没有的浏览器，应使用后者:)

— jsdw 2013年

在再次调查之后（那里有很多答案）。我正在使用这种方法。这与在text-angular中使用的方法相同。他们添加了一些附加功能，我已将其包含在此线程中

— Rentering.com

这个解决方案对我来说失败了，我使用的是@kolkov Angular文本编辑器。

— Waseem Ahmad Naeem

10

这对我有用。

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

5

+1谢谢。这只班轮适合我的需求。console.log( my_html.replace(/( |<([^>]+)>)/ig, "") );

— DaveAlger 2015年

6

这是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;
}

— Rentering.com
source

2

您可以使用功能强大的库管理undrescore.string.js

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

=>'链接'

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

=>'一个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>

— 阿登努尔·图米
source

2

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

— 尤金2014年

2

我简单的 JavaScript库FuncJS有一个名为“ strip_tags（）”的函数，该函数可以为您完成任务-无需输入任何正则表达式。

例如，假设您要从句子中删除标签-使用此功能，您可以像这样简单地进行操作：

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

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

为了更好地理解，请阅读GitHub FuncJS上的文档。。

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

— 伊斯兰教法
source

您是否可以提供什么strip_tags()，而不只是宣传您的图书馆而没有解释？链接解释了API的使用，但不是它做什么。

— 贾斯汀·波德里

1

好吧，在他给的网站上找到了它

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."); } };

— PredragStojadinović2015年

1

这是针对HTML标记和＆nbsp等的解决方案，您可以删除和添加条件以获取不带HTML的文本，并且可以将其替换为HTML。

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

— 萨希尔·拉尔卡（Sahil Ralkar）
source

0

要在JS中使用合适的HTML消毒剂，请访问http://code.google.com/p/google-caja/wiki/JsHtmlSanitizer

— 迈克·塞缪尔（Mike Samuel）
source

0

<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>

— 苏里亚·普拉文（Surya R Praveen）
source

0

选定的答案并不总是确保剥离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;
};

— 里克·莫尼汉（Rick Moynihan）
source

0

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

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

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

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

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);

— 伊利亚·福勒
source

-1

就像其他人所说的，正则表达式将不起作用。请花点时间阅读我的文章，其中介绍了为什么不能也不应该尝试使用正则表达式解析html，这就是您尝试从源字符串中删除html时所做的事情。

— 油菜
source