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

【问题标题】：How to get text from an element with other children using jQuery如何使用 jQuery 从具有其他子元素的元素中获取文本
【发布时间】：2012-08-18 22:50:31
【问题描述】：

我有类似以下内容：

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

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

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

谢谢，马特

【问题讨论】：

标签： jquery html dom

【解决方案1】：

试试这个：

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

Fiddle

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

【讨论】：

请注意，textContent 不受 IE8 及更早版本的支持。
另外，修剪结果可能不正确。正确的文本内容将包括前导空格。（例如，在white-space: pre 的情况下。jQuery 也是这样做的。）
@minitech 好点，谢谢，trim()可以删除，IE8及更早版本不支持此功能。
如果没有 textContent，三元运算的第一部分也将不起作用 - "" 是假的，并且 Firefox 不支持 innerText 所以你会得到 undefined。可能会选择hasOwnProperty 或in。
@Dennis你说得对，可以根据不同的可能性进行修改，但假设firstChild的文本不为空。

【解决方案2】：

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();

【讨论】：

【解决方案3】：

对不起，如果这与@minitech 的答案太相似：

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

alert(text);

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

jsFiddle

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

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

jsFiddle

【讨论】：

【解决方案4】：

使用.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;
    }
}

【讨论】：

【解决方案5】：

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

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

FIDDLE

【讨论】：