使用.text()仅检索未嵌套在子标记中的文本

Question

如果我有这样的HTML:

<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

我正在尝试使用.text()只检索字符串"这是一些文本",但如果我要说$('#list-item').text(),我得到"这是一些textFirst span text secondSecond span text".

有没有办法获得(并可能通过类似的东西.text(""))只是标签内的自由文本,而不是其子标签中的文本？

HTML不是我写的,所以这就是我必须要处理的.我知道在编写html时将文本包装在标签中会很简单,但同样,html是预编写的.

Answer 1

我喜欢这个基于此处clone()找到的方法的可重用实现,只获取父元素内的文本.

提供的代码便于参考:

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text();

Answer 2

简单回答:

$("#listItem").contents().filter(function(){ 
  return this.nodeType == 3; 
})[0].nodeValue = "The text you want to replace with" 

Answer 3

这似乎是一个过度使用jquery的情况.以下将抓取忽略其他节点的文本:

document.getElementById("listItem").childNodes[0];

你需要修剪它,但它可以在一条简单的线条中获得你想要的东西.

编辑

以上将获取文本节点.要获取实际文本,请使用以下命令:

document.getElementById("listItem").childNodes[0].nodeValue;

Answer 4

更轻松,更快捷:

$("#listItem").contents().get(0).nodeValue

Answer 5

与接受的答案类似,但没有克隆:

$("#foo").contents().not($("#foo").children()).text();

这是一个用于此目的的jQuery插件:

$.fn.immediateText = function() {
    return this.contents().not(this.children()).text();
};

以下是如何使用此插件:

$("#foo").immediateText(); // get the text without children

Answer 6

试试这个:

$('#listItem').not($('#listItem').children()).text()

Answer 7

不是代码:

var text  =  $('#listItem').clone().children().remove().end().text();

只是为了jQuery而成为jQuery的缘故？当简单的操作涉及许多链式命令和那么多(不必要的)处理时,也许是时候编写一个jQuery扩展:

(function ($) {
    function elementText(el, separator) {
        var textContents = [];
        for(var chld = el.firstChild; chld; chld = chld.nextSibling) {
            if (chld.nodeType == 3) { 
                textContents.push(chld.nodeValue);
            }
        }
        return textContents.join(separator);
    }
    $.fn.textNotChild = function(elementSeparator, nodeSeparator) {
    if (arguments.length<2){nodeSeparator="";}
    if (arguments.length<1){elementSeparator="";}
        return $.map(this, function(el){
            return elementText(el,nodeSeparator);
        }).join(elementSeparator);
    }
} (jQuery));

致电:

var text = $('#listItem').textNotChild();

参数是在遇到不同的场景时,例如

<li>some text<a>more text</a>again more</li>
<li>second text<a>more text</a>again more</li>

var text = $("li").textNotChild(".....","<break>");

文字有价值:

some text<break>again more.....second text<break>again more

Answer 8

它需要根据需要量身定制,这取决于您所呈现的结构.对于您提供的示例,这有效:

$(document).ready(function(){
     var $tmp = $('#listItem').children().remove();
     $('#listItem').text('').append($tmp);
});

演示:http://jquery.nodnod.net/cases/2385/run

但它完全依赖于标记与您发布的内容类似.

Answer 9

index如果文本节点的位置在其同级节点中是固定的，则可以使用

$('parentselector').contents().eq(index).text()