✅ 作者简介:一名将要迈入大三的大学生,致力于提高前端开发能力
✨ 个人主页:前端小白在前进的主页
系列专栏 : node.js学习专栏
⭐️ 个人社区 : 个人交流社区
学习格言: ☀️ 打不倒你的会使你更强!☀️
前言
这几天在学习node.js的过程中涉及到了正则表达式的知识,这一块是我的知识盲区,所以在更新node专栏期间加更一篇文章专门搞懂正则表达式,同时想告诉大家,在学习过程中出现了不会的东西一定要及时复习,及时去学,不要积劳成疾!
正则表达式( Regular Expression ) 是用于匹配字符串中字符组合的模式。在js中,正则表达式也是对象!
匹配
)替换
)提取
) etc…缺点
)在js中可以通过两种方式创建正则表达式
利用 RegExp 对象来创建
let regexp = new RegExp(/123/);
console.log(regexp); // /123/
利用字面量创建(推荐使用!)
let rg = /123/
console.log(rg); // /123/
虽然在上面我们创建了正则表达式,但是在实际使用中,是要匹配正则表达式的,这里的话就引入了test
test() 是正则对象方法
,用于检测字符串是否符合该规则,该对象会返回true或false,其参数是测试字符串
代码书写:regexObj.test(str)
1. regexObj 是我们写的正则表达式
2. str 是我们要测试的文本
3. 就是检测str文本是否符合我们所写的正则表达式规范
let rgp = /123/
console.log(rgp.test(123)); // true
一个正则表达式可以由简单的字符构成,比如/abc/
,也可以是简单和特殊字符的组合,比如/ab*c/
。其中特殊字符也被成为元字符
,在正则表达式中是具有特殊意义的专用字符,如 ^、&、+
等等。
特殊符号链接直达 ===> 正则表达式mdn
正则表达式中的边界符用来提示
字符所在的位置
,主要有两个字符
边界符 | 说明 |
---|---|
^ | 表示匹配行首的文本(从谁开始) |
$ | 表示匹配行尾的文本(以谁结束) |
在上方内容中讲解创建正则表达式,如果我们仅仅采取/abc/
这种没有特殊符号的方式,会发生一些情况:
let rg = /123/
console.log(rg.test(123)); //true
console.log(rg.test(11234)); //true
我们可以发现当我们测试的内容只要是符合正则表达式都会打印出true
,如果我们想设置以123开头的呢?这就需要我们的特殊符号了!
let reg = /^abc/
console.log(reg.test('abc')); //true
console.log(reg.test('aabce')); //false
console.log(reg.test('aaabcc')); //false
通过以上的方式,我们限制了测试的字符串必须符合以abc
开头的规范,所以下方两行会返回false
当你需要精确匹配的时候,你可以通过控制开头和结尾实现
let regs = /^abc$/
console.log(regs.test('abc')); //true
console.log(regs.test('abcd')); //false
该代码表示,测试的字符串必须是abc
,其余的都会打印false
在实际开发过程中,我们不可能要匹配一连串的字符,我们需要的功能是我可以随意去匹配,只要满足限制就行,字符类就可以解决这个问题。
字符类:表示有一系列的字符可以选择,只要匹配其中一个就可以了
符号:[]
举例:let rg = /[abc]/
,表示只要测试字符串满足 包含a 或 包含b 或 包含c 就返回true
我们可以加上特殊字符:let reg = /^[abc]$/
,表示,你的测试字符串只能是a 或者 b 或者c!
如果你想匹配一个范围内的字符串可以使用特殊符号[-]
举例 : let reg = /^[A-z]$/
,表示26个英语字母任何一个字母(大小写均可),都会返回true,但是只能是其中的一个!
let rg = /^[A-z0-9_-]$/
,表示26个英语字符、个位数字、两个符号任意一个都会打印true
^
符号^
符号在外部表示从谁开始的意思,但是一旦它也出现在字符类[]
中,则表示取反
的意思!let rg = /^[^A-z0-9_-]$/
,第一个^
表示从谁开始,第二个^
表示对这个正则规范取反操作,如:不能是26个字母中的任意一个 etc…量词符顾名思义就是与数量有关,这时你就要想一想它跟字符类的结合使用咯!量词符用来
设定某个模式出现的次数
量词 | 说明 |
---|---|
* | 重复零次或多次 |
+ | 重复一次或更多次 |
? | 重复零次或一次 |
{n} | 重复n次,n 是一个正整数,匹配了前面一个字符刚好出现了 n 次。 |
{n,} | 重复n次或更多次,n 是一个正整数,匹配前一个字符至少出现了 n 次。 |
{n,m} | 重复n到m次,如果 n 或者 m 的值是 0, 这个值被忽略。 |
*
的使用
*相当于 >=0,可以出现0次或者很多次
let rg = /^a*$/
,表示,a可以出现0次或者多次
let rg = /^a*$/;
console.log(rg.test('')); //true
console.log(rg.test('a')); //true
console.log(rg.test('aaa')); //true
+
的使用
相当于 >=1 可以出现一次或多次
let rg = /^a+$/;
console.log(rg.test('')); //false
console.log(rg.test('a')); //true
console.log(rg.test('aaa')); //true
?
的使用
相当于1 || 0
let rg = /^a?$/;
console.log(rg.test('')); //true
console.log(rg.test('a')); //true
console.log(rg.test('aaa')); //false
{n}
的使用(重点掌握)
let rg = /^a{3}$/;
console.log(rg.test('')); //false
console.log(rg.test('a')); //false
console.log(rg.test('aaa')); //true
在这里表示字符串a
重复了三次
{n,}
的使用(重点掌握)
let rg = /^a{3,}$/;
console.log(rg.test('')); //false
console.log(rg.test('a')); //false
console.log(rg.test('aaa')); //true
console.log(rg.test('aaaaa')); //true
在这里表示字符串a
必须要重复三次以及以上,否则打印false
{n,m}
的使用(重点掌握)
let rg = /^a{3,16}$/;
console.log(rg.test('')); //false
console.log(rg.test('aaa')); //true
console.log(rg.test('aaaaaaaaaaaaaaaaaaaaaaaaaaa')); //false
在这里表示字符串a
重复的区间是大于等于3 并且 小于等于16
结合某个模式应用
let reg = /^[A-z0-9_-]{3,16}$/
console.log(reg.test('1018703239')); // true
console.log(reg.test('101a24543_q')); //true
这个正则表达式其实就可以用来写用户名的表单验证了!
括号总结
大括号{}
: 是 量词符 ,表示重复的次数
中括号[]
: 是 字符集合, 表示匹配方括号中的任意字符
小括号()
: 表示优先级!
预定义类指的是
某些常见模式的简写方式。
(简化之前的写法!)
预定类 | 说明 |
---|---|
\d | 匹配0-9之前的任意数字,相当于[0-9] |
\D | 匹配一个非数字字符。等价于 [^0-9] |
\w | 匹配一个单字字符(字母、数字或者下划线)。等价于 [A-Za-z0-9_] |
\W | 匹配一个非单字字符。等价于 [^A-Za-z0-9_] |
\s | 匹配空格(包括换行符、制表符、空格符等等) ,相当于[\t\r\n\v\f] |
\S | 匹配非空格的字符,相当于[^\t\r\n\v\f] |
举例:
我们在这里做一个需求,验证座机号码
,座机号码有两种形式 010-12345678
或者 0530-1234567
.
(注 : 正则表达式中的或者符号为 : |
)
let reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/
console.log(reg.test('010-12345678')); //true
console.log(reg.test('0500-1234567')); //true
replace替换
replace()方法可以实现替换字符串操作,用来替换的参数可以是一个字符串也可以是一个正则表达式
写法:
stringObj.replace(regexp/substr,replacement)
正则表达式参数
/表达式/[switch]
switch(也称为修饰符)按照什么模式来匹配,有三种常用的值:
g : 全局匹配
i : 忽略大小写
g + i : 全局匹配 + 忽略大小写
案例:
<body>
<textarea cols="30" rows="10" class="one"></textarea>
<div class="t"></div>
<script>
let text = document.querySelector('.one')
let ts = document.querySelector('.t')
text.onblur = function () {
ts.innerHTML = text.value.replace(/星星币|牛哇/g, '**')
}
</script>
前端的学习开发过程中正则表达式是必须要掌握的,在开发中登录注册,以及敏感词汇的替换都需要正则表达式的作用,正则表达式上手非常的容易,在这篇文章中更多的去解析正则表达式文档的api,api有更加详细的大家可以认真去看一下,这篇文章可以让你解决绝大多数正则表达式的问题!
a-zA-Z ↩︎
a-zA-Z ↩︎