
本文面向 javaScript 初学者,系统讲解斜杠 /…/ 包裹的语法本质——正则表达式(regexp),解析其结构、常见用法、实战示例及避坑要点,助你将看似“乱码”的代码转化为强大而精准的字符串处理工具。
本文面向 javascript 初学者,系统讲解斜杠 `/…/` 包裹的语法本质——正则表达式(regexp),解析其结构、常见用法、实战示例及避坑要点,助你将看似“乱码”的代码转化为强大而精准的字符串处理工具。
你是否曾在 Codewars 或其他编程练习平台中,看到类似这样的代码而一头雾水?
/|/?|/[asd]d++
或者更常见的:
/^d{3}-?d{2}-?d{4}$/ /b[A-Z][a-z]+b/g /https?://[w.-]+.[a-z]{2,}/i
这些不是语法错误,也不是“Gibberish”(胡言乱语)——它们是 javascript 中原生支持的正则表达式字面量(Regular Expression Literals),一种用于高效描述、查找、提取或替换字符串模式的强大工具。
? 正则表达式长什么样?
正则表达式在 JavaScript 中最常见的写法是用一对正斜杠 / 包裹,例如:
立即学习“Java免费学习笔记(深入)”;
const emailPattern = /^[^s@]+@[^s@]+.[^s@]+$/; const phoneRegex = /(?([0-9]{3}))?[-. ]?([0-9]{3})[-. ]?([0-9]{4})/;
- 开头和结尾的 / 是字面量定界符(类似字符串用 ” 包裹);
- 中间的部分(如 ^[^s@]+@…)是模式(pattern),由元字符(^, $, +, *, d, b 等)、字符类([a-z], [^0-9])、分组((…))等构成;
- 可选的标志(flags) 写在末尾斜杠后,例如:
- g:全局匹配(不止第一个)
- i:忽略大小写
- m:多行模式(^/$ 匹配每行起止)
✅ 示例:验证邮箱格式
const isEmail = /^[w.-]+@[w.-]+.w+$/i; console.log(isEmail.test("contact@site.io")); // true console.log(isEmail.test("invalid@")); // false
⚠️ 常见误区与注意事项
- 斜杠 / 不是除法或注释:/abc/ 是正则,/ 123 / 才可能是除法(需有操作数上下文),切勿混淆;
- 特殊字符需转义:若想匹配字面量 /、.、?、+ 等,必须加反斜杠:/, .,否则它们会被解释为正则元字符;
- 避免过度复杂:像 /|/?|/[asd]d++ 这类表达式本身存在语法错误(d++ 非法,[asd]d++ 中 ++ 不能直接跟在字符类后),很可能是复制粘贴错误或过时写法——合法正则必须符合语法规范;
- 优先使用 RegExp 构造函数动态创建:当模式来自变量时(如用户输入),应避免字面量,改用 new RegExp(pattern, flags),防止注入风险。
✅ 推荐调试方式:
→ 使用 regexr.com 或 regex101.com 实时高亮、分步解析、生成解释;
→ 在浏览器控制台中结合 .test()、.match()、.replace() 快速验证:
"Hello, World! 123".match(/d+/g); // ["123"] "Price: $29.99".replace(/$d+.d{2}/, "PRICE_HIDDEN"); // "Price: PRICE_HIDDEN"
✅ 总结:正则不是魔法,而是可习得的技能
正则表达式初看晦涩,实则是结构化、可组合、高度复用的字符串逻辑语言。作为前端开发者,掌握基础正则(如邮箱、手机号、URL、日期校验)能显著提升数据清洗、表单验证和文本解析效率。不必强记所有符号——从常用元字符(d, w, ^, $, +, *, ?)和简单分组起步,配合可视化工具反复练习,你很快就能读懂甚至写出清晰、健壮的正则逻辑。
? 小练习:尝试写出匹配「以 https:// 或 http:// 开头的 URL」的正则,并添加 i 标志实现大小写不敏感。答案参考:/^https?://[w.-]+.[a-z]{2,}/i