'JavaScript - Get contained text in DOM element in Javascript?

I have a <div> with some children within and it's contained text like below:

<div class="accordion-item__panel">
    <h5>The baby tears the pages of the</h5>
    <p>books with her <span>hands.</span></p>
    <p class="body-small">What is the funniest thing the baby does?</p>
</div>

I want the contained text inside the accordion-item__panel DIV and the output like:

The baby tears the pages of the books with her hands. What is the funniest thing the baby does?

Current output:

The baby tears the pages of the books with her hands. hands. What is the funniest thing the baby does?

Added "hands." twice as it was kept twice while querying elements.

JavaScript:

let desc = "";
const descItems = item.querySelectorAll('.accordion-item__panel *');
descItems.forEach((item, index) => {
    if(index === 0){
        desc += item.innerText;
    }else{
        desc += ' ' + item.innerText;
    }
});

console.log("desc", desc);

Run this: 

let desc = "";
const descItems = document.querySelectorAll('.tcb__accordion-item__panel *');
descItems.forEach((item, index) => {
    if(index === 0){
        desc += item.innerText;
    }else{
        desc += ' ' + item.innerText;
    }
});
console.log("desc", desc);
.accordion-item__panel{
  display:block;
  width: 300px;
}

.accordion-item__panel *{
  padding: 0;
  margin: 0;
}
<div class="accordion-item__panel">
  <h5>The baby tears the pages of the</h5>
  <p>books with her <span>hands.</span></p>
  <p class="body-small">What is the funniest thing the baby does?</p>
</div>
javascripthtmlforeachchildrenqueryselector


Solution 1:[1]

You can just select the parent element, and access the textContent property. It will effectively concatenate the contents of the children in the format you're wanting.

We can also remove the excess whitespace from the children elements being separate using some regex, and trimming the leading/trailing whitespace using the String trim method.

const parentElement = document.querySelector('.accordion-item__panel');
console.log(parentElement.textContent);
console.log(parentElement.textContent.replace(/\s{2,}/g, " ").trim());
<div class="accordion-item__panel">
    <h5>The baby tears the pages of the</h5>
    <p>books with her <span>hands.</span></p>
    <p class="body-small">What is the funniest thing the baby does?</p>
</div>

Solution 2:[2]

textContent would fetch the plain text without tags. Then you can use the replace function to remove the linebreaks and multiple whitespaces. Like that:

const div = document.querySelector('div.accordion-item__panel');
console.log( div.textContent.replace(/(\r\n|\n|\r|\s{2,})/gm, "") ); 
<div class="accordion-item__panel">
    <h5>The baby tears the pages of the</h5>
    <p>books with her <span>hands.</span></p>
    <p class="body-small">What is the funniest thing the baby does?</p>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Maik Lowrey

Related Questions