如何根据元素到指定祖先元素文本开头的位置筛选元素？

嘿，我刚好碰到过类似的用户脚本标题识别问题！你现在用的文本索引判断方法确实有个致命的缺陷——当普通文本里提前出现和目标元素一样的内容时，就会完全误判。让我给你拆解一下问题，再提供可行的解决方案。

你的需求是筛选视觉上靠近可见文本开头的重要元素（h1、h2、strong等）作为潜在标题，核心是要判断元素在页面中的实际位置优先级，但当前用container.text().indexOf(elementOfInterest.text())的思路，本质是在拼接后的文本字符串里找内容的位置，完全忽略了DOM节点的结构关系。

举个典型的错误场景：

<div class="content-container">
  <p>这是一段包含<strong>我的标题</strong>的普通文本，提前出现了相同内容</p>
  <h1>我的标题</h1> <!-- 这才是我们要识别的目标标题 -->
</div>

现有方法会因为<p>里的“我的标题”在拼接后的文本里索引更早，错误地把<p>里的strong当成标题，而漏掉真正的h1。

要解决这个问题，必须抛弃纯文本索引的思路，转而基于DOM节点在文档流中的实际位置和元素语义优先级来筛选。具体可以按这几步来实现：

1. 定义元素优先级 #

先给目标元素设定优先级，比如语义化越强的标签优先级越高：

const elementPriority = {
  'H1': 1,    // 最高优先级
  'H2': 2,
  'STRONG': 3 // 最低优先级
};

2. 筛选可见候选元素 #

先收集所有目标类型的元素，再过滤掉隐藏的元素（比如display:none、visibility:hidden的）：

const container = document.querySelector('.content-container');
const candidates = Array.from(container.querySelectorAll('h1, h2, strong'));

// 过滤可见元素
const visibleCandidates = candidates.filter(el => {
  const rect = el.getBoundingClientRect();
  return rect.width > 0 && rect.height > 0; // 确保元素在页面上可见
});

3. 按位置与优先级排序 #

对候选元素先按页面垂直位置排序（越靠近容器顶部越靠前），位置相同时再按元素优先级排序：

visibleCandidates.sort((a, b) => {
  // 先比较元素在页面中的垂直位置
  const aTop = a.getBoundingClientRect().top;
  const bTop = b.getBoundingClientRect().top;
  if (aTop !== bTop) {
    return aTop - bTop;
  }
  // 位置相同则按元素优先级排序
  return elementPriority[a.tagName] - elementPriority[b.tagName];
});

4. 输出最优结果 #

排序后的第一个元素就是最符合要求的潜在标题：

const potentialTitle = visibleCandidates.length ? visibleCandidates[0] : null;

把这些步骤整合起来，完整的函数如下：

function detectPotentialTitle(containerSelector) {
  const container = document.querySelector(containerSelector);
  if (!container) return null;

  const elementPriority = {
    'H1': 1,
    'H2': 2,
    'STRONG': 3
  };

  const candidates = Array.from(container.querySelectorAll('h1, h2, strong'));
  const visibleCandidates = candidates.filter(el => {
    const rect = el.getBoundingClientRect();
    return rect.width > 0 && rect.height > 0;
  });

  visibleCandidates.sort((a, b) => {
    const aTop = a.getBoundingClientRect().top;
    const bTop = b.getBoundingClientRect().top;
    if (aTop !== bTop) return aTop - bTop;
    return elementPriority[a.tagName] - elementPriority[b.tagName];
  });

  return visibleCandidates.length ? visibleCandidates[0] : null;
}

你可以用这些测试用例来验证预期行为，确保方法能正确处理各种场景：

describe('detectPotentialTitle', () => {
  beforeEach(() => {
    document.body.innerHTML = `
      <div id="test-container">
        <p>提前出现的<strong>测试标题</strong>文本</p>
        <h1>测试标题</h1>
        <h2>次要标题</h2>
      </div>
    `;
  });

  it('忽略普通文本中的重复内容，返回正确的h1标题', () => {
    const title = detectPotentialTitle('#test-container');
    expect(title.tagName).toBe('H1');
    expect(title.textContent.trim()).toBe('测试标题');
  });

  it('没有h1时，返回最靠前的h2', () => {
    document.querySelector('h1').remove();
    const title = detectPotentialTitle('#test-container');
    expect(title.tagName).toBe('H2');
  });

  it('所有候选元素隐藏时，返回null', () => {
    document.querySelectorAll('h1, h2, strong').forEach(el => {
      el.style.display = 'none';
    });
    const title = detectPotentialTitle('#test-container');
    expect(title).toBeNull();
  });
});

• 可以加入文本长度过滤：标题通常不会太长，比如过滤掉textContent长度超过50的strong元素（避免把段落里的长强调文本当成标题）
• 优先选择语义化容器内的元素：比如优先考虑<header>、<main>标签内的候选元素，这些区域更可能包含标题
• 处理重复文本的特殊情况：如果多个元素文本完全相同，直接按元素优先级排序，不用考虑位置

内容的提问来源于stack exchange，提问作者Fabian N.