How can I get array of #text nodes of the html tree

Question

I need to use all the #text elements of an html body as an array. The rich text can have various levels so I need to get to the lowest element. For example for the text below I'm expecting to have an array of 8 elements.

What is the name or tag or method to get the # text node?

Answer 1

You can recursively scan through the nodes and push the text nodes into an array.

 const textNodes = [] function pushTextNode(node) { if (node.nodeName === "#text") { const nodeVal = node.nodeValue.trim(); if (nodeVal) { textNodes.push(nodeVal); } return; } node.childNodes.forEach((childNode) => { pushTextNode(childNode) }); } pushTextNode(document.querySelector("#root")); console.log(textNodes);

 <div id="root"> <span> 0 <b> 12<u>3</u> </b> <u> 4<b>5</b> </u> <b>67</b>8<a href="#">9</a> </span> </div>

Answer 2

You need to specify the first parent tag and use innerText attribute.

<script>
var text = document.getElementsByTagName("body")[0].innerText;
console.log(text.replace(/(\r\n|\n|\r|\t|\s)/gm, ''));
</script>

or if you want to use jquery , you can do like this.

console.log($("body span").text().replace(/(\r\n|\n|\r|\t)/gm, ''));

Answer 3

//find the textnode like this//
const textNodes=document.querySelector("content");
//[put on a variable]//


//using this statement //
Array.from(textNodes).map((content)=>{
  //now add eventlistener//
  content.addEventListener("//event type//",functionHandler);
});
function functionHandler(e){
  //do anything what you need//
}