textContent() without spaces from formatting text

Question

I have an html like this:

<div id="info">
    <h1> My title </h1?
    <div>
        <p> Here is a text and one paragraph </p>
        <p> Another paragraph </p>
    </div>
</div>

I would like to take the inner text without the tags from the whole div#info. So I use this:

document.querySelector('div#info').textContent

And the results have some spaces like this:

"
    My title




Here is a text and one paragraph
Another Paragraph




"

Any idea if there is any command which could give the result to so one line like this:

 "My title Here is a text and one paragraph Another Paragraph"

I tries also the innerText() but it has again spaces.

Answer 1

You need a regex to remove all of the newlines and excess whitespace:

.replace(/[\n\r]+|[\s]{2,}/g, ' ')

Then you can .trim() the result of that call:

console.log(
  document.querySelector('div#info')
          .textContent
          .replace(/[\n\r]+|[\s]{2,}/g, ' ').trim()
)

<div id="info">
    <h1> My title </h1>
    <div>
        <p> Here is a text and one paragraph </p>
        <p> Another paragraph </p>
    </div>
</div>