如何使用jQuery将HTML转换为文本？

Question

我希望让任何带有“snippet”类的元素的子元素被读取为文本而不是HTML。我知道要做到这一点，我需要更改<和>符号，以便HTML页面将它们视为文本。我一直在尝试做这个，但不幸的是，我只有：

function(){
$('.snippet') 
}

- Krev

---

你是在询问如何将.snippet元素的HTML显示为文本（包括标签名称）吗？我对你的措辞有点困惑。 - Blender

当你提出问题时，请具体说明，并给出一些例子。 - Sameera Thilakasiri

Answer 1

您可以使用jQuery的 .text() 函数来去除HTML标签：

var text_only = $('.snippet').text();

这里有一个演示：http://jsfiddle.net/meZjw/

.text()的文档：http://api.jquery.com/text

更新

Sime Vidas提出了一个很好的观点，您可以遍历不同的.snippet元素，逐个更改它们的HTML结构：

$.each($('.snippet'), function (index, obj) {
    var $this = $(this);
    $this.html($this.text());
});

这里是使用$.each()的演示：http://jsfiddle.net/meZjw/1/

更新

Aepheus提出了一个好点子，我不知道这是否是被问到的内容，但你可以创建一个函数来转义HTML实体，就像其他语言一样：

function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

这是演示：http://jsfiddle.net/meZjw/2/

更新

您还可以使用.text()和.html()与我的上面的示例相反的顺序，以展示元素的HTML作为纯文本：

$.each($('.snippet'), function (index, obj) {
    var $this = $(this);
    $this.text($this.html());
});

这里有一个演示: http://jsfiddle.net/meZjw/31/

- Jasper

---

如果页面上有多个“snippet”元素（这很可能），仅使用'.snippet'选择器是不够的，因为.text()返回所有匹配元素的连接文本内容。 - Šime Vidas

为什么这个回答会得到投票支持呢？据我所知，它并没有回答问题。对于"<p>test</p>"，.text()返回的是"test"，而期望的返回值是"<p>test</p>"。至于如何在页面上显示此内容的后半部分，也没有给出答案。 - aepheus

@aepheus 很好的观点，我对问题的理解不同。我的答案的第二个 update 提供了一种转义 HTML 实体的方法。 - Jasper

Answer 2

这应该可以运行：

$('.snippet').each(function() {
  $(this).text($(this).html());
});

现场演示： http://jsfiddle.net/RrUAA/1/

- Blender

---

这是最完整的答案，它还涵盖了复制元素本身。干得好。 - aepheus

嘿，如果我不想将 <br> 转换为文本怎么办？我只想让 br 作为换行符而不是将其作为文本打印出来。 - aagjalpankaj

Answer 3

也许你想展示你的代码？http://jsfiddle.net/vVgvt/4/

$('.snippet').html().replace(/</g, "&lt;").replace(/>/g, "&gt;");

- Andreas Louv

Answer 4

试一下这个

$('.snippet').text($('.snippet').html());

- Bassam Mehanni

Answer 5

这是我使用的：

<span class="snippet">Who me? Why thank you.</span>
<div id="show_text"></div>
<script type="text/javascript" charset="utf-8">
 (function($) {

  var data = $('.snippet').text(); // or how ever you collect the data Object

  $('div#show_text').append( decodeURIComponent(jQuery.param(data)) );

 // debug report:
  if($.browser.mozilla){ //If you talk the talk, then you should toSource()
     console.log(data.toSource());
  }else{
     console.log(data);
  }  
 })(jQuery);
</script>

剪切你需要的部分。

- Alexx Roche