Javascriptを使用して子要素の外にあるDOM要素のすべてのテキストコンテンツを取得します

Question

DOM要素にはいくつかの子要素があり、テキスト文字列でインターリーブされています。 これらのテキスト文字列をそれぞれ取得し、regexを使用して置き換えたいです。たとえば ：「いくつかのより多くのテキストを」「テキストがスタート」

<div>Text started. 
<a>Link child inside</a> 
Some more text. 
<u>Another child</u> 
Closing text.</div> 

この例では、私は「テキストを閉じる。」、文字列を抽出したい、と、私は後でそれらのそれぞれ取り付けることができるように、何かと一緒に。

解決策は、親の中の子供の数が変わる可能性があり、ノードタイプも同様です。

誰もがこれを簡単にjavascriptを使用して達成するための巧妙な答えを得ましたか？

Answer 1

childNodesを使用して、nodeTypeがテキストノードであるかどうかを確認できます。 forEachの中でこれを行うと、テキストを簡単に置き換えることができます。

例：次のようにあなたが行うことができます

var div = document.getElementsByTagName('div').item(0); 
 

 
[].slice.call(div.childNodes).forEach(function(node , i) { 
 
    if(node.nodeType === 3) { 
 
    var currNode = div.childNodes[i]; 
 
    var currText = div.childNodes[i].textContent; 
 
    currNode.textContent = currText.replace(/text/i, ' Foo'); 
 
    } 
 
})

<div> 
 
    Text started. 
 
    <a>Link child inside</a> 
 
    Some more text. 
 
    <u>Another child</u> 
 
    Closing text. 
 
</div>

Answer 2

。

var textNodes = [...test.childNodes].filter(child => child.nodeType === Node.TEXT_NODE) 
 
textNodes.forEach(tn => console.log(tn.textContent))

<div id="test">Text started. 
 
<a>Link child inside</a> 
 
Some more text. 
 
<u>Another child</u> 
 
Closing text.</div>