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

问题是每个标记项之间没有 spaces。 documentation 表示：

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

而且我所有的搜索似乎都能找到去除白色的结果 space。有没有办法提取所有文本并在元素之间保留 space ？需要在浏览器中发生，所以 javascript-ish 方法。

Answer 1

您可以利用 jQuery 的 each 方法来收集项目并使用字符串连接来包含间距。

粗略的例子是这样的：

$(function(){
    var output = "";
    $( "li" ).each( function( index, element ){
        output += $(this).text() + " ";
    });
    $('#output').html(output);
});

通过将您想要的内容缓存到变量中，您可以随意查看显示的输出，这将使它只写入 DOM 一次。

http://jsfiddle.net/bq50s8eb/

编辑：

如果您不知道结构是什么，但您确定它们都在一个 div 中，您可以使用 jQuery 的通用选择器。

$(function(){
    var output = "";
    $( "#content-area *" ).each( function( index, element ){
        output += $(this).text() + " ";
    });
    $('#output').html(output);
});

http://jsfiddle.net/bq50s8eb/1/

Answer 2

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

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 3

我不确定这是否适用于任何情况。我的解决方案是使用正则表达式从原始 html:

中过滤标签、空格和换行符

$("#content-area").html().replace(/([\s\n]*<[^>]*>[\s\n]*)+/g," ")

http://jsfiddle.net/limond/mrnctqcv/1/

编辑：当然，这只有在您可以避免任何包含用户看不到的 html 的标签时才有效（例如 <script>...</script>）

Answer 4

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

例如：

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>

有一堆带有空格字符的文本节点。我所做的过滤掉它们的方法是 trim 文本节点的内容，然后检查空白旁边是否有任何内容。最好检查一下出现了哪些空白字符，然后将其过滤掉。

Answer 5

我通过将 white-space:pre 添加到 css 来解决这个问题。使用 jquery 动态添加元素时，您可以这样做：

$('<a/>') 
.attr("style", 'white-space:pre;')
.text('    X    ');

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

Alternative to jQuery text() that includes spaces between elements?

html

javascript

jquery

whitespace