JavaScript 正则表达式匹配字符串:处理转义与换行

作者:青柠

时间:2026-10-28

浏览:222

本文详解如何使用正则表达式在 JavaScript 中精准匹配字符串。重点解决包含双引号、单引号的转义字符(如 \")以及跨行字符串(包含 \r, \n)的匹配问题,通过构建非捕获组与交替模式,实现健壮的字面量提取。

文章目录

JavaScript 正则匹配字符串:处理转义与换行

阅读第五章示例后有所启发,特此记录以作回顾与分享。

基础字符串匹配

针对字符串匹配这一常见需求,本文聚焦于 JavaScript 代码环境下的字符串提取。作者计划通过此练习实现语法高亮功能,因此选用 JS 代码作为示例场景。

具体代码示例如下:

var str1 = "我是字符串1哦,快把我取走", str2 = "我是字符串2哦,快把我取走";

对于此类简单字符串,使用正则 /"[^"]*"/g 即可轻松完成匹配。

JavaScript 正则表达式匹配字符串:处理转义与换行 配图
 

JavaScript 正则匹配字符串:处理转义与换行 注:白色截图显示的是 Chrome 34 控制台运行结果,深灰色部分为 Sublime Text 的显示效果。

处理转义字符

虽然能直接获取内容,但需注意 JavaScript 字符串中允许使用转义字符。

JavaScript 正则匹配字符串:处理转义与换行

JavaScript 正则表达式匹配字符串:处理转义与换行 配图
 

涉及转义的代码如下:

var str1 = "我是字符串1哦,\"快把我取走\"", str2 = "我是字符串2哦,\"快把我取走\"";

若沿用之前的正则,结果将不符合预期,因此必须处理转义逻辑。转义规则为反斜杠后接一个字符,故使用 \\. 进行匹配,修正后的正则表达式为 /"(?:\\.|[^"])*"/g。

处理折行字符串
 
JavaScript 正则表达式匹配字符串:处理转义与换行 配图
 

对于不熟悉正则的读者,从 /"[^"]*"/g 到 /"(?:\\.|[^"])*"/g 的演变可能难以理解,此处简要说明其原理。


(?:) 表示非捕获组,即匹配的内容不会保存到内存中,仅用于逻辑分组。


\\. 用于匹配转义序列(如 \"、\' 等),匹配成功时消耗两个字符。


[^"] 用于匹配除双引号外的任意字符,匹配成功时消耗一个字符。


该表达式的逻辑是:优先尝试匹配 \\. 形式的转义字符;若成功,则消耗掉合法的转义部分;若失败,则回退使用 [^"] 匹配普通字符。

所谓“消耗正确的转义”,意指如 "aa\\aa\"aa\ufffaa" 这类包含合法转义符的字符串能被正常匹配。而对于形如 "aa\\aa\"aa\ufff\\"aa" 的情况,其中的 \\ 会被匹配,但随后的 " 既不符合 \\. 也不符合 [^"] 的条件,导致匹配中断。最终结果仅为 "aa\\aa\"aa\ufff\\",后续的 aa" 无法被纳入匹配范围。

处理折行字符串
处理折行字符串

至此,我们获得了一个较为强大的正则表达式,能够有效匹配 JavaScript 代码中的字符串。

处理折行字符串

然而,似乎还有遗漏。JavaScript 字符串允许折行书写,例如:

相关代码如下:

var str = "大家好\
我是js";

使用前述正则能否匹配此类字符串?答案是肯定的。因为反斜杠 \ 无法被 \\. 匹配,但可以被 [^"] 捕获。\ 后的字符通常是 \r、\n 或 \r\n(具体取决于系统换行符),这些均能被 [^"] 匹配,从而意外地实现了强力表达式。

兼容单引号字符串

最后需解决单引号字符串的匹配问题。修改表达式为 /"(?:\\.|[^"])*"|'(?:\\.|[^'])*'/g 即可覆盖。

测试案例如下:

测试代码如下:

var str1 = "我是字符串1哦,\
\"快把我取走\"", str2 = '我是字符串2哦,\
\'快把我取走\'';

处理折行字符串

处理折行字符串

匹配成功。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章