替代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

问题是每个标记项目之间没有空格.该文件说:

由于不同浏览器中HTML解析器的变化,返回的文本可能会在换行符和其他空白区域中有所不同.

我的所有搜索似乎都取消了删除空格的结果.有没有办法拉出所有文本并在元素之间保留空间？需要在浏览器中发生这样的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);

Answer 2

我认为 jQuery 使用 textContent 属性，它可以像那样格式化您的字符串。您可以做的是遍历树查找 textNodes 并将其附加到字符串/数组。

例如：

function getText(domElement) {
  var root = domElement;
  var text = [];

  function traverseTree(root) {
    Array.prototype.forEach.call(root.childNodes, function(child) {
      if (child.nodeType === 3) {
        var str = child.nodeValue.trim();
        if (str.length > 0) {
          text.push(str);
        }
      } else {
        traverseTree(child);
      }
    });
  }
  traverseTree(root);
  return text.join(' ');
}

var text = getText(document.getElementById('content-area'));
document.getElementById('results').innerHTML = 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>
<pre id="results"></pre>

有一堆带有空格字符的文本节点。我为过滤掉它们所做的是修剪文本节点的内容，然后检查空白旁边是否有任何内容。检查出现哪些空格字符并过滤掉它们可能会更好。