使用jQuery从包装集合中收集所有文本节点，用空格分隔

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

例如，考虑这个HTML：

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

如果我只是使用jQuery的text()方法来收集

的文本内容，就像这样：

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

产生以下文字：

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

因为每个

元素之间没有空格。 我真正想要的是这个（注意每个句子之间的单一空格）：

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

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

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

但这产生了以下文字：

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

我假设这是因为我正在遍历

每个后代并附加文本，所以我在

和每个
• 子项中获取文本节点，从而导致重复的文本。

  我想我可能会找到/编写一个简单的JavaScript函数来递归遍历包装集的DOM，收集和附加文本节点 – 但是使用jQuery有更简单的方法吗？ 跨浏览器的一致性非常重要。

  谢谢你的帮助！

  Answer 1

  jQuery主要处理元素，它的文本节点function相对较弱。 你可以得到一个包含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); } } function getTextWithSpaces(element) { var texts= []; collectTextNodes(element, texts); for (var i= texts.length; i-->0;) texts[i]= texts[i].data; return texts.join(' '); } 

  Answer 2

  这是我能想到的最简单的解决方案：

   $("body").find("*").contents().filter(function(){return this.nodeType!==1;}); 

  Answer 3

  您可以使用jQuery contents（）方法获取所有节点（包括文本节点），然后将您的集合过滤到仅文本节点。

   $("body").find("*").contents().filter(function(){return this.nodeType!==1;}); 

  从那里你可以创建你需要的任何结构。