자바 스크립트를 사용하여 DOM 요소의 모든 텍스트 내용 가져 오기

Question

DOM 요소에 텍스트 문자열로 인터리브 된 자식 요소가 있습니다. 이 텍스트 문자열 각각을 가져 와서 regex를 사용하여 바꿉니다. 예를 들어 ". 좀 더 텍스트를" ". 텍스트가 시작"

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

이 예에서, 나는 "텍스트를 닫기."문자열을 추출 할, 그리고 나중에 그들 각각 장착 할 수 있도록 다른 것과.

부모 내부의 자식 수가 다를 수 있으며 노드 유형도 동일하므로 솔루션을 사용해야합니다.

누구나 자바 스크립트를 사용하여 쉽게 달성 할 수있는 현명한 대답을 얻었습니까?

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>