答案是使用“隐藏textarea+高亮层”双层结构，通过监听输入、正则匹配关键词实现语法高亮，结合同步滚动与样式控制完成基础编辑器功能。
实现一个语法高亮编辑器，核心思路是将用户输入的代码按语法结构拆解，用不同样式标记关键词、字符串、注释等。虽然不能完全替代专业的编辑器（如 CodeMirror 或 Monaco），但可以基于 contenteditable 元素或 textarea + 覆盖层 方案手动实现基础功能。
1. 选择实现方式：双层结构方案
推荐使用“隐藏 textarea + 可视化高亮层”的组合，避免 contenteditable 的兼容性和光标控制问题。
基本结构：一个透明的 textarea 用于接收用户输入 一个同位置的 pre 或 div 显示带颜色的代码 CSS 定位让两者重叠，textarea 接收输入，pre 显示高亮
2. 基础 HTML 结构
创建两个重叠的元素：
3. 实现语法高亮逻辑
监听 textarea 输入，对内容进行词法分析，生成带样式的 HTML 插入到 pre 中。
立即学习“Java免费学习笔记（深入）”；
示例：JavaScript 语法高亮片段
function highlight(code) { // 匹配字符串 code = code.replace(/(".*?"|'.*?')/g, '$1'); // 匹配注释 code = code.replace(/(//.*)/g, '$1'); // 匹配关键字 code = code.replace(/b(var|let|const|function|if|else|return)b/g, '$1'); 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, '
') .replace(/(//.*$)/gm, '$1') .replace(/("[^"]*"|'[^']*')/g, '$1') .replace(/b(var|let|const|function|return|if|else|for|while)b/g, '$1');}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实现一个语法高亮编辑器？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1523342.html
微信扫一扫
支付宝扫一扫
