能否借助Monaco Editor获取解析后的HTML节点树？

可以借助Monaco Editor的内置HTML解析能力生成HTML节点树，但它没有直接提供生成DOM树的API，需要通过其语言服务获取语法分析后的AST（抽象语法树），再自行转换为目标节点结构。

具体实现步骤： #

• 获取HTML语言服务：确保已加载Monaco的HTML语言支持，通过monaco.languages.html.getHTMLLanguageService()获取服务实例。
• 解析HTML文档得到AST：将编辑器中的HTML内容传入文本模型，调用语言服务的parseHTMLDocument方法生成包含节点层级的AST。
• AST转换为节点树：遍历AST节点，映射为浏览器DOM节点或自定义的节点结构。

代码示例： #

// 假设已完成Monaco Editor的基础初始化
const editor = monaco.editor.create(document.getElementById('editor-container'), {
  value: '<div class="content"><p>Hello <span>Monaco</span></p></div>',
  language: 'html'
});

// 获取HTML语言服务
const htmlLanguageService = monaco.languages.html.getHTMLLanguageService();

// 获取编辑器的文本模型
const textModel = editor.getModel();

// 创建解析上下文（可按需处理外部资源引用）
const docContext = {
  resolveReference: () => null
};

// 解析HTML生成AST
const htmlAST = htmlLanguageService.parseHTMLDocument(textModel, docContext);

// 将AST转换为DOM节点的工具函数
function convertASTtoDOM(astNode) {
  // 处理文本节点
  if (!astNode.tag) {
    return document.createTextNode(astNode.getText() || '');
  }

  // 创建元素节点
  const domElement = document.createElement(astNode.tag);

  // 处理元素属性
  if (astNode.attributes) {
    astNode.attributes.forEach(attr => {
      domElement.setAttribute(attr.name, attr.value || '');
    });
  }

  // 递归处理子节点
  if (astNode.children) {
    astNode.children.forEach(childNode => {
      domElement.appendChild(convertASTtoDOM(childNode));
    });
  }

  return domElement;
}

// 生成根DOM节点
const rootDOM = convertASTtoDOM(htmlAST.roots[0]);
// 输出或使用生成的节点树
console.log(rootDOM);

注意事项： #

• Monaco生成的AST是语法分析树，与浏览器原生DOM树结构存在差异（比如保留空白、注释节点），可根据需求过滤或调整。
• 对于有语法错误的HTML，Monaco的解析器会做容错处理，但生成的AST可能不符合预期，建议提前做语法校验。
• 该方案不依赖浏览器的DOMParser，也可在Node.js环境中使用Monaco的解析器生成自定义的节点树结构。

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