如何利用 JavaScript 实现一个支持语法高亮的代码编辑器？-js教程-PHP中文网

如何利用 JavaScript 实现一个支持语法高亮的代码编辑器？

夜晨

发布： 2025-10-29 23:21:02

原创

813人浏览过

实现语法高亮代码编辑器需用contenteditable容器，通过正则匹配关键字、字符串、注释等并包裹span标签添加样式，结合JavaScript处理词法分析，利用innerHTML更新内容，同时使用Selection和Range API管理光标位置避免跳转，可防抖优化性能，支持多语言配置、行号显示及主题切换，适合轻量级场景。

如何利用 javascript 实现一个支持语法高亮的代码编辑器？

实现一个支持语法高亮的代码编辑器，核心在于将用户输入的代码按语言规则拆解成不同类型的标记（如关键字、字符串、注释等），然后为这些标记应用不同的样式。JavaScript 配合 HTML 和 CSS 就能完成这一目标，无需依赖大型框架。

使用 contenteditable 的富文本区域

最直接的方式是使用 contenteditable="true" 的元素作为编辑器容器，这样它可以像 textarea 一样输入内容，同时支持内联 HTML 样式。

示例结构：

<div id="editor" contenteditable="true"></div>

登录后复制

这个 div 可以捕获用户的输入和键盘事件，同时允许插入带样式的 span 标签来实现高亮。

立即学习“Java免费学习笔记（深入）”；

基本语法高亮逻辑

语法高亮的关键是词法分析（Lexing）。你可以根据目标语言（如 JavaScript、Python）定义正则表达式来匹配不同语法单元。

以 JavaScript 为例，常见匹配规则包括：

关键字：用 \b(function|return|if|else|for|while|const|let|var)\b 匹配
字符串：匹配单双引号字符串 "([^"]*)" 或 '([^']*)'
注释：匹配 //.*$ 和 /\*[\s\S]*?\*/
数字：用 \b\d+(\.\d+)?\b

每次用户输入后，将当前文本按行处理，用正则替换生成带有 class 的 span 标签：

示例代码片段：

function highlight(code) {
  return code
    .replace(/&/g, '&')
    .replace(/</g, '<')
    .replace(/(\n)/g, '<br>')
    .replace(/\b(function|return|if|else)\b/g, '<span class="keyword">$1</span>')
    .replace(/("|')([^"']*)\1/g, '<span class="string">$</span>')
    .replace(/\/\/.*$/gm, '<span class="comment">$</span>');
}

登录后复制

然后将结果写入 contenteditable 元素的 innerHTML，并保留光标位置。