正则表达式是前端代码高亮插件实现语法染色的核心工具，通过匹配关键词、字符串、注释等结构赋予样式；需用避免子串误判，区分字符串与模板字面量，注释与正则字面量需结合上下文识别，须防范ReDoS并限制输入长度与超时。
正则表达式是前端代码高亮插件实现语法染色的核心工具，它通过匹配关键词、字符串、注释等语言结构，为不同语法成分赋予对应样式。
匹配关键字与标识符
JavaScript 保留字（如 if、function、return）需精确匹配，避免子串误判。常用方式是用单词边界 包裹：
/(if|else|for|while|function|return|const|let|var)/g- 注意：不能写成
/if|else/g，否则会把life中的if也高亮 - 建议配合 case-insensitive 标志（i） 处理大小写敏感语言（如 HTML 标签），但 JS 关键字严格小写，通常不加 i
识别字符串与模板字面量
字符串匹配需兼顾单引号、双引号和反引号（含嵌套插值），难点在于跳过转义字符和平衡大括号：
- 基础字符串：
/('([^'\]|\.)*')|("([^"\]|\.)*")/g—— 支持常见转义（"） - 模板字面量更复杂，简单实现可用：
/`(?:[^`\$]|\.|(?:${[^}]*}))*`/g（适用于无嵌套插值场景） - 生产级插件（如 Prism.js）会采用状态机或递归匹配，避免正则回溯失控
捕获注释与正则字面量
注释和正则字面量都以 / 开头，但语义完全不同，必须结合上下文判断 —— 这正是纯正则方案的瓶颈：
立即学习“Java免费学习笔记（深入）”；
- 单行注释：
///.*/g；块注释：//*[sS]*?*//g - 正则字面量：
//(?:[^/\]|\.)*/[gimyus]*—— 但该模式在if (a / b > c) { ... }中会错误匹配 - 可靠做法：先做词法预扫描，标记运算符位置，再决定斜杠是除法还是正则起始符；纯正则难以胜任，需搭配简单解析逻辑
性能与安全注意事项
高亮运行在主线程，低效正则会阻塞渲染；用户输入不可信时还需防范 ReDoS：
- 避免嵌套量词：
/(a+)+b/在恶意输入下可能指数级回溯 - 优先使用 非捕获组
(?:...)和 原子组(?>...)（若引擎支持）减少回溯 - 对用户提交的代码高亮前，建议限制输入长度（如 ≤ 100KB）并设置正则执行超时（需借助 Web Worker 隔离）
不复杂但容易忽略：正则只是高亮流程的一环，真正健壮的插件往往混合正则匹配与轻量语法分析，兼顾准确性、性能与可维护性。
