Question

我想要解析这个HTML结构：

<div id="body">

<div id="hello">
This is some text. 
And i want to append it in red.
<div id="welcome">
hey what about ?
</div>
</div>
</div>

这是我的js：

var x = $('#body:contains("This is")').text();

$('#body').append('<div style="color:red;">'+x+ '</div>')

我想推断第一个文本节点而不是第二个文本节点，因此结果应该是红色的文字说“这是一些文本。我想用红色附加它。“而不是”这是一些文字。我想用红色附加它。嘿，怎么样？“

我必须只使用1个选择器来实现这一点，而不需要额外的功能和方法。

这是一个活泼的小提琴：https://jsfiddle.net/6kxynfk3/5/

我也尝试过：$('#hello *:not(div)').text();但它不起作用....：/

有人可以帮帮我吗？

由于

Answer 1

#body:contains("This is")只查找id为body的元素，innerText包含“this is”。您希望子元素包含“This is”。

因此您应该使用：#body > div:contains("This is")或#body > *:contains("This is")。现在，您可以使用与childNodes[0]相比包含文本节点的第一个元素的children[0]来选择所需的文本

var x = $('#body > div:contains("This is")')[0].childNodes[0].wholeText;

$('#body').append('<div style="color:red;">'+x+ '</div>')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="body">

<div id="hello">
This is some text. 
And i want to append it in red.
<div id="welcome">
hey what about ?
</div>
</div>
</div>

Answer 2

由于text()将获取元素中的所有文本，无论是否有孩子，您都可以执行以下操作：

 $('#body >:contains("This is")').each(function(){
    var txt = $(this).clone().children().remove().end().text();
    $('#body').append('<div style="color:red;">'+txt+ '</div>');     
 });

这假定您要搜索的文本始终直接位于#body的子项内，而不是任何孙子项

的 DEMO

JQuery：contains（）无法获取子节点中的第一个文本节点

2 个答案: