原生JS中Markdown视图与编辑器切换时光标位置保留问题求助

要实现点击渲染后的Markdown区域（V）切换到编辑框（E）时光准确定位到对应原始文本位置，最优雅的方案是利用Markdown解析库的AST位置映射能力，无需手动逐字符解析Markdown标记。以下是具体实现思路：

核心思路 #

现代Markdown解析库（如remark、marked）在将原始文本解析为抽象语法树（AST）时，会为每个节点保留原始文本的位置信息（起始/结束偏移量）。渲染V区域时，给每个文本对应的DOM元素绑定这些原始位置数据；点击V时，通过点击位置找到对应的DOM元素，结合点击位置在文本内的偏移，即可计算出原始文本的光标位置。

方案一：基于remark的实现 #

remark是一个专注于Markdown处理的模块化库，其解析器会为AST节点生成精确的位置信息。

步骤1：解析原始文本并获取AST位置信息 #

import { unified } from 'unified';
import { parse } from 'remark-parse';

const markdownText = "Use **asterisks** for bold text. Use _underscores_ for italics text.";
// 解析为AST，每个节点包含position属性（start/end偏移量）
const astTree = unified().use(parse).parse(markdownText);

步骤2：渲染AST到V区域，绑定原始位置数据 #

遍历AST，将每个文本节点渲染为DOM元素时，添加自定义data-original-start和data-original-end属性，存储该文本在原始Markdown中的起始/结束偏移：

function renderAstNode(node, parentElement) {
  if (node.type === 'text') {
    const textNode = document.createTextNode(node.value);
    const span = document.createElement('span');
    // 绑定原始位置信息
    span.dataset.originalStart = node.position.start.offset;
    span.dataset.originalEnd = node.position.end.offset;
    span.appendChild(textNode);
    parentElement.appendChild(span);
  } else if (node.type === 'strong') {
    const strong = document.createElement('strong');
    node.children.forEach(child => renderAstNode(child, strong));
    parentElement.appendChild(strong);
  } else if (node.type === 'emphasis') {
    const em = document.createElement('em');
    node.children.forEach(child => renderAstNode(child, em));
    parentElement.appendChild(em);
  } else if (node.type === 'paragraph') {
    const p = document.createElement('p');
    node.children.forEach(child => renderAstNode(child, p));
    parentElement.appendChild(p);
  }
  // 可扩展处理其他Markdown节点（列表、链接等）
}

// 渲染到view div（V）
const viewDiv = document.getElementById('view');
renderAstNode(astTree, viewDiv);

步骤3：点击V区域时计算并定位光标 #

viewDiv.addEventListener('click', (e) => {
  // 找到包含原始位置信息的最内层文本容器
  let target = e.target;
  while (!target.dataset.originalStart && target.parentElement) {
    target = target.parentElement;
  }
  if (!target.dataset.originalStart) return;

  // 获取点击位置在当前文本中的偏移
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  const textOffset = range.startOffset;
  // 计算原始文本中的总偏移
  const originalOffset = parseInt(target.dataset.originalStart, 10) + textOffset;

  // 切换到编辑模式并定位光标
  viewDiv.style.display = 'none';
  const textarea = document.getElementById('edit');
  textarea.style.display = 'block';
  textarea.value = markdownText;
  textarea.focus();
  textarea.setSelectionRange(originalOffset, originalOffset);
});

方案二：基于marked的实现 #

marked同样支持在渲染时访问token的位置信息，每个token包含start和end属性：

import { marked } from 'marked';

const markdownText = "Use **asterisks** for bold text. Use _underscores_ for italics text.";
// 自定义渲染器，绑定位置信息
const renderer = new marked.Renderer();
renderer.text = (text, token) => {
  return `<span data-original-start="${token.start}" data-original-end="${token.end}">${text}</span>`;
};
// 渲染到view div
const viewDiv = document.getElementById('view');
viewDiv.innerHTML = marked(markdownText, { renderer });

后续的点击事件处理逻辑与remark方案一致，通过data-original-start计算原始偏移即可。

方案优势 #

• 无需手动处理Markdown的复杂语法（如转义字符、嵌套格式），解析库已完成语法解析和位置映射，可靠性更高；
• 支持扩展到所有Markdown元素（列表、代码块、链接等），只需在渲染时对应处理AST节点或token；
• 代码结构清晰，维护成本低。

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