本文介绍一种健壮、递归式的 dom 文本提取方法，可准确获取任意 html 元素的全部可见文本内容，并自动包含 ``、`
在实现前端搜索过滤功能时，仅调用 $(element).text() 是不够的——它会忽略 <input>、<select>、<textarea> 等表单元素的用户输入值（因其 value 不属于文本节点）。例如，一个包含「姓名：」的 <tr>，.text() 仅返回「姓名：」，导致搜索“张三”失败。
解决该问题的核心思路是：遍历 DOM 子树，对每个节点区分处理：
- 若节点具有 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);
});✅ 优势说明：
- ✅ 支持所有表单控件：<input>、<textarea>、<select>（需注意 select 的 value 即选中项值）；
- ✅ 自动跳过注释节点、脚本内容，仅提取用户可见文本；
- ✅ 无 jQuery 依赖核心逻辑，getText() 可独立复用；
- ✅ 比 .find('input').map().join() 更健壮——天然支持嵌套结构（如 div > form > input）、动态生成内容及富文本区域。
⚠️ 注意事项：
- getText() 不处理 contenteditable 元素的编辑状态，如需支持，请额外判断 elem.isContentEditable 并取 elem.innerText；
- 若需排除特定子元素（如隐藏的 .no-search 区域），可在递归前添加条件过滤；
- 正则匹配建议启用 i 标志提升用户体验，并对用户输入做 RegExp.escape（或简单转义特殊字符）以避免语法错误。
此方案摒弃了“先拼接 .text() 再手动提取 input.val()”的碎片化做法，以统一、可扩展的 DOM 遍历逻辑，真正实现“所见即所搜”。
