選擇第一級文本元素「的.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得到（當然），所以如果你想修改它（也許只替換它的某些部分），你可以做到這一點;或者如果你想修改第一個匹配給定的模式，等等。