如何用jQuery剥离HTML标签？

73

我想从字符串中删除HTML标记。例如，假设我们有以下字符串：

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

如何编写删除<p><p>并返回“示例ive有字符串”的函数？

jquery

— 萨达舒图
source

2

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

— totallyNotLizards 2012年

77

该最安全的方式是依靠浏览器TextNode正确逃生的内容。这是一个例子：

function stripHTML(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( stripHTML('<p>some <span>content</span></p>') );
document.write( stripHTML('<script><p>some <span>content</span></p>') );

展开摘要

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

如果使用jQuery，则使用.text()是安全的并且向后兼容。查看此问题的其他答案。

如果使用的浏览器<= Internet Explorer 8，则使用纯JavaScript的最简单方法是：

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

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

— 西蒙·布德里亚斯
source

4

试图用正则表达式剥离HTML是一个坏主意。

— ymln 2014年

1

@ymln早就该了，但是我用更多详细信息和一种不用jQuery即可提取文本的安全方法来更新答案。

— 西蒙·布德里亚斯

如果放入未关闭的'<script>'标签，这似乎会中断。例如console.log( stripHTML('<script><p>some <span>content</span></p>') );将返回'<p>some <span>content</span></p>'

— Matthew Wilcoxson 2014年

1

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

— 西蒙·布德里亚斯

2

提供的功能stripHTML不会剥离HTML，而是对特殊字符进行html编码。

— David Cook

133

使用.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();

— 乔恩
source

28

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

— Brilliand

1

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

— 2013年

1

@Nile：jQuery通过创建DOM节点并获取其纯文本值（有效地使浏览器完成工作）来做到这一点，因此将在适当的情况下执行脚本。无法阻止这种AFAIK。

— 2014年

1

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

— Anis 2014年

1

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

— 大卫·库克

3

如果要保留元素的innerHTML并仅去除最外面的标记，则可以执行以下操作：

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

— Ginosuave
source

2

这是获取url图像，从某些项目中逃脱p标记的示例。

尝试这个：

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

— 社会支持-Seonictech
source

1

您可以使用现有的拆分功能

一个简单易行的例子：

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

该示例只是向您展示拆分的工作方式。

— 维科曼
source