使用正则表达式在JavaScript中删除HTML标签。

Question

使用正则表达式在JavaScript中删除HTML标签。

135

我正在尝试在Javascript中移除字符串中的所有HTML标签。这是我已经写好的代码...但我无法弄清为什么它不起作用...有人知道我错在哪里吗？

<script type="text/javascript">

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

</script>

非常感谢！

- Gabe

14个回答

39

这是一个旧问题，但我偶然发现它并想分享我使用的方法：

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 现在将包含："一些文本和更多文本"

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

警告

这无法安全地处理用户内容，因为它容易受到脚本注入攻击。例如，运行以下代码：

var body = '<img src=fake onerror=alert("dangerous")> Hello';
var temp = document.createElement("div");
temp.innerHTML = body;
var sanitized = temp.textContent || temp.innerText;

会导致一个警告被触发。

- jsdw

4

我曾尝试过这个方法，但它容易受到XSS注入攻击。如果你试图对<img src=fake onerror=alert("dangerous")>进行清理，你会运行onerror JavaScript代码。 - Derek

15

这对我有用。

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

- user1786058

6

+1 谢谢。这个一行代码完美地满足了我的需求。console.log( my_html.replace(/( |<([^>]+)>)/ig, "") ); - DaveAlger

11

这是一个处理HTML标签和&nbsp等内容的解决方案，您可以添加或删除条件以获取不带HTML标签的文本，并且可以用任何内容替换它。

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

- Sahil Ralkar

1

谢谢！我还会添加 """ -> "html_string".replace(/<[^>]*(>|$)| |"|‌|»|«|>/g, ''); 干杯！ - Combine

"html_string".replace(/<[^>]*(>|$)| |"|'|‌|»|«|>/g, ''); --> 添加 "|' - Combine

8

这是TextAngular（所见即所得编辑器）的实现方法。我发现这是最一致的答案，也就是说没有使用正则表达式。

@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

1

我的JavaScript库叫做FuncJS，其中有一个名为“strip_tags()”的函数可以帮助你完成任务，而无需输入任何正则表达式。

例如，假设你想从一个句子中删除标签 - 使用这个函数，你可以简单地这样做：

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

这将生成"This string contains a lot of tags!"。

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

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

- Sharikul Islam

1

你能否提供一下 strip_tags() 的作用，而不仅仅是宣传你的库而不解释它？该链接讲解了 API 的使用方法，但没有说明它到底做了什么。 - Justin Beaudry

2

好的，我在他给的那个网站上找到了它，

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

- Predrag Stojadinović

1

这是一个示例，替换字符的HTML并去除空格。

function cleanAndTrimString(inputString) {
  // Remove HTML characters using a regular expression
  const withoutHtml = inputString.replace(/<[^>]*>/g, '');

  // Trim multiple spaces and leading/trailing spaces
  const trimmedAndCleaned = withoutHtml.replace(/\s+/g, ' ').trim();

  return trimmedAndCleaned;
}

// Example usage:
const input = "<p>  This is an example with <b>HTML</b>    characters.</p>";
const cleanedString = cleanAndTrimString(input);
console.log(cleanedString);

- Tran Chau

1

你可以使用一个强大的字符串管理库undrescore.string.js。

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

=> '一个链接'

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

=> '一个链接alert("你好，世界！")'

别忘了按照以下方式导入此库：

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

- Abdennour TOUMI

2

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

1

我做的方式实际上只需要一行代码。

该函数创建一个Range对象，然后在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);

- ElijahFowler

0

如果需要一个适用于JS的合适的HTML清理器，请参见http://code.google.com/p/google-caja/wiki/JsHtmlSanitizer

- Mike Samuel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- karim79 · Accepted Answer

298

试一下这个，注意 HTML 的语法太复杂了，正则表达式不可能 100% 正确：

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

console.log(result);

如果你愿意使用像jQuery这样的库，你可以简单地执行以下操作：

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

- karim79

3

为什么你要把正则表达式放在一个字符串中？变量regex的值为 /(<([^>]+)>)/ig; - brianary

4

这是一个经典问题，但我将在此发布：http://jsperf.com/regex-replace-vs-jquery-text - Joshua

为什么这里要用括号？你没有在这里使用任何组。 - Royi Namir

2

尝试在 "<img src=bogus onerror=alert(1337)" 上运行此代码。第一个失败是因为HTML解析器不要求最后一个标签由 > 关闭，而第二个失败是因为图像加载甚至在解析的DOM树添加到DOM之前就开始了，并且 $('<img ...>') 调用了HTML解析器。 - Mike Samuel

1

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

显示剩余2条评论