如何获取页面独立最内层文本？现有代码结果冗余求修正

问题分析 #

你的代码遍历页面所有元素并收集非空innerText，但嵌套元素的父元素会包含子元素的文本，导致结果出现重复和冗余。需要只保留最内层承载有效文本的元素内容，也就是没有子元素（或子元素无有效文本）的元素文本。

修正后的代码 #

var elements = Array.from(document.body.getElementsByTagName("*"));
var newStrings = [];

for (var i = 0; i < elements.length; i++) {
  const el = elements[i];
  // 判断当前元素是否有子元素包含非空文本
  const hasNonEmptyChild = Array.from(el.children).some(child => child.innerText.trim().length > 0);
  // 仅收集无有效子元素且自身文本非空的元素内容
  if (!hasNonEmptyChild && el.innerText.trim().length > 0) {
    newStrings.push(el.innerText.trim());
  }
}

console.log(newStrings); // 输出: ['div', 'p1', 'p2', 'h2', 'h2', 'span', 'h6']

代码说明 #

1. 过滤嵌套元素：通过Array.from(el.children).some(...)检查当前元素的子元素中是否存在带非空文本的元素，若存在则说明当前元素的文本来自子元素，直接跳过。
2. 清理无效空白：用trim()处理文本，避免收集仅含空白字符的无效内容。
3. 精准收集目标：只保留最内层的、自身承载有效文本的元素内容，彻底解决冗余问题。

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