17370845950

本文介绍一种健壮、递归式的 dom 文本提取方法，可准确获取任意 html 元素的全部可见文本内容，并自动包含 ``、`` 等表单控件的当前 `value`，完美适配搜索过滤等场景。

在实现前端搜索过滤功能时，仅调用 $(element).text() 是不够的——它会忽略 、、 等表单元素的用户输入值（因其 value 不属于文本节点）。例如，一个包含「姓名：<input value="张三">」的 <tr>，.text() 仅返回「姓名：」，导致搜索“张三”失败。<p>解决该问题的核心思路是：<strong>遍历 DOM 子树，对每个节点区分处理</strong>：</p> <ul> <li>若节点具有 value 属性（如 <input>、<textarea>），取其 value；

否则，取其 textContent（即纯文本内容，不含 HTML 标签）；

对于有子节点的元素，递归收集所有后代节点的文本结果。

以下是推荐的轻量级、无依赖（兼容原生 DOM + jQuery）实现：

function getText(elem) {
  let text = '';
  // 遍历所有子节点（包括文本节点、元素节点等）
  if (elem.childNodes && elem.childNodes.length > 0) {
    for (let node of elem.childNodes) {
      text += getText(node);
    }
  } else {
    // 叶子节点：优先取 value（表单控件），否则取 textContent
    text += 'value' in elem ? elem.value : (elem.textContent || '');
  }
  return text.trim();
}

配合 jQuery 的搜索过滤逻辑使用如下：

function searchFilter(root, selector, regex) {
  root.find(selector).each(function () {
    const fullText = getText(this); // ✅ 包含 input.value
    $(this).toggle(regex.test(fullText));
  });
}

// 示例调用
$('#search-input').on('input', function () {
  const keyword = $.trim($(this).val());
  if (!keyword) return;
  const re = new RegExp(keyword, 'i'); // 不区分大小写
  searchFilter($('#data-table'), 'tr', re);
});

✅ 优势说明：

• ✅ 支持所有表单控件：

、、<select>（需注意 select 的 value 即选中项值）； </select>

✅ 无 jQuery 依赖核心逻辑，getText() 可独立复用；

⚠️ 注意事项：

• getText() 不处理 contenteditable 元素的编辑状态，如需支持，请额外判断 elem.isContentEditable 并取 elem.innerText；
• 若需排除特定子元素（如隐藏的 .no-search 区域），可在递归前添加条件过滤；
• 正则匹配建议启用 i 标志提升用户体验，并对用户输入做 RegExp.escape（或简单转义特殊字符）以避免语法错误。

此方案摒弃了“先拼接 .text() 再手动提取 input.val()”的碎片化做法，以统一、可扩展的 DOM 遍历逻辑，真正实现“所见即所搜”。