页面加载时添加em标签高亮文本失效问题排查与解决

你的高亮失效问题核心在于HTML元素的嵌套规则：<em>是行内元素（inline element），根据HTML规范，行内元素绝对不能包含块级元素（比如<p>、<blockquote>这类block-level元素）。当你尝试用em包裹包含块级元素的选区时，浏览器会自动修正DOM结构（把em拆开到块级元素内部甚至直接丢弃无效嵌套），导致你的高亮效果完全不符合预期。

两种可行的解决方向 #

方向1：改用块级容器包裹（简单直接）

把用来高亮的<em>换成块级元素（比如<div>），给它设置和em一致的样式（比如斜体、背景高亮）。这种方式不需要复杂的节点判断，适合快速修复：

.highlight-wrap {
  font-style: italic;
  background-color: #ffff99; /* 可选的背景高亮 */
}

修改highlight函数里创建节点的部分：

// 替换原来的newNode创建代码
var newNode = document.createElement("div");
newNode.className = "highlight-wrap";
newNode.appendChild(ra.extractContents());
ra.insertNode(newNode);

方向2：区分行内/块级节点处理（符合HTML规范）

如果想严格遵循HTML规范，保持行内内容用<em>包裹，块级内容通过添加样式类实现高亮，可以用下面的修改方案：

首先添加CSS样式：

/* 行内内容的高亮样式 */
.highlight-em {
  font-style: italic;
  background-color: #ffff99;
}
/* 块级元素的高亮样式 */
.highlight-block {
  font-style: italic;
  background-color: #ffff99;
  padding: 2px 4px; /* 可选，优化块级元素的高亮视觉 */
}

然后修改JavaScript代码：

var s = window.getSelection();

// 递归处理节点，区分行内/块级分别处理
function processNode(node, startOffset, endOffset, isInRange) {
  if (node.nodeType === Node.TEXT_NODE) {
    if (!isInRange) return;
    // 把文本节点拆分后包裹到em中
    var em = document.createElement('em');
    em.className = 'highlight-em';
    var textSegment = node.splitText(startOffset);
    textSegment.splitText(endOffset - startOffset);
    em.appendChild(textSegment);
    node.parentNode.insertBefore(em, textSegment.nextSibling);
  } else if (node.nodeType === Node.ELEMENT_NODE) {
    // 判断当前元素是否为块级元素
    const blockTags = ['P', 'BLOCKQUOTE', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
    const isBlock = blockTags.includes(node.tagName);
    
    let currentOffset = 0;
    const nodeTextLength = node.textContent.length;
    const nodeIsInRange = (currentOffset < endOffset) && (currentOffset + nodeTextLength > startOffset);
    
    if (isBlock && nodeIsInRange) {
      // 块级元素直接添加高亮类
      node.classList.add('highlight-block');
      return;
    }
    
    // 遍历处理子节点
    Array.from(node.childNodes).forEach(child => {
      const childLength = child.textContent.length;
      const childStart = Math.max(0, startOffset - currentOffset);
      const childEnd = Math.min(childLength, endOffset - currentOffset);
      const childIsInRange = (currentOffset < endOffset) && (currentOffset + childLength > startOffset);
      
      processNode(child, childStart, childEnd, childIsInRange);
      currentOffset += childLength;
    });
  }
}

function highlight(element, st, en) {
  // 先清除之前的高亮，避免重复叠加
  document.querySelectorAll('.highlight-em, .highlight-block').forEach(el => {
    if (el.classList.contains('highlight-em')) {
      // 把em替换成内部内容，还原结构
      el.replaceWith(...el.childNodes);
    } else {
      el.classList.remove('highlight-block');
    }
  });
  
  const range = document.createRange();
  let pos = 0;
  
  // 定位选区的起始和结束位置（保留你原来的dig逻辑）
  function dig(el) {
    el.childNodes.forEach((e) => {
      if (e.nodeType === 1) {
        dig(e);
      } else {
        if (pos < st) {
          if (pos + e.length >= st) {
            range.setStart(e, st - pos);
          }
        }
        if (pos < en) {
          if (pos + e.length >= en) {
            range.setEnd(e, en - pos);
          }
        }
        pos += e.length;
      }
    });
  }
  
  pos = 0;
  dig(element);
  
  s.removeAllRanges();
  s.addRange(range);
  
  // 获取选区的共同祖先节点，开始处理所有子节点
  let container = range.commonAncestorContainer;
  if (container.nodeType === Node.TEXT_NODE) {
    container = container.parentNode;
  }
  
  processNode(container, st, en, true);
}

验证效果 #

现在这几种场景都能正常实现高亮：

• <em class="highlight-em"><span></span></em>：行内节点正常包裹
• <em class="highlight-em">Text</em>：文本节点正常包裹
• <p class="highlight-block"><span></span></p>：块级p添加样式类实现高亮
• <blockquote class="highlight-block"><p><span></span></p></blockquote>：blockquote添加样式类，内部内容继承高亮效果

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