JavaScript - Get contained text in DOM element in Javascript?

Question

I have a

with some children within and it's contained text like below:


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

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


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

user_10117223 · Answer

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


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

user_14807111 · Answer

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(/(
|
|
|\s{2,})/gm, "") );


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

JavaScript - Get contained text in DOM element in Javascript?

2 Answers