JS/HTML中保留TXT文本偏移量同时添加格式的方案咨询

当你用<span>给文本添加高亮时，DOM结构会被拆分（原本的单个文本节点被拆分为多个普通文本节点和<span>包裹的文本节点），此时Selection对象返回的anchorOffset和focusOffset只是相对于当前所在文本节点的局部偏移量，不再对应原始TXT文件的全局偏移量。

解决核心思路是分离数据层与视图层：始终以原始TXT文本的全局偏移量为基准，视图层的高亮仅作为渲染结果；用户选中文本时，通过遍历DOM文本节点，将局部偏移量转换为原始文本的全局偏移量。

具体实现方案 #

1. 保存原始文本基准

先把原始TXT文本保存到变量中，作为所有偏移量计算的基准：

const originalText = document.getElementById('file-content').textContent;

2. 实现偏移量转换函数

编写函数将选区的局部偏移量转换为原始文本的全局偏移量：

function getOriginalOffsets(selection) {
  if (!selection.rangeCount) return { start: -1, end: -1 };
  
  const range = selection.getRangeAt(0);
  const preElement = document.getElementById('file-content');
  let startOffset = 0;
  let endOffset = 0;

  // 计算选区起始位置对应的原始文本偏移量
  let currentNode = preElement.firstChild;
  let remaining = range.startOffset;
  while (currentNode) {
    if (currentNode.nodeType === Node.TEXT_NODE) {
      if (remaining <= currentNode.length) {
        startOffset += remaining;
        break;
      } else {
        startOffset += currentNode.length;
        remaining -= currentNode.length;
      }
    }
    currentNode = currentNode.nextSibling;
  }

  // 计算选区结束位置对应的原始文本偏移量
  currentNode = preElement.firstChild;
  remaining = range.endOffset;
  while (currentNode) {
    if (currentNode.nodeType === Node.TEXT_NODE) {
      if (remaining <= currentNode.length) {
        endOffset += remaining;
        break;
      } else {
        endOffset += currentNode.length;
        remaining -= currentNode.length;
      }
    }
    currentNode = currentNode.nextSibling;
  }

  // 处理反向选择（用户从右往左选文本的情况）
  if (selection.anchorNode === range.endContainer && selection.anchorOffset === range.endOffset) {
    [startOffset, endOffset] = [endOffset, startOffset];
  }

  return { start: startOffset, end: endOffset };
}

3. 修改选区获取逻辑并实现高亮渲染

更新点击事件逻辑，同时实现基于原始偏移量的高亮渲染：

$(document).ready(function() {
  const originalText = document.getElementById('file-content').textContent;
  // 存储所有标注信息
  const annotations = [];

  $("#button").click(function() {
    const selection = window.getSelection();
    const selectedText = selection.toString();
    const offsets = getOriginalOffsets(selection);
    
    if (offsets.start !== -1 && offsets.end !== -1) {
      console.log(selectedText, offsets.start, offsets.end);
      // 添加标注并重新渲染
      annotations.push({ start: offsets.start, end: offsets.end });
      renderAnnotations();
    }
  });

  // 根据标注信息重新渲染文本
  function renderAnnotations() {
    const preElement = document.getElementById('file-content');
    preElement.innerHTML = '';
    
    // 按起始位置排序标注，避免渲染顺序混乱
    const sortedAnnotations = [...annotations].sort((a, b) => a.start - b.start);
    
    let currentPos = 0;
    sortedAnnotations.forEach(anno => {
      // 添加标注前的普通文本
      if (anno.start > currentPos) {
        preElement.appendChild(document.createTextNode(originalText.slice(currentPos, anno.start)));
      }
      // 添加高亮标注文本
      const span = document.createElement('span');
      span.style.backgroundColor = 'yellow';
      span.textContent = originalText.slice(anno.start, anno.end);
      preElement.appendChild(span);
      currentPos = anno.end;
    });
    
    // 添加最后一段普通文本
    if (currentPos < originalText.length) {
      preElement.appendChild(document.createTextNode(originalText.slice(currentPos)));
    }
  }
});

方案优势 #

• 所有标注操作始终基于原始TXT文本的全局偏移量，完全匹配文件本身的字符位置
• 视图层的DOM结构变化不会影响偏移量计算，即使添加多个高亮标注也能准确转换
• 支持反向选择、多标注叠加等复杂场景

内容的提问来源于stack exchange，提问作者Alessio Palmero Aprosio