How can I get the text of an element, excluding certain tags

Question

I'm trying to get a phrase hyphenated (separated by syllables) with dashes. I found this page , and it hyphenates very good, but with slashes, adds a slash after every word and the quantity of syllables of every line after each of them . I injected some code to the page to get the text from the results and replace "/ " with " " and then "/" with "-", and then print it on textarea , but I get every few words a "= x syllables" message, and I need it without it. I see these messages are inside a strong tag, so I was wondering if there was a way to get all the text from the result, excepting the text inside strong tags.

Tl;dr : I need to get

Hello, world!Hello, world!Hello, world!

from this:

<div id="text">
 <div>
  Hello, world!
 </div>
  Hello, world!
 <div>
  Hello, world!
 </div>
 <span>
  Not this
 </span>
</div>

Answer 1

You're trying to use a page like an API provider using injections. You may succeed what you want, but the right way to do it is to actually make it by searching for solutions, create some logic and then write some code to do what you want.

If you just want to extract the text and exclude certain tags without white-spaces, then use DOM querySelectorAll to match what you want and exclude what you don't want with a selector like this #text :not(span) , then map the textContent and finally remove white-spaces with a regular expression like this replace(/\\s/g, '') :

 var result = [...document.querySelectorAll('#text :not(span)')] .map(e => e.textContent) .join() .replace(/\\s/g, ''); console.log(result);

 <div id="text"> <div> Hello, world! </div> <div> Hello, world! </div> <div> Hello, world! </div> <span> Not this </span> </div>

Now, if you want to create your own, then you'd find the very popular compromise package with the syllables plugin that you can use like this:

 nlp.extend(compromiseSyllables); function convert() { // Get textarea text const text = document.getElementById('text').value; // Create npl document with the text const doc = nlp(text); // Get syllables array using npl syllables plugin const syllables = doc.terms().syllables(); // Create the wanted string result using the syllables array const result = syllables.map(({ syllables }) => syllables.join('-')).join(' '); // Output the result document.getElementById('result').textContent = result; } convert(); document.getElementById('convert').onclick = convert; // result => // as se-cond ar-gu-ment e-mo-ji-fy takes an han-dler to par-se un-known e-mo-jis

 <script src="https://unpkg.com/compromise"></script> <script src="https://unpkg.com/compromise-syllables"></script> <textarea id="text" cols="50" rows="5"> As second argument, emojify takes an handler to parse unknown emojis </textarea> <div> <button id="convert">Convert</button> </div> <p id="result"></p>

Answer 2

Plain JS/DOM API style:

 const nodes = document.getElementById("text").childNodes; let buffer = []; for (let i = 0; i < nodes.length; i++) { let node = nodes[i]; if ((node.nodeName !== "SPAN") && node.textContent.trim().length !== 0) { buffer.push(node.textContent.trim()); } } let result = buffer.join(""); console.log(result);

 <div id="text"> <div> Hello, world! </div> Hello, world! <div> Hello, world! </div> <span> Not this </span> </div>

Answer 3

Using VanillaJS:

 var clonetext = document.getElementById("text").cloneNode(true); clonetext.querySelectorAll("*:not(div)").forEach(function(v){v.remove()}); console.log(clonetext.innerText);

 <div id="text"> <div> Hello, world! </div> Hello, world! <div> Hello, world! </div> <span> Not this </span> <a>Not this</a> </div>

Use cloneNode function and do create new DOMCollection from #text

Remove all childs except divs

Get innerText of #text