从孩子那里获取文本

Question

我想从一个已知父div的多个不同子节点中获取所有文本，以便结果为：“ Text 1＆Text 2 ”

---

<div class='bigdiv'>
<div><p>Text 1</p></div>

<div> <div>Text 2</div></div>
</div>

---

$(".bigdiv").text()仅产生Text 1Text 2，我需要用空格或＆或等分隔文本。

Answer 1

您可以使用DOM Tree Walker：

 function getTexts(element) { const nodes = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, null), texts = []; for (let node; node = nodes.nextNode();) { texts.push(node.nodeValue.trim()); } return texts.filter(Boolean); // Only keep non-empty strings } const texts = getTexts($(".bigdiv").get(0)).join(" & "); console.log(texts); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='bigdiv'> <div> <p>Text 1</p> <b>Hello <i>there!</i> </b> </div> <div> <div>Text 2</div> </div> </div> 

Answer 2

 function getTexts() { var rtn=""; $("#texts").children().each(function() { rtn+=$(this).text(); rtn+=" & "; }); return rtn.substring(0, rtn.length-3); } console.log(getTexts()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="texts"> <p>Text #1</p> <p>Text #2</p> <p>Text #3</p> <p>Text #4</p> </div> 

Answer 3

另一个可能的选择，但不适用于文本4。

 var yourString = ''; var counter = 0; $('.bigdiv *').each(function() { if (!($(this).children().length > 0)) { counter++; addThis = $(this).text(); if (counter === 1) { yourString = yourString + addThis; } else { yourString = yourString + ' & ' + addThis; } $('.showstring').text(yourString); } }) 

 .showstring { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='bigdiv'> <div> <p>Text 1</p> </div> <div> <div>Text 2</div> </div> <div> Text 3 </div> <div> Text 4 <span>Text 5</span> </div> </div> <div class="showstring"></div> 

摆弄它

Answer 4

您可以使用以下方法遍历bigdiv的所有子级：

$('.bigdiv').children().each(function() {

  }

在该函数内部，您仍然可以使用.text（）从子元素中获取文本。

如果要真正灵活地使用值，则最好将每个子元素的文本存储在数组中。

如果您只想简单地用子值之间的分隔符将其正确输出，则可以执行以下操作：

extracted_text = "";
seperator = " & ";

//loop throuh all children
$('.bigdiv').children().each(function() {

  //only add to string if a child element has text
  if($(this).text().length > 0){

  //add separation only if our extracted_text variable already has something in it
  if (extracted_text.length > 0){
    extracted_text += seperator;
  }
  //add text from current child element
  extracted_text += $(this).text()
  }
});

我在这里举一个例子 。