如何在 jQuery 中获取元素及其子元素（含 input 值）的完整文本内容

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

在实现前端搜索过滤功能时，仅调用 $(element).text() 是不够的——它会忽略 、、 等表单元素的用户输入值（因其 value 不属于文本节点）。例如，一个包含「姓名：<input value="张三">」的 </p> <tr>，.text() 仅返回「姓名：」，导致搜索“张三”失败。</p> <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>

⚠️ 注意事项：

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

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