jQuery获取文本内容及子元素方法

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《jQuery 获取元素及子元素文本内容方法》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

本文介绍一种健壮、递归式的 DOM 文本提取方法，能自动合并元素的 `textContent` 与 `<input>`、`<textarea>`、`<select>` 等表单控件的当前 `value`，从而实现真正“所见即所搜”的搜索过滤功能。</select></textarea>

在前端搜索过滤场景中，仅调用 $(elem).text() 是不够的——它会忽略用户在 <input>、<textarea> 或 <select> 中输入或选择的内容，导致搜索结果不准确。例如，一个包含「姓名：<input value="张三">」的表格行，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 混用。

今天关于《jQuery获取文本内容及子元素方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！