如何在元素周围获取文本？答案

【问题标题】：How to get text around an element?如何在元素周围获取文本？
【发布时间】：2010-12-22 01:33:21
【问题描述】：

如果我有

<div id='wrapper'>
  <fieldset id='fldset'>
    <legend>Title</legend>
    Body text.
  </fieldset>
</div>

如何在不检索图例标签内的文本的情况下检索“正文文本”？

例如，如果我想查看字段集中的文本是否包含单词“body”并更改该单词，同时忽略图例中的任何内容？ innerHTML 从所有子节点检索所有文本。

使用 jQuery 不会有问题。

【问题讨论】：

Clip content with jQuery的可能重复

标签： javascript jquery

【解决方案1】：

$("#fldset").contents().eq(2).text();

【讨论】：

这也获取了图例标签的内容...jsfiddle.net/subhaze/FfSap
@subhaze：那是因为你调用的是#wrapper 而不是#fldset。
@Ege Özcan：我尝试根据他们被询问的上下文来回答问题，并让提问者请求进一步调整。
@Babiker，有趣...我在发布时直接从您的答案中复制/粘贴...
@subhaze：你说得对，最初我就是这样回答的，但在你发表评论之前我就编辑了我的答案。

【解决方案2】：

没有库 --

var fldset = document.getElementById("fldset"),
    txt = fldset.lastChild.textContent || fldset.lastChild.innerText;

alert(txt);

【讨论】：

【解决方案3】：

这将得到fldset 的所有文本节点，忽略任何其他元素及其内容：

var fldsetContent = $('#fldset').contents();
var text = '';
$(fldsetContent).each( function(index, item) {
    if( item.nodeType == 3 ) text += $.trim($(item).text());
});
alert( text );

Live example

【讨论】：

【解决方案4】：

$('#fldset').clone().find('legend').remove().end().text()

但你也应该搜索一下 SO

【讨论】：

【解决方案5】：

我想不出别的办法

$("#result").html($("#wrapper").text().replace($("legend").text(),""));

但应该有一个更优雅的方式。您还可以创建一个新元素作为此元素的副本，删除所有子元素并获取文本。嗯... 那就是：

var newElement = $("#fldset").clone();
newElement.children().remove();
$("#result").html(newElement.text());

所以不管有多少子节点和哪种类型的子节点，这都行得通。这里：http://www.jsfiddle.net/wFV4c/

【讨论】：

【解决方案6】：

将字段集内的所有纯文本节点变为红色：

jQuery.each($('#fldset').contents(),function(index,value){
  if(value.textContent == value.nodeValue){
    $(this).wrap('<span style="color:red;" />')
  }
});

【讨论】：