title: Alternative to jQuery text() that includes spaces between elements?
body: <p>I have some arbitrary body text in a container. I don't control it so I don't know its structure. But something like this:</p>
  
  <pre><code>&lt;div id='content-area'&gt;
    &lt;h1&gt;Heading&lt;/h1&gt;
    &lt;p&gt;A paragraph or two&lt;/p&gt;
    &lt;ul&gt;
      &lt;li&gt;item 1&lt;/li&gt;
      &lt;li&gt;item 2&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>That is just a simple example for illustration, in reality it could contain many more items and nested things like tables.</p>
  
  <p>I want to pull out all the text and do some processing on the words used. I'm using the following jQuery to get the text.</p>
  
  <pre><code>$('#content-area').text()
  // HeadingA paragraph or twoitem 1item 2
  </code></pre>
  
  <p>The problem is that there are no spaces between each tagged item. The <a href="http://api.jquery.com/text/" rel="noreferrer">documentation</a> says:</p>
  
  <blockquote>
    <p>Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.</p>
  </blockquote>
  
  <p>And all my searches seem to pull up results for removing white space. Is there a way pull out all the text and keep space between elements? Needs to happen in-browser so javascript-ish methods.</p>