如何使用 jQuery 去除 HTML 标签？

Posted 2023-02-24

【中文标题】如何使用 jQuery 去除 HTML 标签？

【英文标题】：How to strip HTML tags with jQuery?

【发布时间】：2012-10-19 20:30:27

【问题描述】：

我想从字符串中删除 html 标记。例如假设我们有字符串：

 <p> example ive got a string</P>

我如何编写一个函数来删除<p><p> 并只返回“example ive got a string”？

【问题讨论】：

一个快速的谷歌会找到你这个问题：***.com/questions/5002111/…，它本身就是***.com/questions/822452/…的副本

通知所有人：向下滚动到 Jon 的答案。接受的答案只对标签进行编码；它不会剥离它们。

【参考方案1】：

使用.text()函数：

var text = $("<p> example ive got a string</P>").text();

更新：正如 Brilliand 在下面指出的那样，如果输入字符串不包含任何标签并且您很不幸，它可能会被视为 CSS 选择器。所以这个版本更加健壮：

var text = $("<div/>").html("<p> example ive got a string</P>").text();

【讨论】：

将 HTML 直接放入 $() 是很危险的，因为这可能会以其他方式解释它（即作为 CSS 选择器）。请改用$("<div/>").html("<p> example ive got a string</P>").text()。

@Brilliand：好点。我将建议纳入答案，谢谢！

@Nile：jQuery 通过创建 DOM 节点并获取它们的纯文本值（有效地让浏览器完成繁重的工作）来做到这一点，因此脚本将在适当的时候被执行。没有办法阻止这种 AFAIK。

处理动态内容时，如果内容是纯文本，而不是html，这将导致错误。所以我使用$('<span>'+content+'</span>').text();

@vipero07，在我的测试中它不运行脚本。 <script> 标签被剥离，你只剩下alert('hello');

【参考方案2】：

最安全的方法是依靠浏览器的TextNode来正确转义内容。这是一个例子：

function encodeHTML(dirtyString) 
  var container = document.createElement('div');
  var text = document.createTextNode(dirtyString);
  container.appendChild(text);
  return container.innerHTML; // innerHTML will be a xss safe string


document.write( encodeHTML('<p>some <span>content</span></p>') );
document.write( encodeHTML('<script><p>some <span>content</span></p>') );

这里要记住的是，当我们访问 html 字符串（innerHTML、outerHTML）时，浏览器会转义 TextNodes 的特殊字符。相比之下，访问文本值（innerText、textContent）将产生原始字符串，这意味着它们不安全并且可能包含 XSS。

如果你使用 jQuery，那么使用.text() 是安全的并且向后兼容。请参阅此问题的其他答案。

如果您使用浏览器 最简单方法是：

string.replace(/(<([^>]+)>)/ig,"");

但是使用正则表达式解析 HTML 存在一些问题，因此这不会提供很好的安全性。此外，这仅处理 HTML 字符，因此它不是完全 xss 安全的。

【讨论】：

尝试使用正则表达式剥离 HTML 是 bad idea。

@ymln 这早就该了，但我更新了答案，提供了更多细节和一种无需 jQuery 即可提取文本的安全方法。

@MatthewWilcoxson 花了我一段时间才回到这里，但这里的答案是固定的。希望没有任何其他边缘情况。

提供的函数 stripHTML 不会剥离 HTML，它对特殊字符进行 html 编码。

OP 很清楚想要没有标签的文本。这会将所有内容转义为 HTML 安全而不剥离任何内容，而是在屏幕上显示 <p> example ive got a string</p>，但 OP 要求提供 example ive got a string。

【参考方案3】：

这是一个获取url图片的例子，从某个项目中转义p标签。

试试这个：

$('#img').attr('src').split('<p>')[1].split('</p>')[0]

【参考方案4】：

如果你想保留元素的innerHTML，只去掉最外层的标签，你可以这样做：

$(".contentToStrip").each(function()
  $(this).replaceWith($(this).html());
);

【参考方案5】：

可以使用已有的拆分功能

一个简单而不稳定的例子：

var str = '<p> example ive got a string</P>';
var substr = str.split('<p> ');
// substr[0] contains ""
// substr[1] contains "example ive got a string</P>"
var substr2 = substr [1].split('</p>');
// substr2[0] contains "example ive got a string"
// substr2[1] contains ""

这个例子只是为了向你展示拆分是如何工作的。