当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript实现代码高亮编辑器教程

JavaScript实现代码高亮编辑器教程

2025-10-14 11:24:24 0浏览收藏

golang学习网今天将给大家带来《JavaScript实现语法高亮编辑器教程》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

答案是使用“隐藏textarea+高亮层”双层结构，通过监听输入、正则匹配关键词实现语法高亮，结合同步滚动与样式控制完成基础编辑器功能。

如何用JavaScript实现一个语法高亮编辑器？

实现一个语法高亮编辑器，核心思路是将用户输入的代码按语法结构拆解，用不同样式标记关键词、字符串、注释等。虽然不能完全替代专业的编辑器（如 CodeMirror 或 Monaco），但可以基于 contenteditable 元素或 textarea + 覆盖层 方案手动实现基础功能。

1. 选择实现方式：双层结构方案

推荐使用“隐藏 textarea + 可视化高亮层”的组合，避免 contenteditable 的兼容性和光标控制问题。

基本结构：

一个透明的 textarea 用于接收用户输入
一个同位置的 pre 或 div 显示带颜色的代码
CSS 定位让两者重叠，textarea 接收输入，pre 显示高亮

2. 基础 HTML 结构

创建两个重叠的元素：

<div class="editor-container" style="position: relative; width: 600px; height: 400px;">
  <pre id="highlight">

3. 实现语法高亮逻辑

监听 textarea 输入，对内容进行词法分析，生成带样式的 HTML 插入到 pre 中。

示例：JavaScript 语法高亮片段

function highlight(code) {
  // 匹配字符串
  code = code.replace(/(".*?"|'.*?')/g, '<span style="color: green;">$1</span>');
  // 匹配注释
  code = code.replace(/(\/\/.*)/g, '<span style="color: #999;">$1</span>');
  // 匹配关键字
  code = code.replace(/\b(var|let|const|function|if|else|return)\b/g, '<span style="color: blue; font-weight: bold;">$1</span>');
  return code;
}

绑定事件：

const input = document.getElementById('input');
const highlightEl = document.getElementById('highlight');

input.addEventListener('input', function() {
  const code = input.value;
  highlightEl.innerHTML = highlight(code);
});

4. 处理换行与空格

pre 默认保留空白，但需确保输入中的换行符被正确显示。

技巧：

使用 white-space: pre-wrap 让 pre 换行显示
将换行符转为
或直接用 pre 标签天然支持
空格可用或 CSS 控制

加强版 highlight 函数：

function highlight(code) {
  return code
    .replace(/&/g, '&')
    .replace(/</g, '<')
    .replace(/\n/g, '<br>')
    .replace(/(\/\/.*$)/gm, '<span style="color: #999;">$1</span>')
    .replace(/("[^"]*"|'[^']*')/g, '<span style="color: green;">$1</span>')
    .replace(/\b(var|let|const|function|return|if|else|for|while)\b/g, '<span style="color: blue; font-weight: bold;">$1</span>');
}

5. 改进体验：同步滚动与光标

让 textarea 和 pre 滚动同步：

input.addEventListener('scroll', function() {
  highlightEl.scrollTop = input.scrollTop;
});

字体、大小、行距保持一致，避免错位。

6. 扩展语言支持

可定义不同语言的规则对象：

const grammars = {
  js: [
    { regex: /\/\/.*/g, color: '#999' },
    { regex: /".*?"/g, color: 'green' },
    { regex: /\b(function|var|let)\b/g, color: 'blue', bold: true }
  ],
  html: [
    { regex: /<.*?>/g, color: 'purple' }
  ]
};

根据语言动态应用规则。

基本上就这些。虽然简单，但已具备语法高亮的核心机制。实际项目中建议使用 Prism.js 或 highlight.js 配合编辑器库，但理解底层原理有助于定制需求。关键点是分离输入与展示，通过正则匹配实现着色，注意 DOM 同步和样式一致性。不复杂但容易忽略细节。

终于介绍完啦！小伙伴们，这篇关于《JavaScript实现代码高亮编辑器教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！