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

Question

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

例如，考虑这个 HTML：

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

如果我简单地使用 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 主要处理元素，它的文本节点能力相对较弱。您可以使用 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;});

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

Answer 4

我以 @bobince 的出色答案为基础，制作了搜索工具，该工具将搜索表的所有列并过滤行以仅显示与所有用户搜索词（以任何顺序提供）匹配（不区分大小写）的行。

以下是屏幕截图示例：

这是我的 javascript/jQuery 代码：

$(function orderFilter() {
  // recursively collect all text from child elements (returns void)
  function collectTextNodes(element, texts) {
    for (
      let child = element.firstChild;
      child !== null;
      child = child.nextSibling
    ) {
      if (child.nodeType === Node.TEXT_NODE) {
        texts.push(child);
      } else if (child.nodeType === Node.ELEMENT_NODE) {
        collectTextNodes(child, texts);
      }
    }
  }

  // separate all text from all children with single space
  function getAllText(element) {
    const texts = [];
    collectTextNodes(element, texts);

    for (let i = texts.length; i-- > 0; ) texts[i] = texts[i].data;

    return texts.join(' ').replace(/\s\s+/g, ' ');
  }

  // check to see if the search value appears anywhere in child text nodes
  function textMatchesFilter(tbody, searchVal) {
    const tbodyText = getAllText(tbody).toLowerCase();
    const terms = searchVal.toLowerCase().replace(/\s\s+/g, ' ').split(' ');

    return terms.every(searchTerm => tbodyText.includes(searchTerm));
  }

  // filter orders to only show those matching certain fields
  $(document).on('keyup search', 'input.js-filter-orders', evt => {
    const searchVal = $(evt.target).val();
    const $ordersTable = $('table.js-filterable-table');
    $ordersTable.find('tbody[hidden]').removeAttr('hidden');

    if (searchVal.length <= 1) return;

    // Auto-click the "Show more orders" button and reveal any collapsed rows
    $ordersTable
      .find('tfoot a.show-hide-link.collapsed, tbody.rotate-chevron.collapsed')
      .each((_idx, clickToShowMore) => {
        clickToShowMore.click();
      });

    // Set all tbodies to be hidden, then unhide those that match
    $ordersTable
      .find('tbody')
      .attr('hidden', '')
      .filter((_idx, tbody) => textMatchesFilter(tbody, searchVal))
      .removeAttr('hidden');
  });
});

就我们的目的而言，它工作得非常完美！希望这对其他人有帮助！