JavaScript - Get contained text in DOM element in Javascript?

Question

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 out put 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 keeping 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);

 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>

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

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