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

实现支持语法高亮的代码编辑器，核心思路是通过可编辑区域接收用户输入，再结合正则匹配识别不同语法元素，最后用不同样式渲染对应内容。整个过程不需要依赖第三方库，仅用原生JavaScript就能完成基础功能。

核心实现原理

语法高亮代码编辑器的实现主要分为三个部分：

• 搭建可输入的编辑区域，用于接收用户的代码输入
• 定义不同语法元素的正则匹配规则，比如关键字、字符串、注释等
• 将输入的代码按规则拆分，给不同元素添加对应的样式类，再渲染到页面上

基础结构搭建

首先我们需要创建编辑器的整体结构，包含一个用于输入的原生文本区域和一个用于展示高亮效果的容器，两者位置重叠，输入区域在上层但设置为透明，这样用户看到的就是高亮后的效果。

<div class="editor-container">
  <div class="highlight-area"></div>
  <textarea class="input-area" spellcheck="false"></textarea>
</div>

对应的基础样式如下，让两个区域重叠，输入区域在上层且背景透明：

.editor-container {
  position: relative;
  width: 800px;
  height: 400px;
  border: 1px solid #ccc;
  font-family: 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.5;
}

.highlight-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-y: auto;
  z-index: 1;
}

.input-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: #000;
  resize: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  z-index: 2;
}

语法规则定义

我们需要定义不同语法元素的正则规则，这里以JavaScript语法为例，定义关键字、字符串、数字、单行注释、多行注释的匹配规则：

// 定义语法规则，每个规则包含匹配正则和对应的样式类
const syntaxRules = [
  // 单行注释
  { regex: ///.*$/gm, className: 'comment' },
  // 多行注释
  { regex: //*[sS]*?*//g, className: 'comment' },
  // 字符串 双引号
  { regex: /"[^"\]*(?:\.[^"\]*)*"/g, className: 'string' },
  // 字符串 单引号
  { regex: /'[^'\]*(?:\.[^'\]*)*'/g, className: 'string' },
  // 模板字符串
  { regex: /`[^`\]*(?:\.[^`\]*)*`/g, className: 'string' },
  // 数字
  { regex: /bd+(.d+)?b/g, className: 'number' },
  // JavaScript关键字
  { regex: /b(const|let|var|function|if|else|for|while|return|class|new|this|import|export|from|async|await)b/g, className: 'keyword' }
];

对应的高亮样式可以这样定义：

.keyword {
  color: #c678dd;
  font-weight: bold;
}

.string {
  color: #98c379;
}

.number {
  color: #d19a66;
}

.comment {
  color: #5c6370;
  font-style: italic;
}

高亮渲染逻辑实现

核心的高亮处理函数需要接收输入的代码文本，遍历所有语法规则，将匹配到的内容替换为带样式类的span标签，最后把处理后的内容放到高亮展示区域。

/**
 * 处理代码文本，生成带高亮样式的HTML
 * @param {string} code - 输入的代码文本
 * @returns {string} 带高亮样式的HTML字符串
 */
function highlightCode(code) {
  // 先对代码中的特殊字符进行转义，避免HTML解析错误
  let processedCode = code
    .replace(/&/g, '&')
    .replace(/</g, '<')
    .replace(/>/g, '>');

  // 遍历所有语法规则，替换匹配的内容
  syntaxRules.forEach(rule => {
    processedCode = processedCode.replace(rule.regex, match => {
      return `<span class="${rule.className}">${match}</span>`;
    });
  });

  return processedCode;
}

绑定输入事件

最后需要给输入区域绑定input事件，当用户输入内容时，实时调用高亮处理函数，更新高亮展示区域的内容：

// 获取DOM元素
const inputArea = document.querySelector('.input-area');
const highlightArea = document.querySelector('.highlight-area');

// 绑定输入事件
inputArea.addEventListener('input', () => {
  const code = inputArea.value;
  const highlighted = highlightCode(code);
  highlightArea.innerHTML = highlighted;
});

// 初始加载时如果有默认内容，也进行高亮处理
inputArea.dispatchEvent(new Event('input'));

功能优化建议

上述实现是基础版本，还可以做以下优化：

• 添加行号显示功能，在编辑器左侧增加行号区域，随内容滚动同步更新
• 处理输入区域的滚动同步，让输入区域和高亮区域的滚动位置保持一致
• 扩展语法规则，支持更多语言或者更多语法元素的高亮
• 添加Tab键缩进功能，提升编辑体验

注意：如果需要在代码中使用<a>标签，只能在

代码块内部使用，正文其他位置不允许出现可点击的链接标签。

JavaScript代码编辑器语法高亮正则匹配修改时间：2026-07-10 23:48:39