Node.js中如何判断指定位置是否处于HTML标签内部

核心实现思路 #

不建议用第三方HTML解析库实现——绝大多数DOM解析器会自动修正不规范HTML、忽略原始文本的空白/特殊字符，最后返回的位置和原始文本的字符索引无法对齐。最稳妥的方案是基于原始文本逐段扫描，维护标签状态，不需要跑完全文，扫到目标位置就能返回结果，性能足够。
判定逻辑完全覆盖三类目标场景：

• 位置在起始/结束标签的尖括号包裹范围内（<xxx、</xxx、xxx>这类位置）
• 位置在成对标签的内容区间（标签闭合前的文本部分）
• 位置在自闭合标签的尖括号包裹范围内

扫描状态维护 #

遍历过程只需要维护三个核心状态：

• 标签栈tagStack：按顺序存储未闭合的成对起始标签，用来判断当前位置是否在成对标签的内容区
• 引号标记inQuote：标记当前是否处于标签属性的引号包裹内，引号里的</>不算标签边界，避免误判属性值里的尖括号
• 标签类型标记：识别当前扫描到的标签是普通起始标签、结束标签、还是自闭合标签

扫描流程 #

• 逐段扫描文本，遇到<时启动标签识别逻辑：
  1. 先识别属性里的引号内容，避免把引号里的尖括号当标签边界，遇到转义引号直接跳过
  2. 读取标签名，判断标签类型：如果是</开头就是结束标签；如果标签末尾是/>、或者是HTML标准规定的void空标签（比如<br>、<img>），就算自闭合标签；其余是普通成对起始标签
  3. 定位当前标签对应的结束尖括号>的位置，如果目标位置在当前<和>的索引区间内，直接返回true（对应标签内部的场景1、场景3）
  4. 处理标签栈：如果是结束标签就弹出栈顶元素；如果是普通起始标签就压入栈；自闭合标签不操作栈
  5. 直接把扫描指针跳到当前标签结束的下一个位置，不用逐字符遍历标签内部，提升效率
• 扫描到目标位置时，如果不在任何标签的尖括号区间内，只要标签栈长度大于0，说明当前位置在至少一层未闭合的成对标签内容区（对应场景2），返回true，否则返回false

可直接运行的实现代码 #

/**
 * 判断文本指定位置是否在HTML标签范围内
 * @param {string} html 原始HTML文本
 * @param {number} pos 目标检测位置（0-based字符索引）
 * @returns {boolean} 是否在标签范围内
 */
function isPositionInHtmlTag(html, pos) {
  if (pos < 0 || pos >= html.length) return false;
  let scanPos = 0;
  const tagStack = [];
  let inQuote = null; // 标记是否在属性引号内，值为'、"或者null
  // HTML标准规定的无内容空标签，天生自闭合
  const voidTags = new Set(['area','base','br','col','embed','hr','img','input','link','meta','param','source','track','wbr']);

  while (scanPos <= pos) {
    const char = html[scanPos];
    // 先处理引号内逻辑，引号内的尖括号不算标签边界
    if (inQuote) {
      if (char === '\\') { // 转义字符直接跳过下一位
        scanPos += 2;
        continue;
      }
      if (char === inQuote) inQuote = null;
      scanPos++;
      continue;
    }

    if (char === '"' || char === "'") {
      inQuote = char;
      scanPos++;
      continue;
    }

    if (char === '<') {
      let tagStart = scanPos;
      let isEndTag = html[scanPos + 1] === '/';
      let isSelfClosing = false;
      let tagName = '';
      let nameScanPos = isEndTag ? scanPos + 2 : scanPos + 1;
      // 读取标签名
      while (nameScanPos < html.length && !/[\s/>]/.test(html[nameScanPos])) {
        tagName += html[nameScanPos].toLowerCase();
        nameScanPos++;
      }
      if (voidTags.has(tagName)) isSelfClosing = true;
      // 扫描到标签结束的>位置
      let tagEnd = nameScanPos;
      while (tagEnd < html.length && html[tagEnd] !== '>') {
        if (html[tagEnd] === '/' && html[tagEnd + 1] === '>') isSelfClosing = true;
        tagEnd++;
      }
      // 目标位置在当前标签的尖括号范围内，直接返回true
      if (pos >= tagStart && pos <= tagEnd) return true;
      // 更新标签栈
      if (isEndTag) tagStack.pop();
      else if (!isSelfClosing) tagStack.push(tagName);
      // 指针直接跳到标签结束后的位置
      scanPos = tagEnd + 1;
      continue;
    }

    scanPos++;
  }
  // 不在标签尖括号内时，栈非空说明处于成对标签的内容区间
  return tagStack.length > 0;
}

// 测试示例
const testHtml = 'This text is <a href="http://ex.com"> inside a tag </a> not inside <b>not inside</b> not inside of the <b /> tag.';
console.log(isPositionInHtmlTag(testHtml, 15)); // <a标签内部，返回true
console.log(isPositionInHtmlTag(testHtml, 35)); // a标签内容区，返回true
console.log(isPositionInHtmlTag(testHtml, 55)); // a标签外部文本，返回false
console.log(isPositionInHtmlTag(testHtml, 102)); // <b />自闭合标签内部，返回true

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