javascript - 替代包含元素之间空格的 jQuery text()？

Question

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

<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

问题是每个标记项之间没有空格。 documentation说:

Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.

而且我所有的搜索似乎都可以找到删除空格的结果。有没有办法拉出所有文本并在元素之间保留空间？需要在浏览器中发生，所以 javascript-ish 方法。

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