Get text with javascript excluding the different elements in a scope

Question

Supposed that I want to add extra content from my div (Demo).

Is there any way to get the text with javascript excluding the different elements in a scope?

Let's use the same example with some improvisations as Get the pure text without HTML element by javascript? for simplicity sake.

function get_content(){
    var a = txt.innerText || txt.textContent;
    console.log('From #txt:', a, '\n-------\nI want to exclude the following:');
    var classA=document.getElementsByClassName('A');
    console.log(classA[0].textContent);
    var classB=document.getElementsByClassName('B');
    console.log(classB[0].textContent);
    var classC=document.getElementsByClassName('C');
    console.log(classC[0].textContent);

}

<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'> Ronald.
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>

And suppose that I want to separate how to get the content from the element id excluding the span's content? Which is in the example was "Ronald".

Update:

I'm considering the following method to achieve them:

var classAlt=document.getElementsByClassName('Alt');
/*If class contains same character with #txt won't work:*/
console.log(a.substr(0, a.indexOf(classAlt[0].textContent.charAt(0))));
/*Haven't found the disadvantage of the following:*/
console.log(txt.childNodes[0].wholeText.trim());

function get_content(){
    var a = txt.innerText || txt.textContent;
    console.log('From #txt:', a, '\n-------\nI want to exclude the following:');
    var classA=document.getElementsByClassName('A');
    console.log(classA[0].textContent);
    var classB=document.getElementsByClassName('B');
    console.log(classB[0].textContent);
    var classC=document.getElementsByClassName('C');
    console.log(classC[0].textContent);
    
    /*I'm thinking of the following: */
    var classAlt=document.getElementsByClassName('Alt');
    /*If class contains same character with #txt won't work:*/
    console.log(a.substr(0, a.indexOf(classAlt[0].textContent.charAt(0))));
    /*Haven't found the disadvantage of the following:*/
    console.log(txt.childNodes[0].wholeText.trim());
}

<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'> Ronald.
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
<span class="Alt">alternative which won't work.</span>
</p>

Andam · Accepted Answer · 2019-02-20T13:27:26.873

This works just fine if you are using jquery. You first cloning the element then removing all the child elements in it. In your case all the span tags. after that it gets the text back

here is the link to the full article Link

jQuery.fn.justtext = function() {
  
 return $(this) .clone()
   .children()
   .remove()
   .end()
   .text();

};

console.log($("#txt").justtext());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'> Ronald.
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>

Otherwise here is a way to do it in pure javascript

function extractText(){
  var children = txt.children;
  for (var i = children.length -1; i > -1; i--) {
    children[i].remove();
  }
  console.log(txt.innerHTML)
}

<input type="button" onclick="extractText()" value="Get Content"/>
<p id='txt'> Ronald.
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>

Get text with javascript excluding the different elements in a scope

Is there any way to get the text with javascript excluding the different elements in a scope?

Update:

1 Answers1