流月
  • CSS
  • JavaScript
  • Web API
  • TypeScript
  • 框架

    • React
    • Vue
  • 其他

    • 小程序
    • 工程化
    • 性能优化
    • 测试
    • 其他
  • nodejs
  • deno
  • express
  • nginx
  • docker
  • 其他
  • 安全基础
  • 正则表达式
  • 网络基础
  • 设计模式
  • 数据结构与算法
  • LeetCode
  • CodeWars
  • 手写代码
  • Git
  • devops
  • 编码原则
  • 防御编程
  • Chrome
  • Edge
  • Flutter
  • Linux
  • 库
  • 网站
  • 面试
  • 摘抄
  • 方法论
  • 语法
  • 王小波
  • Elon Musk
  • CSS
  • JavaScript
  • Web API
  • TypeScript
  • 框架

    • React
    • Vue
  • 其他

    • 小程序
    • 工程化
    • 性能优化
    • 测试
    • 其他
  • nodejs
  • deno
  • express
  • nginx
  • docker
  • 其他
  • 安全基础
  • 正则表达式
  • 网络基础
  • 设计模式
  • 数据结构与算法
  • LeetCode
  • CodeWars
  • 手写代码
  • Git
  • devops
  • 编码原则
  • 防御编程
  • Chrome
  • Edge
  • Flutter
  • Linux
  • 库
  • 网站
  • 面试
  • 摘抄
  • 方法论
  • 语法
  • 王小波
  • Elon Musk
  • 正则表达式

正则表达式

概念

  • 分组
    • 分组的结果从第1项开始,不是第0项
    • 不想被分组可以这样用(?:xyz)
  • 反向引用
  • 断言
    • 前向
    • 后向
  • 字符集
    • [xyz]
  • 贪婪模式
  • 边界
    • ^
    • $
  • 常用的字符类
    • \d
    • \s
    • \w
  • 常用的量词
    • ?
  • 或运算符
    • x | y

正则可视化

http://wangwl.net/static/projects/visualRegex/#flags=&source=&match=&method=exec

初始化

var re = /\w+\s/g;
var re = new RegExp("\\w+\\s", "g");

exec

  • 返回一个数组或者 null
    • 其中存放匹配的结果
    • 如果未找到匹配,则返回值为 null,并将 lastIndex 重置为 0

lastIndex

  • 当 global 和 sticky 为 true 时,才可以赋值
  • 没有 g 和 y 标志时,可以当做 lastIndex 不存在。
  • 正则的 exec 和 test 方法会改变 lastIndex 属性

sticky 和 global 有什么区别?

  • sticky 标志和 global 标志类似,从 lastIndex 指定的索引出开始查找匹配
  • 如果匹配成功,则改变 lastIndex 的值为匹配结果的索引值加 1
  • 如果匹配失败,则重置lastIndex为0
  • global 标志会从指定的索引处一直向后查找,直到找到为止或到达字符串末尾
  • sticky 标志限制只匹配指定的索引位置。到达末尾后,会重置lastIndex为0

正则 cheatsheets

  • https://overapi.com/regex

元字符

元字符说明
.除换行符以外的任意字符
\w字母或数字或下划线或汉字
\s任意的空白符
\d数字
\b单词的开始或结束
^字符串的开始
$字符串结束
\n一个换行符 (U+000A)
\r一个回车符 (U+000D)

反义

元字符解释
\W匹配任意不是字母,数字,下划线,汉字的字符
\S匹配任意不是空白符的字符
\D匹配任意非数字的字符
\B匹配不是单词开头或结束的位置

重复限定符 量词

贪婪

语法说明
  • | 重复零次或多次
  • | 重复一次或多次 ? | 重复零次或一次 {n} | 重复 n 次 {n,} | 重复 n 次或多次 {n,m} | 重复 n 到 m 次

非贪婪

代码说明
*?重复任意次,但尽可能少重复
+?重复1次或更多次,但尽可能少重复
??重复0次或1次,但尽可能少重复
{n,m}?重复n到m次,但尽可能少重复
{n,}?重复n次以上,但尽可能少重复

关键词

语法用法说明
()/([a-z]+)(\d+)/捕获性分组
(?😃/(?:[a-z]+)(?:\d+)/非捕获性分组,不能使用 $1-$9
\1/(\w)\1/g反向引用,获取之前捕获的内容
\/^((ab))*/转义,把元字符、限定符或者关键字转义成普通的字符
`()``/^(130
[]`/^(13[0-2]176)\d{8}$/`
(?=exp)/\w+(?=.jpg)/g正向前瞻,所在位置右侧要能够匹配 exp
(?!exp)/a{3,}(?!000)/g反向前瞻,所在位置右侧不能匹配 exp
{1,2}/\d{3,6}/g贪婪匹配,往最多的匹配,也就是 6
{1,2}?/(\d{1,2}?)/非贪婪匹配,往最少的匹配,也就是 1
$&$&正则表达式匹配的文本

lastIndex

正则题目

trim 的实现

Vue 模板解析

移除 HTML 标签

校验强密码

验证有效的24小时时间

校验密码强度

匹配电话区号

邮件校验

捕获与非捕获

交换字符串位置

正向反向前瞻

反向引用匹配重复词

贪婪和非贪婪

精确到两位小数

千位加,符号

电话号码分割

url query parser

超出字数省略号

Last Updated: 7/21/20, 12:45 PM
Contributors: bhaltair, wangqi