JavaScript正则表达式匹配字符串字面量（js正则替换字符串奇数索引时的字符）学到了吗

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

文章摘要

这篇文章讲述了作者在解决代码高亮问题过程中，从第一代到第三代的正则表达式解决方案的演变。第一代正则表达式思路混乱且存在错误，第二代通过增加星号*解决了部分问题，第三代则进一步优化，支持多行字符串字面量。文章还介绍了“抢占”技巧在正则表达式中的应用，强调优先匹配重要字符的重要性，并提到类似技巧在注释匹配中的应用。文章以作者的学习过程为主线，展示了正则表达式在实际开发中的重要性和优化方法。文章末尾还推荐了相关文章，供读者进一步学习。

第一次遇到这个问题, 是大概两年前写代码高亮, 从当时的解决方案到现在一共有三代, 嘎嘎. 觉得还是算越来越好的.

第一代:

//那个时候自己正则还不算很精通, 也没有(?:…)这种习惯, 是以寻找结束引号为入口写出的这个正则. 思路混乱, 也存在错误.
//比如像字面量 “abc\\””, 则会匹配为 “abc\\”, 而正确的结果应该是 “abc\\””.
var re=/(‘(‘|.*?([^\\]’|\\\\’))|”(“|.*?([^\\]”|\\\”)))/g;

第二代:

//这个匹配其实和第一代思路基本相同, 也是寻找结束引号, 通过给\\添加*解决了第一代的bug.
var re=/([‘”])(?:.*?[^\\](?:\\\\)*)?\1/g;

第三代:

//老实说第三代是昨天晚上出题的时候突然想出来的(后来又修改过), 支持多行字符串字面量, 思路也有了较大的转变, 从匹配结束引号变味了匹配中间内容.
var re=/([‘”])(?:\\(?:\r\n|[\s\S])|[^\\\r\n])*?\1/g

这里有一个正则里非常常用的技巧, 姑且称之为 “抢占”, 在诸如/a|https://www.jb51.net/article/这样的正则里, 越靠前越先匹配, 通过 “抢占” 一些字符, 可以避开很多麻烦. 说起来有些抽象, 在上面这个例子里, /\\[\s\S]/就可以很自然地抢到 \” 这样的转义字符, 所以不必担心转义字符中的 ” 给匹配造成影响. 这是局部的 “抢占”, 还有更大范围的, 比如注释里的字符串或者字符串里的注释, 只要在同一个正则中, 把相关匹配都写入, 则一定是先遇到的优先. 如 /(注释正则)|(字符串正则)/g, 可以先通过这样的方式, 把内容匹配出来, 再进行进一步判断处理.

虽然可能对于多数人来说, 用处不大, 但万一呢? Best wishes~

您可能感兴趣的文章:js 正则表达式学习笔记之匹配字符串正则匹配密码只能是数字和字母组合字符串功能【php与js实现】String字符串匹配javascript 正则表达式js正则学习小记之匹配字符串字面量js 正则学习小记之匹配字符串字面量优化篇一个关于JS正则匹配的踩坑记录