Monaco Editor JSON模式下HTML值的语法高亮及选中范围问题

核心思路 #

Monaco默认的JSON语言服务仅按JSON词法规则处理双击选中逻辑，要让description字段内的HTML内容双击时选中整个片段，需自定义语言选择规则，扩展Monaco的JSON语言配置实现。

具体实现步骤 #

1. 修改JSON语言的双击匹配规则
   直接覆盖JSON语言的wordPattern，让它优先识别description字段对应的字符串内容：

   monaco.languages.setLanguageConfiguration('json', {
     wordPattern: /("description":\s*")((?:\\"|[^"])+)(")|(\w+)/,
     brackets: [
       ['{', '}'],
       ['[', ']'],
       ['(', ')']
     ]
   });
   

   这个正则会优先匹配"description": "..."包裹的整个HTML内容，双击片段内任意单词时，就能选中整个HTML字符串。

2. 可选：给HTML内容添加语法高亮
   如果需要同时让HTML内容具备语法高亮，可注册一个自定义的混合语言，嵌入HTML的语法规则：

   // 注册自定义语言
   monaco.languages.register({ id: 'json-html' });
   
   // 配置混合语言的token规则
   monaco.languages.setMonarchTokensProvider('json-html', {
     tokenizer: {
       root: [
         // 匹配description字段，进入HTML内容状态
         [/"description":\s*"/, 'string', 'html-block'],
         // 保留原有JSON的语法高亮规则
         [/[{}]/, 'delimiter.bracket'],
         [/[[]]/, 'delimiter.bracket'],
         [/:/, 'delimiter'],
         [/"(?:[^"\\]|\\.)*"/, 'string'],
         [/true|false|null/, 'constant.language'],
         [/-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?/, 'number'],
         [/\s+/, 'white']
       ],
       html-block: [
         // 匹配结束引号，回到JSON根状态
         [/"$/, 'string', '@pop'],
         // 将HTML内容标记为嵌入式HTML，复用HTML的语法规则
         [/[^"]+/, 'embedded.html']
       ]
     }
   });
   
   // 把HTML的语法规则绑定到嵌入式标记
   const htmlTokenizer = monaco.languages.getLanguages().find(l => l.id === 'html').tokenizer;
   monaco.languages.setMonarchTokensProvider('embedded.html', htmlTokenizer);
   

3. 应用配置到编辑器
   创建编辑器时指定自定义语言ID即可：

   const editor = monaco.editor.create(document.getElementById('editor-container'), {
     value: `{"description": "<p>sample html<p>"}`,
     language: 'json-html'
   });
   

注意事项 #

• 若HTML内容包含转义双引号（\"），正则里的(?:\\"|[^"])+已经兼容这种情况，无需额外修改。
• 修改默认JSON语言配置会影响所有JSON编辑器实例，若只想针对单个编辑器生效，建议使用自定义语言ID（如json-html）而非直接修改原生json语言配置。

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