如何从其中有孩子的div中获取文本

Posted

技术标签:

【中文标题】如何从其中有孩子的div中获取文本【英文标题】:How to get the text from a div which has children in it 【发布时间】:2017-10-13 12:52:33 【问题描述】:

我目前正在学习 javascript,但遇到以下问题。是否可以仅从其中包含子项的 div 中获取文本?我设法使它仅适用于出现在 div 的孩子之前的文本。

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>

【问题讨论】:

我,有点,不明白...你想要的只是,例如 John DoeJean Frye 或所有文本都期望这些名称? @DanielH 什么??!! @nelek nvm 哈哈,我的错 @nelek 我想将文本分成三部分。首先,将是 标记之前的文本,然后是 标记之间的文本,最后是结束 标记之后的文本。 【参考方案1】:

这不是很干净的方式,但试试这样的:

//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>

【讨论】:

非常感谢。我需要一些时间来理解这段代码中到底发生了什么,但正如我在结果中看到的那样,这正是我正在寻找的。​​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);

输出:-

[“我的名字是”、“John Doe”、“我来自德克萨斯”]

[“我的名字是”、“Jean Frye”、“我来自阿拉巴马州”]

这可能会奏效。

【讨论】:

不幸的是,我不想只打印名字,而是将句子分成三个部分。首先,将是 标记之前的文本,然后是 标记之间的文本,最后是结束 标记之后的文本。【参考方案3】:

您可以使用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>

更多信息,请参考MDN article on innerText

【讨论】:

@DanileH 在第一名我没有拒绝你的答案......现在,关于你的答案 - 结果是undefinedundefined... ;) @DanileH 我已经尝试过这种方法。但是,使用这种方法,您正在破坏主 div 内的 HTML 标记。这就是为什么我试图将文本分成三部分。首先,将是 标记之前的文本,然后是 标记之间的文本,最后是结束 标记之后的文本。 PS:我想说的是,如果您打印相同的结果,粗体文本将消失。此外,innerHTML 不会完成这项工作,因为将来如果您想编辑它,您还将格式化 HTML 代码。

以上是关于如何从其中有孩子的div中获取文本的主要内容,如果未能解决你的问题,请参考以下文章

使用cheerio在没有孩子的父母中获取文本

如何防止拖累孩子,但允许拖累父母?

获取parentNode(...)孩子的所有孩子

有两个孩子的父 div。即使没有显示另一个孩子,也总是让一个孩子填充父母?

如何在jQuery for div中应用“if event target”并适用于所有孩子(模态关闭问题)?

如何在孩子中使用hasMany,其中有belongsTo