jquery - 如何使用 jQuery 从具有其他子元素的元素中获取文本

Question

我有类似以下内容：

<div>
     Hello World
     <div>Something Else</div>
</div>

我想使用 javascript/jQuery 来获取“Hello World”文本。我可以将它包装在一个跨度中并选择它，但我现在想知道如何做到这一点。

我认为只需使用 $('div').text() 就可以了，但它给了我“Hello WorldSomething Else”。

谢谢，马特

Answer 1

尝试这个：

var div = document.getElementsByTagName('div')[0].firstChild;
var text = div.textContent ? div.textContent.trim() : div.innerText;

小提琴

_{请注意，IE8 及更早版本不支持该trim功能，如果您使用 jQuery，您可以使用$.trim()跨浏览器的 jQuery 实用功能。$.trim(text)}

Answer 2

抱歉，如果这与@minitech 的答案太相似：

var text = $('div:first')
    .contents()
    .filter(function() {
        return (this.nodeType === 3);
    }).text();

alert(text);​

您可以使用contents()（获取所选元素的内容）和filter()将匹配集减少为仅文本（nodetype === 3表示“文本”）的组合。

jsFiddle

当然，first()如果您对 html 的外观有信心，您可以改用：

var text = $('div:first')
    .contents()
    .first()
    .text();

jsFiddle

Answer 3

text()，正如您所发现的，它不仅获取目标节点的文本，还获取任何子/后代节点的文本。

即使不是这种情况，您当前形式的代码仍将返回两段文本的串联，因为您的选择器目标简单div，因此 jQuery 将查找所有divs 并获取它们的文本，作为一个文本块。

您只能通过类似的方式获取元素的即时文本，尽管还有其他方法。

//make a mini plugin for getting the immediate text of an element
$.fn.extend({
    immediateText: function() {
        return this.clone().find("*").remove().end().text();
    }
});

//use the plugin
var immediateText = $('#some_element').immediateText();

Answer 4

克隆元素（第一个 div），删除所有子元素并获取文本，可以选择删除空格$.trim()：

var elm = $('div:first').clone();
var text = $.trim(elm.children().remove().end().text());

小提琴

Answer 5

使用.contents：

yourDiv.contents().filter(function() {
    return this.nodeType === 3;
}).map(function() {
    return this.nodeValue;
}).get().join('');

或者，没有 jQuery：

var i, c, result = '';

for(i = 0; c = yourDiv.childNodes[i]; i++) {
    if(c.nodeType === 3) {
        result += c.nodeValue;
    }
}