jQuery text() 的替代方案包括元素之间的空格？

我在容器中有一些任意的正文文本。我不控制它，所以我不知道它的结构。但像这样的事情：

<div id='content-area'>
  <h1>Heading</h1>
  <p>A paragraph or two</p>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

这只是一个简单的示例，实际上它可以包含更多的项目和嵌套的东西，例如表格。

我想把所有的文字都拉出来，并对所用的单词做一些处理。我正在使用以下 jQuery 来获取文本。

$('#content-area').text()
// HeadingA paragraph or twoitem 1item 2

问题是每个标记项之间没有空格。这文档 http://api.jquery.com/text/ says:

由于不同浏览器中 HTML 解析器的差异，返回的文本在换行符和其他空格方面可能会有所不同。

我所有的搜索似乎都会拉出删除空白的结果。有没有办法拉出所有文本并在元素之间保留空间？需要在浏览器中进行，所以需要使用 javascript 方法。

如果嵌套结构未知，您可以向每个元素添加空格

https://jsfiddle.net/3y2yLexv/1/ https://jsfiddle.net/3y2yLexv/1/

$( "*" ).each(function( index ) {
   $( this ).append(' ');
});

var str = $('#content-area').text();
//Of course you have to trim duplicated blank spaces.
str = str.replace(/\s\s+/g, ' ');
$('#new').text(str);