面向 Web 开发人员的正则表达式简介 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

2025-05-24

面向 Web 开发人员的正则表达式简介

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

这最初是在推特上发布的:https://twitter.com/chrisachard/status/1181583499112976384

1.

正则表达式查找与模式匹配的字符串部分

在 JavaScript 中,它们是在正斜杠 // 之间创建的,或者使用new RegExp()

然后用于诸如matchtestreplace

您可以预先定义正则表达式,也可以在调用方法时直接定义

新的正则表达式

2.

一次匹配一个字符,

或者将多个字符放在方括号 [] 中以捕获任何匹配的字符

使用连字符捕获一系列字符 -

方括号和连字符

3.

在正则表达式的末尾添加可选标志来修改匹配器的工作方式。

在 JavaScript 中,这些标志是:

i = 不区分大小写
m = 多行匹配
g = 全局匹配(查找全部,而不是查找一个)

正则表达式标志修饰符

4.

在开头使用插入符号 ^ 表示“字符串的开始”

在末尾使用美元符号 $ 表示“字符串结尾”

开始将匹配的组放在一起以匹配更长的字符串

插入符号美元符号,将匹配项分组在一起

5.

使用通配符和特殊转义字符来匹配更大类别的字符

. = 除换行符之外的任何字符

\d = 数字
\D = 非数字

\s = 空格
\S = 任何非空格

\n 换行

通配符

6.

仅匹配一定数量的带有量词的匹配字符或组

  • = 零个或多个
  • = 再多一次?= 0 或 1 {3} = 正好 3 次 {2, 4} = 两次、三次或四次 {2,} = 两次或更多次

量词

7.

使用括号 () 来分组捕获

match将返回完整匹配项以及组,除非您使用g标志

使用括号 () 内的管道运算符 | 来指定该组匹配的内容

| = 或

捕获组的括号

8.

要匹配特殊字符,请使用反斜杠 \ 进行转义

JS 正则表达式中的特殊字符有:^ $ \ . * + ? ( ) [ ] { } |

因此,要匹配星号,您可以使用:

\*

而不仅仅是 *

特殊字符

9.

要匹配除特定字符之外的任何字符,请在方括号内使用插入符号 ^

这意味着 ^ 有两种含义,可能会造成混淆。

当它位于正则表达式的前面时,它表示“字符串的开始”,当它用在方括号内时,它表示“不是这个字符”。

插入符号表示“不”

10.

正则表达式可用于查找和匹配各种内容,从 URL 到文件名

然而!如果您尝试使用正则表达式执行非常复杂的任务,例如解析电子邮件(这会变得非常混乱,非常快),或 HTML(它不是常规语言,因此无法通过正则表达式完全解析),请务必小心。

当然,正则表达式还有很多其他功能,比如惰性求值、贪婪求值、向前看和捕获

但是 Web 开发人员想要使用正则表达式完成的大多数工作都可以使用这些基本构建块。

我已经在写一篇后续文章,其中包含大量现实世界的正则表达式用例🎉

 

喜欢这篇文章吗?

在 Twitter 上查找更多信息:@chrisachard
或加入时事通讯📬 https://chrisachard.com/newsletter/

感谢阅读!

文章来源:https://dev.to/chrisachard/intro-to-regex-for-web-developers-2fj4
PREV
🔥 通过 10 条推文学习 React(带钩子)1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 奖励
NEXT
如何在 DEV 上撰写你的第一篇博文 0. 注册 1. 点击“撰写博文” 2. 选择一个合适的描述性标题 3. 添加一些标签 4. (可选)选择封面图片 5. 撰写你的博文! 6. 添加一些格式 7. 在博文正文中添加图片 8. 在预览模式下查看你的博文 9. 发布!恭喜!🎉