jQuery的text()方法返回标签与JS代码，如何获取DOM元素纯净文本？

问题根因 #

jQuery的.text()方法会无差别获取元素下所有子文本节点的内容，包括<script>、<style>、<noscript>等非内容类标签内的代码。Gmail、Outlook属于重前端应用，会频繁插入动态内联脚本和样式，因此会出现返回内容混杂标签、脚本代码的问题。

解决方案 #

通过原生JS实现过滤型的文本提取方法，主动排除非内容类标签的内容，同时优化MutationObserver的监听逻辑减少无效触发：

1. 纯净文本提取函数

function getPureText(element) {
  let text = '';
  // 定义需要排除的非内容标签列表
  const excludeTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME', 'OBJECT'];
  // 递归遍历节点
  const traverse = (node) => {
    // 文本节点直接拼接内容
    if (node.nodeType === Node.TEXT_NODE) {
      text += node.textContent + ' ';
      return;
    }
    // 元素节点判断是否在排除列表，不在则继续遍历子节点
    if (node.nodeType === Node.ELEMENT_NODE) {
      if (excludeTags.includes(node.tagName)) return;
      for (const child of node.childNodes) {
        traverse(child);
      }
    }
  };
  traverse(element);
  // 合并多余空白字符后返回
  return text.replace(/\s+/g, ' ').trim();
}

2. 优化后的MutationObserver实现

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 处理新增子节点
    if (mutation.addedNodes.length > 0) {
      mutation.addedNodes.forEach(node => {
        const pureText = getPureText(node);
        if (pureText) console.log(pureText);
      });
    }
    // 处理已有文本节点的内容修改
    if (mutation.type === 'characterData') {
      const pureText = getPureText(mutation.target.parentElement);
      if (pureText) console.log(pureText);
    }
  });
});

// 监听配置，关闭无关监听项降低性能消耗
observer.observe(document, {
  childList: true,
  subtree: true,
  characterData: true,
  attributes: false
});

方案优势 #

• 主动过滤所有脚本、样式类标签的内容，不会返回混杂的代码
• 既可以获取当前变动元素的直接文本，也可以获取子元素内的合法可见文本，不会遗漏内容
• 优化了监听逻辑，减少大量无效的mutation处理，性能远高于原方案
• 纯原生实现无第三方依赖，适配性更强，可在Gmail、Outlook这类复杂站点正常运行

内容的提问来源于stack exchange，提问作者Adam