How to get the text from a div which has children in it

Question

I am currently studying JavaScript and I have the following problem. Is it possible to get only the text from a div which has children inside it? I managed to make it work only for the text which appears before the div's children.

PS: I would like to mention that I am trying to achieve this using only pure JavaScript.

var Class = document.querySelectorAll('div,b');
for (var i=0; i < Class.length; i++){
   console.log(Class[i].childNodes[0].nodeValue);
}

<div class="Bio">
My name is <b>John Doe</b> and I am coming from Texas
</div>

<div class="Bio">
My name is <b>Jean Frye</b> and I am coming from Alabama
</div>

I, little bit, not understand... You want just, for example `John Doe` and `Jean Frye` or all text expect those names? — nelek, May 14 '17 at 18:51
@nelek I want to split the text into three. First, will be the text before the tag then the text between the tags and last the text after the closing tag. — George Smith, May 14 '17 at 19:08

score 3 · Accepted Answer · answered May 14 '17 at 19:18

It's not very clean way, but try something like this :

//get all div's with Bio css class (You can change it)
var Class = document.querySelectorAll('.Bio');
var sp=document.getElementById('res');
var arr=[]; //I put result into array so You can use it where You need
for (var i=0; i < Class.length; i++) {
   for(var x=0;x<Class[i].childNodes.length;x++) {
     if(Class[i].childNodes[x].nodeValue==null) {
        //get value, innerHTML, from <b>
      //res.innerHTML+=Class[i].childNodes[x].innerHTML+'<br>';
        arr.push(Class[i].childNodes[x].innerHTML);
        } else {
        //get div innerHTML (before,after every child node
        //res.innerHTML+=Class[i].childNodes[x].nodeValue+'<br>';
        arr.push(Class[i].childNodes[x].nodeValue);
        }
   }
}
//show result into that span
for(var i=0;i<arr.length;i++) {
res.innerHTML+=arr[i]+'<br>';
}

<div class="Bio">
My name is <b>John Doe</b> and I am coming from Texas
</div>

<div class="Bio">
My name is <b>Jean Frye</b> and I am coming from Alabama
</div>
<br><br>
<!-- I use this span to show result -->
<span id="res"></span>

Thank you very much. I will need some time to assimilate what exactly is happening in this code but as I see in the result it is exactly what I am looking for. — George Smith, May 14 '17 at 19:23

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

2

var Class = document.querySelectorAll('div');

for (var i=0; i < Class.length; i++){
   var children = [];
   var boldText = Class[i].querySelectorAll('b')[0].innerText;
   var otherText = Class[i].innerText.split(Class[i].querySelectorAll('b')[0].innerText)

   children.push(otherText[0]);
   children.push(boldText);
   children.push(otherText[1]);
   
   console.log(children);
}

Output :-

["My name is ", "John Doe", " and I am coming from Texas"]

["My name is ", "Jean Frye", " and I am coming from Alabama"]

This might do the trick.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 14 '17 at 19:09

Nikhil Kenge

53
4

Unfortunately, I am not trying to print only the names but divide the sentence into three parts. First, will be the text before the tag then the text between the tags and last the text after the closing tag. – George Smith May 14 '17 at 19:16

Dalin Huang · Answer 3 · 2017-05-14T18:56:14.740

1

You can use innerText to get only the text of your selected element.

var Class = document.querySelectorAll('div');
for (var i=0; i < Class.length; i++){
   console.log(Class[i].innerText);
}

<div class="Bio">
My name is <b>John Doe</b> and I am coming from Texas
</div>

<div class="Bio">
My name is <b>Jean Frye</b> and I am coming from Alabama
</div>

For more information, reference the MDN article on innerText

edited May 14 '17 at 18:56

answered May 14 '17 at 18:51

Dalin Huang

11,212
5
32
49

@DanileH at 1st place I doesn't downvoted Your answer... now, about Your answer - result is `undefined`, `undefined`... ;) – nelek May 14 '17 at 18:58
@DanileH I already tried with this approach. However, with that approach, you are destroying the HTML tags inside the main div. That is why I am trying to split the text into three. First, will be the text before the tag then the text between the tags and last the text after the closing tag. PS: What I am trying to say is that if you print the same result the bold text will disappear. Also, innerHTML will not do the work because in the future if you want to edit it you will be formatting the HTML code as well. – George Smith May 14 '17 at 19:15

How to get the text from a div which has children in it

3 Answers3