25 js高级 -- 正则表达式

136 阅读3分钟

正则表达式概述

正则表达式(regular expression) 是用于匹配字符串中字符组合的模式 。 在js中,正则表达式也是对象

正则表达式通常被用来检索替换那些符合某个模式(规则) 的文本


例如 :

验证表单 : 用户名表单只能输入英文字母、数字或者下划线 ,

昵称输入框中可以输入中文(匹配) 。

此外,正则表达式还常用于过滤掉页面内容中的一些敏感词(替换) ,

或者 从字符串中获取我们想要的特定部分(提取)等

正则表达式的特点

1、灵活性、逻辑性和功能型非常强

2、可以迅速地用极简单的方式达到字符串的复杂控制

3、对于比较刚接触的人来说,比较难懂

4、实际开发中,一般都是直接复制写好的正则表达式,但是要求会使用正则表达式且根据实际情况修改

正则表达式在js中的使用

创建正则表达式

通过RegExp创建

image.png

利用字面量创建

image.png

注 : 正则表达式里面不需要加 引号 ,不管是数字型 还是字符串型

检测正则表达式 test

test 用于检测是否符合正则表达式的规范 , 若符合 true ; 不符合 false

image.png

正则表达式中的特殊字符 (元字符)

  • 一个正则表达式可以由 简单的字符构成 ,,比如 /abc/ ;

  • 也可以是 简单和特殊字符的组合 , 比如 /ab*c/ ;

  • 其中 ,特殊字符也被称为元字符 ,在正则表达式中是具有特殊意义的专用符号 ,如 ^ 、$、 +等

  • 符号非常多,可以去MDN官网查询

边界符

提示字符所处的位置,主要有2个字符

  • ^ : 用于匹配行首的文本 (以谁开始)

  • $ : 表示匹配行尾的文本 (以谁结束)

^ 开头

image.png

$ 结尾

image.png

精确匹配

image.png

字符类

[] 包含

表示有一系列字符可供选择,只要匹配其中一个就可以了

image.png

情况1 : 以 a | b | c 开头

image.png

情况2 只能是 a / b / c

image.png

[-] 范围

image.png

小tips : 正则表达式区分大小写

字符组合

分析 /^[a-zA-Z0-9_-]$/

/ /  ----- 正则表达式字面量

^  ----- 开头 

$ ----- 结尾

[]  ----- 包含

a-z ----- 范围 a 到 z 

A-Z ----- 范围 A 到 Z

0-9  ------ 范围 0 到 9

_  ------ 下划线

-短横线

image.png

取反 ^

在 [] 里面写 ^ ,表示取反的意思,代表不可以书写

image.png

量词符

设定某个模式出现的次数

符号类

* 出现零次或者多次

image.png

+ 出现1次或者多次

image.png

?相当于 1 || 0 , 出现1次 或者 0次

image.png

具体数字类

{n} 重复出现n次

image.png

{n,} 大于等于n

image.png

{n,m} 大于等于n,小于等于m

image.png

量词设定某个模式出现的次数

image.png

image.png

小tips : 输入量词时,中间不要有空格

括号总结

[] 大括号

用于匹配括号之内的任意字符即可

image.png

image.png

{} 花括号

表示次数

image.png

() 小括号

表示优先级

image.png

正则在线测试

网站 : c.runoob.com/

预定义类

是某些常见模式的简写方式

\d : 相当于 [0-9]

匹配 0~9之间的任一数字,

image.png

\D :相当于 [^0-9]

匹配所有 0~9以外的字符 ,

\w : 相当于[A-Za-z0-9_]

匹配任意字母、数字和下划线

\W : 相当于 [^A-Za-z0-9_]

匹配 除 \w 之外的字符

\s : 相当于 [\t\r\n\v\f]

匹配所有的空格(包括换行符\n、制表符\t,空格符等)

\S : 相当于[^\t\r\n\v\f]

匹配非空格的字符

或者 |

image.png

正则表达式中的替换 replace

原字符串名.replace('要替换掉字符串/正则表达式','替换为')

里面是字符串

image.png

里面是正则表达式

image.png

不过,replace只能替换第一个出现的敏感词,若后面还有,那么就无法替换了

image.png

那么就可以使用参数

正则表达式参数

/表达式/[switch]

switch 也称为修饰符 ,按照什么样子的模式来匹配,有三种值:

g  : 全局匹配
 
i  : 忽略大小写

gi :全局匹配 + 忽略大小写
       

g 全局匹配

image.png

i 忽略大小写

image.png

gi 全局匹配 + 忽略大小写

image.png