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

时间:2011-12-16 17:33:46

标签: jquery html code-snippets

我想这样做,以便任何元素的孩子都使用&#34;片段&#34; class被读作文本而不是HTML。我知道要执行此操作,我需要更改<>符号,以便HTML页面将其作为文本读取。我一直试图这样做但不幸的是,我只有:

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

5 个答案:

答案 0 :(得分:14)

您可以使用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/

答案 1 :(得分:10)

这应该有效:

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

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

答案 2 :(得分:2)

也许您希望显示您的代码? http://jsfiddle.net/vVgvt/4/

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

答案 3 :(得分:0)

试试这个

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

答案 4 :(得分:0)

This就是我用的:

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

剪下你需要的部分。