如果我有这样的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 textSecond span文本”。

是否有一种方法可以获取(并可能通过.text("")之类的方法删除)标签中的自由文本,而不是其子标签中的文本?

HTML不是我写的,所以这是我必须与工作。我知道这将是简单的,只是包装标签的文本时编写的html,但再次,html是预先编写的。


当前回答

这是一个老问题,但上面的答案效率很低。这里有一个更好的解决方案:

$.fn.myText = function() {
    var str = '';

    this.contents().each(function() {
        if (this.nodeType == 3) {
            str += this.textContent || this.innerText || '';
        }
    });

    return str;
};

然后这样做:

$("#foo").myText();

其他回答

我喜欢这个基于clone()方法的可重用实现,它只获取父元素中的文本。

为方便参考而提供的代码:

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

这是未经测试的,但我认为你可以尝试这样做:

 $('#listItem').not('span').text();

http://api.jquery.com/not/

类似于公认的答案,但没有克隆:

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

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

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

下面是如何使用这个插件:

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

更容易和更快:

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

我不是一个jquery专家,但如何,

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