React 18中使用CodeMirror 6获取HTML元素选择器路径方案咨询

edit/matchtags.js是CodeMirror 5版本的专属插件，CodeMirror v6的插件架构做了完全重构，和v5插件没有兼容性，没必要在适配老插件上浪费时间，直接基于v6原生API加轻量解析实现逻辑，稳定性和性能都更好。

核心实现逻辑 #

整个功能不需要依赖jQuery或者其他重型DOM库，流程分三步：

• 监听CodeMirror编辑器的点击事件，拿到点击位置对应的源码字符偏移量
• 解析编辑器内的HTML文本为带位置信息的节点树，定位偏移量对应的最内层元素节点
• 从定位到的节点向上遍历所有父节点，拼接生成CSS选择器路径

具体实现代码 #

依赖安装 #

只需要两个轻量依赖：

• CodeMirror v6官方的view包，提供原生的事件、位置转换API，兼容虚拟滚动、语法高亮场景
• htmlparser2：容错性极强的轻量HTML解析库，能处理抓取到的不规范网页源码，比浏览器原生DOMParser适配性好

npm i @codemirror/view htmlparser2

自定义CodeMirror扩展 #

直接写一个可复用的v6扩展，实现点击提取逻辑：

import { EditorView } from '@codemirror/view'
import { Parser } from 'htmlparser2'

const clickToExtractSelector = EditorView.domEventHandlers({
  click(event, view) {
    // 转换鼠标坐标为编辑器文档偏移量
    const clickPos = view.posAtCoords({ x: event.clientX, y: event.clientY })
    if (clickPos === null) return
    const sourceHtml = view.state.doc.toString()

    let targetElement = null
    const nodeStack = []
    // 逐段解析HTML，记录每个标签的起止位置
    const parser = new Parser({
      onopentag(tagName) {
        const currentNode = {
          tag: tagName.toLowerCase(),
          start: parser.startIndex,
          end: null,
          parent: nodeStack.at(-1) || null
        }
        if (nodeStack.length) {
          nodeStack.at(-1).children = nodeStack.at(-1).children || []
          nodeStack.at(-1).children.push(currentNode)
        }
        nodeStack.push(currentNode)
      },
      onclosetag() {
        const currentNode = nodeStack.pop()
        currentNode.end = parser.endIndex
        // 找到包含点击位置的最内层节点，即为用户点击的元素
        if (!targetElement && clickPos >= currentNode.start && clickPos <= currentNode.end) {
          targetElement = currentNode
        }
      }
    }, { decodeEntities: true })

    parser.write(sourceHtml)
    parser.end()
    if (!targetElement) return

    // 向上遍历拼接选择器路径
    const selectorSegments = []
    let nodeCursor = targetElement
    while (nodeCursor) {
      // 跳过文档声明、html、head节点，可按需调整规则
      if (['!doctype', 'html', 'head'].includes(nodeCursor.tag)) break
      selectorSegments.unshift(nodeCursor.tag)
      nodeCursor = nodeCursor.parent
    }

    // 最终结果，点击示例p标签时输出 body > div > p
    const resultSelector = selectorSegments.join(' > ')
    console.log('提取结果：', resultSelector)
    // 这里可以把结果存到state、触发回调，按业务需求处理
  }
})

React 18 中接入 #

把自定义扩展传入CodeMirror的extensions配置即可，和其他v6扩展用法完全一致：

import CodeMirror from '@uiw/react-codemirror'
import { html } from '@codemirror/lang-html'

export default function SourceEditor() {
  return (
    <CodeMirror
      // 这里替换为实际抓取到的网页源码
      value={`<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</div>
</body>
</html>`}
      extensions={[html(), clickToExtractSelector]}
    />
  )
}

可选优化方向 #

• 需要更精准的选择器时，可以在遍历节点时读取标签的id、class属性，统计同层级同标签的序号，生成类似body > div.container > p:nth-of-type(1)的唯一定位选择器
• 需要高亮选中标签时，直接用CodeMirror v6自带的装饰器API给对应标签的起止位置范围加高亮样式即可，比老matchtags.js的DOM包裹方式性能高很多，不会破坏编辑器内部渲染结构
• 可以加判断过滤注释节点、文本节点、自闭合标签，适配更复杂的源码场景

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