本文介绍一种健壮、递归式的 dom 文本提取方法，能自动合并元素的 `textcontent` 与 ``、`
在前端搜索过滤场景中，仅调用 $(elem).text() 是不够的——它会忽略用户在 <input>、<textarea> 或 <select> 中输入或选择的内容，导致搜索结果不准确。例如，一个包含「姓名：」的表格行，text() 只返回“姓名：”，而丢失关键搜索词“张三”。
解决此问题的核心思路是：遍历目标元素及其全部子节点，对每个节点按类型取值——若节点具备 value 属性（如 <input>），则取其 value；否则取 textContent（注意：不用 innerText，因其受 CSS 隐藏影响且性能较差）。以下是一个轻量、无依赖、兼容性良好的纯 JavaScript 递归实现：
function getText(elem) {
let text = '';
// 若有子节点，递归处理每个 childNode（包括文本节点、元素节点等）
if (elem.childNodes.length) {
text += Array.from(elem.childNodes)
.map(node => 'value' in node ? node.value : node.textContent || '')
.join('');
} else {
// 叶子节点：优先取 value（表单控件），否则取 textContent
text += 'value' in elem ? elem.value : elem.textContent || '';
}
return text.trim();
}该函数可直接集成到你的搜索逻辑中：
function searchFilter(root, selector, regex) {
root.find(selector).each(function () {
const fullText = getText(this); // ✅ 包含 input 值的完整文本
$(this).toggle(regex.test(fullText));
});
}
// 使用示例
$('#search-input').on('input', function() {
const keyword = $(this).val().trim();
if (keyword) {
const re = new RegExp(keyword.replace(/[.*+?^${}()|[]\]/g, '\$&'), 'i'); // 转义正则特殊字符
searchFilter($('#data-container'), '.searchable-row', re);
} else {
$('#data-container .searchable-row').show();
}
});⚠️ 注意事项：
- getText() 处理的是原生 DOM 元素（this），因此需确保传入的是 HTMLElement（如 $(this)[0] 或直接使用 .each() 的原生 this）；
- 对于 <textarea> 和 <select>，它们同样具有 value 属性，上述逻辑已天然支持；
- 若需排除隐藏元素（如 display: none 或 type="hidden" 的 input），可在递归前添加判断，但通常搜索应反映用户“可见可编辑”的全部内容，故默认保留；
- 正则表达式需对用户输入进行转义，避免 Uncaught SyntaxError（示例中已提供安全转义正则）。
总结：相比拼接 $(this).text() 与手动查找 input 值的“补丁式”方案，递归遍历 childNodes 并智能判别 value/textContent 的方式更通用、可维护性更高，且完全脱离 jQuery 依赖，可无缝集成至现代项目或与 jQuery 混用。
