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

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

幻影之瞳

发布： 2025-09-26 13:53:01

原创

867人浏览过

答案是使用“隐藏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"></pre>
  <textarea id="input" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; outline: none; margin: 0; padding: 0; font-family: monospace; font-size: 14px; resize: none;"></textarea>
</div>

登录后复制

3. 实现语法高亮逻辑

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

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

示例：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 默认保留空白，但需确保输入中的换行符被正确显示。

AI图像编辑器

使用文本提示编辑、变换和增强照片

查看详情

技巧：

使用 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实现一个语法高亮编辑器？的详细内容，更多请关注php中文网其它相关文章！