浏览器中如何仅重渲染MathJax公式的指定选中部分？

核心逻辑 #

你当前所有公式内容对应单个Jax实例，无法直接通过原生的多节点更新方法渲染，可通过MathJax 2.x暴露的AST节点操作能力，仅更新修改后的局部节点，跳过全量公式解析流程，大幅提升渲染速度。

具体操作步骤 #

• 先确保Jax实例加载完成，获取全局唯一的公式Jax对象：

  const targetJax = MathJax.Hub.getAllJax()[0]
  

• 通过Selection API获取选中区域的DOM节点，匹配对应AST子节点：
  调用window.getSelection().getRangeAt(0)拿到选中区间，遍历targetJax.root（公式AST根节点），通过渲染节点的内部索引属性匹配到对应的AST子节点。

  MathJax 2.x渲染后的每个公式子DOM都和AST节点存在一一对应的映射关系，无需手动做LaTeX字符串匹配。

• 修改匹配到的AST节点内容：

  // 替换为你需要的新公式片段，不需要修改整个公式的原始字符串
  matchedASTNode.Text = "\\int_0^1 f(x)dx"
  

• 调用局部更新接口，仅重渲染修改的节点：

  MathJax.Hub.Queue(["Update", targetJax, matchedASTNode])
  

  该操作仅会重渲染你修改的节点对应的公式区域，其余内容完全不会重新解析，即使是MB级的大公式也能毫秒级完成更新。

效率优化方案 #

如果需要频繁修改局部内容，可以提前在原始LaTeX中给需要修改的片段加上\class标记，后续可以直接定位到对应AST节点，无需每次走Selection匹配：

% 示例：给需要修改的片段加上自定义类名
\class{editable_1}{a^2} + \class{editable_2}{b^2} = \class{editable_3}{c^2}

后续直接调用targetJax.root.findClass("editable_1")即可快速获取对应节点，定位效率更高。

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