从孩子那里获取文本

Question

I would like to get all the text from multiple diverse children of a known parent div so that the result is: " Text 1 & Text 2 "

---

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

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

---

$(".bigdiv").text() would only produce Text 1Text 2 and I need to separate the texts with a space or & or etc.

Answer 1

You could use a 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

Another possible option but it won't work for text 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> 

fiddle with it

Answer 4

You can loop through all the children of bigdiv with this:

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

  }

inside of that function you can still use .text() to get the text from child element.

If you want to be really flexible about how you use the values it would be best to store the text of each child element in an array.

If you just want something simple to output it right way with a seperator between child values you can do something like this:

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()
  }
});

I put up an example here .