如何使用VS Code Extension API获取HTML标签的class/className字符串

以下三种方案均比全量遍历文档行再解析的实现更简单：

• 调用编辑器内置的语法解析能力
  主流编辑器（VS Code、CodeMirror、Monaco等）均内置了HTML/JSX的实时AST解析缓存，你可以直接通过编辑器API获取当前光标选中位置所属的标签节点，直接读取节点的className属性值即可，编辑器已经自动处理了属性跨行、引号匹配的逻辑，完全不需要自己遍历文档或手动解析。
  以Monaco编辑器为例，核心代码示例：

  const htmlService = monaco.languages.html.getHTMLLanguageService()
  const document = monaco.editor.getModel(uri)
  const position = editor.getPosition()
  const root = htmlService.parseHTMLDocument(document)
  const node = root.findNodeBefore(position)
  if (node.tag === 'h4' && node.attributes) {
    const className = node.attributes.className?.value
    // 直接拿到完整的跨行className
  }
  

• 正则局部匹配
  你已经定位到了h4开标签的起始位置，只需要从该位置向后截取到开标签的闭合符>，用支持跨行匹配的正则提取className即可，不需要处理整个文档和闭合标签：
  正则示例：

  // 匹配规则：className = 任意引号 中间任意字符（含换行） 对应引号闭合
  const classNameReg = /className\s*=\s*(["'])([\s\S]*?)\1/
  // tagSlice是从选中的<h4开始到最近的>的字符串片段
  const match = tagSlice.match(classNameReg)
  const className = match ? match[2] : ''
  

• 原生DOM解析器局部解析
  不需要引入babel等重型解析工具，也不需要拼接完整文档，只需要把截取到的h4开标签片段补个闭合标签，扔给浏览器原生DOMParser解析即可：
  代码示例：

  // tagFragment是你截取到的<h4 ... >片段
  const fullFragment = tagFragment + '</h4>'
  const doc = new DOMParser().parseFromString(fullFragment, 'text/html')
  const h4 = doc.querySelector('h4')
  // 兼容class和className两种写法
  const className = h4.getAttribute('className') || h4.getAttribute('class')
  

内容的提问来源于stack exchange，提问作者aka-r