使用jQuery从包裹的集合中收集所有文本节点，用空格分隔 [英] Using jQuery to gather all text nodes from a wrapped set, separated by spaces

问题描述

我正在寻找一种在jQuery包装集合中收集所有文本的方法，但是我需要在它们之间没有文本节点的兄弟节点之间创建空格。

例如，考虑这个HTML：

 < div> 
< ul> 
< li>列表项＃1< / li>< li>列表项＃2< / li>< li>列表项＃3< / li> 
< / ul> 
< / div> 
  

如果我只是使用jQuery的 text（）收集< div> 的文本内容的方法，如下所示：

  var $ div = $（'div'），text = $ div.text（）。trim（）; 
 
 alert（文字）; 
  

产生以下文本：

列表项目＃1.列表项目＃2.列表项目＃3。

因为没有空格在每个< li> 元素之间。我正在寻找的是（注意每个句子之间的单个空格）：

列表项目＃1。列出项目＃3。列出项目＃3。

这表明我需要遍历包装集中的DOM节点，为每个文本添加文本到一个字符串，然后是一个空格。我尝试了以下代码：

  var $ div = $（'div'），text ='' 
 
 $ div.find（'*'）。each（function（）{
 text + = $（this）.text（）。trim（）+''; 
}）; 
 
 alert（文字）; 
  

但这产生了以下文本：

这是列表项＃1。这是列表项＃2。这是列表项＃3。这是列表项＃1。这是列表项＃2。这是列表项＃3。

我假设这是因为我正在遍历每个后代的< div> 并附加文本，所以我得到< ul> 中的文本节点，并且每个< li> / code>孩子，导致重复的文本。

我想我可能会找到/编写一个简单的JavaScript函数来递归地遍历包装集的DOM，收集和附加文本节点 - 但是使用jQuery有更简单的方法吗？

解决方案

jQuery主要处理元素，其文本节点的权力相对较弱。您可以获取所有具有 contents（）的所有孩子的列表，但是您仍然必须使用它检查类型，所以与使用纯DOM 的childNodes 。没有方法递归地获取文本节点，所以你必须自己写一些东西，例如。如下所示：

  function collectTextNodes（element，texts）{
 for（var child = element.firstChild; child！ == null; child = child.nextSibling）{
 if（child.nodeType === 3）
 texts.push（child）; 
 else if（child.nodeType === 1）
 collectTextNodes（child，texts）; 
} 
} 
函数getTextWithSpaces（element）{
 var texts = []; 
 collectTextNodes（element，texts）; 
 for（var i = texts.length; i  - > 0;）
 texts [i] = texts [i] .data; 
 return texts.join（''）; 
} 
  

I'm looking for a way to gather all of the text in a jQuery wrapped set, but I need to create spaces between sibling nodes that have no text nodes between them.

For example, consider this HTML:

<div>
  <ul>
    <li>List item #1.</li><li>List item #2.</li><li>List item #3.</li>
  </ul>
</div>

If I simply use jQuery's text() method to gather the text content of the <div>, like such:

var $div = $('div'), text = $div.text().trim();

alert(text);

that produces the following text:

List item #1.List item #2.List item #3.

because there is no whitespace between each <li> element. What I'm actually looking for is this (note the single space between each sentence):

List item #1. List item #3. List item #3.

This suggest to me that I need to traverse the DOM nodes in the wrapped set, appending the text for each to a string, followed by a space. I tried the following code:

var $div = $('div'), text = '';

$div.find('*').each(function() {
  text += $(this).text().trim() + ' ';
});

alert(text);

but this produced the following text:

This is list item #1.This is list item #2.This is list item #3. This is list item #1. This is list item #2. This is list item #3.

I assume this is because I'm iterating through every descendant of <div> and appending the text, so I'm getting the text nodes within both <ul> and each of its <li> children, leading to duplicated text.

I think I could probably find/write a plain JavaScript function to recursively walk the DOM of the wrapped set, gathering and appending text nodes - but is there a simpler way to do this using jQuery? Cross-browser consistency is very important.

Thanks for any help!

解决方案

jQuery deals mostly with elements, its text-node powers are relatively weak. You can get a list of all children with contents(), but you'd still have to walk it checking types, so that's really no different from just using plain DOM childNodes. There is no method to recursively get text nodes so you would have to write something yourself, eg. something like:

function collectTextNodes(element, texts) {
    for (var child= element.firstChild; child!==null; child= child.nextSibling) {
        if (child.nodeType===3)
            texts.push(child);
        else if (child.nodeType===1)
            collectTextNodes(child, texts);
    }
}
function getTextWithSpaces(element) {
    var texts= [];
    collectTextNodes(element, texts);
    for (var i= texts.length; i-->0;)
        texts[i]= texts[i].data;
    return texts.join(' ');
}

这篇关于使用jQuery从包裹的集合中收集所有文本节点，用空格分隔的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！