CODEWITHSUNDEEP
javascripthtmlforeachchildrenqueryselector
Daniel Smith
Daniel Smith

Reputation: 1734

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>

Upvotes: 3

Views: 1373

Answers (2)

Maik Lowrey
Maik Lowrey

Reputation: 17594

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>

Upvotes: 2

Rida F&#39;kih
Rida F&#39;kih

Reputation: 246

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>

Upvotes: 5

Related Questions