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

如果我有这样的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是预先编写的。

当前回答

对于初学者来说:

我更喜欢@都尊的答案，因为它简单易懂，比公认的答案更有效率。但它只部分适用于我，因为你不能直接传递元素与类选择器像这样

$(".landing-center .articlelanding_detail").get(0).immediateText() //gives .immediateText is not a function error

或者这个

$(".landing-center .articlelanding_detail")[0].immediateText() //gives .immediateText is not a function error

因为一旦你从$()函数中使用[index]或.get(index)提取了原生元素，你就失去了这里提到的jQuery对象方法的可链性。大多数解决方案只在id的上下文中使用，对于带有类选择器的元素多次使用不是很优雅。

所以，我写了jQuery插件:

$.fn.mainText = function(x=0) {
    return $.trim(this.eq(x).contents().not(this.eq(x).children()).text().replace(/[\t\n]+/g,' '));
};

这将返回元素的文本，而不管是否使用id或class作为排除子元素的选择器。也将删除任何\t或\n以获得一个干净的字符串。像这样使用它:

案例1

$("#example").mainText(); // get the text of element with example id

案例2

$(".example").mainText(); // get the text of first element with example class

案例3

$(".example").mainText(1); // get the text of second element with example class and so on..

其他回答

对我来说，这似乎是一个过度使用jquery的例子。下面将抓取文本，忽略其他节点:

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

你需要修剪它，但它能让你在一个简单的线条中得到你想要的。

EDIT

上面将获得文本节点。要得到实际的文本，使用这个:

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

我建议使用createTreeWalker来查找所有没有附加到html元素的文本元素(这个函数可以用来扩展jQuery):

这对我来说是个好方法

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

更容易和更快:

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

它需要是根据需求量身定制的，这取决于你所看到的结构。对于你提供的例子，这是有效的:

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

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

但这取决于标记是否与你发布的内容相似。

推荐文章