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;

Fiddle

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

Answer 2

正如您所发现的，

text()不仅可以获取目标节点的文本，还可以获取任何子/后代节点的文本。

即使不是这种情况，您当前表单中的代码仍会返回两段文本的串联，因为您的选择器只是div，所以jQuery将找到所有div并获取他们的文本，作为一大块文本。

你可以用这样的东西得到一个元素的直接文本，不过还有其他方法。

//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 3

很抱歉，如果这与@ minitech的回答过于相似：

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

alert(text);

您可以结合使用contents()（获取所选元素的内容）和filter()将匹配的集合缩减为仅文本（nodetype === 3表示'文字'）。< / p>

jsFiddle

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

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

jsFiddle

Answer 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;
    }
}

Answer 5

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

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

FIDDLE

如何使用jQuery从包含其他子元素的元素中获取文本

5 个答案: