How can I get the text inside an element P excluding their possible child elements A with javascript DOM?

Question

I want to get the text (not plain-text, but formatted as well) inside each paragraph excluding their possible links. Please, explain to me in pure javascript, not jQuery.

*I wouldn't like to use neither IDs nor the method getElementById().

Example:

 for (i = 0; i < document.getElementsByTagName('p').length; i++){ p = document.getElementsByTagName('p')[i]; document.write(p.innerHTML); /* Here I have the text of each paragraph but also with the links*/ } 

 <p>This is a <a href="https://www.google.com">first</a> search engine.</p> <div>Here I have also some text</div> <p>This is a <b>web browser</b>.</p> <p>This is another <a href="https://www.bing.com">second</a> search engine.</p> 

The result I want should be:

"This is a search engine.This is a web browser .This is another search engine."

Answer 1

What about this way:

1. Find all 'p' elements.
2. Loop for each element looking inside iterated element for anchors.
3. If found, remove from DOM.

 const textElements = document.querySelectorAll('p'); textElements.forEach(function (element) { element.querySelectorAll('a').forEach(function (anchor) { anchor.remove(); }); }); 

  <p>This is a <a href="https://www.google.com">first</a> search engine.</p> <div>Here I have also some text</div> <p>This is a <b>web browser</b>.</p> <p>This is another <a href="https://www.bing.com">second</a> search engine.</p> 

Snippet with for loops and document.getElementsByTag

 const textElements = document.getElementsByTagName('p'); for (var i = 0; i < document.getElementsByTagName('p').length; i++) { // get next p tag var someParagraphElement = document.getElementsByTagName('p')[i]; // length of tag inside paragraph var lenghtOfA = someParagraphElement.getElementsByTagName('a').length; if(lenghtOfA){ for (var j = 0; j < lenghtOfA; j++) { // a tag inside p var aTag = someParagraphElement.getElementsByTagName('a')[j]; aTag.remove(); } } } 

 <p>This is a <a href="https://www.google.com">first</a> search engine.</p> <div>Here I have also some text</div> <p>This is a <b>web browser</b>.</p> <p>This is another <a href="https://www.bing.com">second</a> search engine.</p> 

Answer 2

You can just make an off-DOM copy of the elements, remove the anchor elements from those, then ask for textContent :

 let container = document.createElement('div'); [...document.getElementsByTagName('p')].forEach(p => container.innerHTML += p.innerHTML); // remove links [...container.querySelectorAll('*')].forEach(el => { if (el.tagName === 'A') el.remove(); }) console.log(container.innerHTML); document.getElementById('result').innerHTML = container.innerHTML; 

 <p>This is a <a href="https://www.google.com">first</a> search engine.</p> <div>Here I have also some text</div> <p>This is a <b>web browser</b>.</p> <p>This is another <a href="https://www.bing.com">second</a> search engine.</p> <div id="result"></div> 

Here's basically the same solution in ECMAScript 5, which you might be more used to:

 // create a container element not in the DOM to copy stuff to var container = document.createElement('div'); // get all paragraph elements var paras = document.getElementsByTagName('p'); // iterate over each paragraph and add its innerHTML to the container for (var i = 0; i < paras.length; i++) { container.innerHTML += paras[i].innerHTML } // get all container child elements var containerChildren = container.querySelectorAll('*'); // iterate over them and remove any links for (var j = 0; j < containerChildren.length; j++) { if (containerChildren[j].tagName === 'A') containerChildren[j].remove(); } console.log(container.innerHTML); // make the result visible document.getElementById('result').innerHTML = container.innerHTML; 

 <p>This is a <a href="https://www.google.com">first</a> search engine.</p> <div>Here I have also some text</div> <p>This is a <b>web browser</b>.</p> <p>This is another <a href="https://www.bing.com">second</a> search engine.</p> <div id="result"></div>