选择第一级文本元素“的.text（）”没有选择的子元素

Question

我有以下的HTML

<label> 
outer 
<span>inner</span> 
</label> 

我想替换‘外’，得到的结果跨度其‘内部’文字完好无损。使用

$('label').text('new outer'); 

替换标签的全部内容（以及范围）。有没有一种很好的方式来选择文本块'外'，而不增加额外的跨度或做高级的东西，如存储标签的内部跨度的价值，然后重新应用它？

Answer 1

有一个极好的办法只能选择文本块“外”无需添加额外的跨度或做先进的东西，如存储在标签的内部跨度的值，然后重新应用呢？

不是。

您可以使用正则表达式<span>之前更换了一切，但它是一个笨重的正则表达式，而它会为某些情况下工作，它会如果你在没有任何其他标记突破，特别是如果你有另一个元素包装<span>。

我的建议是简单地把另一个跨度放在那里。如果你知道你将要操纵那段代码，那么在DOM中给它一个元素。这是让你轻松入门的最佳方式，它可以让你远离做一些愚蠢的事情，比如重建整个结构，只是因为你想改变一个单词。

Answer 2

这将更新元素中的第一Text node的只是文本，而不会干扰span（或任何后续Text节点）：

$("label").contents().each(function() { 
    // Within this iterator function, jQuery sets `this` to be 
    // each child node (including Text nodes, not just Elements) 
    if (this.nodeType === 3) { // 3 = text node 
     this.nodeValue = "updated "; 
     return false; 
    } 
}); 

Live example | source

当然，你可以改进。 Text节点的当前文本可以从node.nodeValue得到（当然），所以如果你想修改它（也许只替换它的某些部分），你可以做到这一点;或者如果你想修改第一个匹配给定的模式，等等。