如何从包含子元素的div获得文本

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.

我目前正在学习JavaScript，我有以下问题。是否可能只从一个div中获取包含子元素的文本?我设法使它只对出现在div子元素前面的文本有效。

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

PS:我想说的是，我只是想用纯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>

3 个解决方案

#1

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>

#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"]

"我的名字是"Jean Frye" "我来自阿拉巴马"

This might do the trick.

这可能会奏效。

#3

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

可以使用innerText只获取选定元素的文本。

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

有关更多信息，请参考关于innerText的MDN文章

#1