js:正则表达式

目录

正则表达式的语法

定义

检测

检索

元字符

边界符

量词

字符类

表单判断案例

修饰符

过滤敏感词


正则表达式是一种用于匹配和操作文本的强大工具,它是由一系列字符和特殊字符组成的模式 ,用于描述要匹配的文本字符组合模式

正则表达式是一种通用的模式,在js里一般用作验证表单:

用户名表单只能输入英文字母、数字或者下划线, 昵称输入框中可以输入中文(匹配)

过滤掉页面内容中的一些敏感词(替换),或从字符串中获取我们想要的特定部分(提取)等 。

正则表达式的语法

定义

定义正则表达式的语法,//内部是正则表达式的字面量

javascript 复制代码
const reg=/兔子/

检测

使用test()方法:查看正则表达式与指定的字符串是否匹配

javascript 复制代码
const str='我有三只小兔子'
//定义正则表达式
const reg=/兔子/
//是否匹配
console.log(reg.test(str));

匹配上了返回true,没匹配上返回false

reg是正则表达式的对象,test()是reg对象的方法,而定义的正则表达式就相当于一套规则

在实际使用中我们要先有一套规则,再进行检验

检索

除了test()还有一个方法

exec()方法:在一个指定字符串中执行一个搜索匹配

javascript 复制代码
 const str='我有三只小兔子,分别是阿米娅兔兔,特雷西娅兔兔,德克萨斯兔兔'
        //定义正则表达式
        const reg=/兔兔/
        //是否匹配
        console.log(reg.exec(str));

如果匹配成功,exec() 方法返回一个数组,否则返回null

其中的index表示数组的下标14的位置上匹配成功

返回值不同是test()和exec()最大的区别

元字符

普通的字符只能描述他们本身,而元字符是一些具有特殊意义的字符,可以匹配一类字符,例如普通字符里想表示26个英文字母,需要abcdefg......一个一个写出来,但是元字符可以用[a-z]来表示这些字符

极大提高了灵活性和强大的匹配功能。

参考文档:MDN:https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Guide/Regular_Expressions

正则表达式的测试工具: http://tool.oschina.net/regex

元字符太多了,所以我们对它做出分类,分别是边界符、量词、字符类

边界符

表示字符的位置,必须以某某字符开头、结尾等格式要求

第一个true:str里含有gigity

第二个和第三个的true是因为str以gigity开头/结尾

如果想要精确匹配:

javascript 复制代码
//以某一字符开头,以某一字符结尾
console.log(/^gigity$/.test(str))

答案为什么是false?

当我们确定字符串的^和$(也就是开头和结尾),你们这个开头和结尾必须是同一个字符

也就是说只有这种情况才为true:

javascript 复制代码
//和正则表达式里面的字符一模一样才是true
console.log(/^gigity$/.test('gigity'))/'/true

欸,那你就要问了(谁问你了)怎么表示多个重复字符的正则表达式字面量呢?所以我们要学:

量词

表示字符的重复次数,设定某个模式出现的次数

*:

javascript 复制代码
const str = 'ygigitygigitygigitygigity'
         console.log(/^gigity*$/.test(str));//false
            console.log(/y*$/.test(str));//true

为什么第一个是false?第二个是true?

首先,在字符后面加【*】则这个字符只作用于该字符正前方的字符也就是【y】,那么这句正则表达式的意思就变成了【匹配的是以 "gigity" 开头,后面可以跟 0 个或多个 y 的字符串】,而该字符不满足这个规则,所以false

所以根据这个规则,我们写成第二种形式的意思是【含0个或多个y并且以y结尾的字符串】,str满足条件,所以true

如果你想匹配多个 "gigity" 的重复,可以使用 /^(gigity)+$/

javascript 复制代码
const str = 'gigitygigitygigitygigity';
console.log(/^(gigity)+$/.test(str)); // true

当然如果我们写成这样:

javascript 复制代码
console.log(/^y*$/.test(str));

就false了,因为这样的写法要求【字符串里只能有0或0个以上的y】

+:

改为+也很好理解,至少有一个【y】

javascript 复制代码
 const str = 'ygigitygigitygigitygigity'
         console.log(/^gigity+$/.test(str));//false
            console.log(/y+$/.test(str));//true

?:

只有出现0和1次为true,其余都为false

javascript 复制代码
const str = 'ygigitygigitygigitygigity'
         console.log(/^gigity?$/.test(str));//false
            console.log(/y?$/.test(str));//true

当然,以上三种量词也可以辨别空白:

javascript 复制代码
  console.log(/^y*$/.test(''));//true
        console.log(/^y+$/.test(''));//false
        console.log(/^y?$/.test(''));//true

还可以设置固定字符出现的次数:只有只出现四个【y】时为true

javascript 复制代码
console.log(/^y{3}$/.test(''));//false
console.log(/^y{3}$/.test('y'));//false
console.log(/^y{3}$/.test('yy'));//false
console.log(/^y{3}$/.test('yyy'));//true

可以用作判别手机号、验证码、身份证号码输入的位数是否正确

大于等于3即为true:

javascript 复制代码
console.log(/^y{3,}$/.test('yy'));//false
console.log(/^y{3,}$/.test('yyy'));//true
console.log(/^y{3,}$/.test('yyyy'));//true
console.log(/^y{3,}$/.test('yyyyy'));//true

大于等于三,小于等于4即为true(注意{n,m}【,】左右两边没有空格):

javascript 复制代码
console.log(/^y{3,4}$/.test('yy'));//false
console.log(/^y{3,4}$/.test('yyy'));//true
console.log(/^y{3,4}$/.test('yyyy'));//true
console.log(/^y{3,4}$/.test('yyyyy'));//false

字符类

类似于[a-z]等表示一类字符的元字符,\d表示0~9(其实我在学makefile的时候就没觉得正则表达式方便到哪去)

\]匹配字符集合,后面的字符串只要包含abc中的任意一个字符,都返回true: ![](https://i-blog.csdnimg.cn/direct/de644707417f42c58bf4a7eef17f08b6.png) 当判定为【字符串里含a/b/c里的一个以上】的时候会判定为false,但是用上量词,就会变为true:![](https://i-blog.csdnimg.cn/direct/02333ccf298b455c837c7143c104d981.png) 使用连字符表示一个范围: > Ø \[a-z\] 表示 a 到 z 26个英文字母都可以 > > Ø \[a-zA-Z\] 表示大小写都可以 > > Ø \[0-9\] 表示 0\~9 的数字都可以 比如: ![](https://i-blog.csdnimg.cn/direct/d346ecfc0c8347fc9e155cf5dfb88605.png) > 1、在\[\]内加\^符表示取反,和\[\]内的字符取反,\[\^abc\]表示【abc之外的所有其他字符】 > > 2、【.】匹配除了换行符的任何单个字符 > > 3、预定义类: 某些常见模式的简写方式。 > > ![](https://i-blog.csdnimg.cn/direct/31b71ab2401e4f27830af1c18841d23b.png) ![](https://i-blog.csdnimg.cn/direct/7379219e05e045eb8247e39e441dd92e.png) #### 表单判断案例 ```html Document ``` ## 修饰符 修饰符约束正则执行的某些细节行为,如是否区分大小写、是否支持多行匹配等 语法: ![](https://i-blog.csdnimg.cn/direct/d23ec5aaf5bb4b188122c8d83fabd6c5.png) i 是单词 ignore 的缩写,正则匹配时字母不区分大小写 ![](https://i-blog.csdnimg.cn/direct/0b84742f7a334feeb719ca3b437bfbe3.png) g 是单词 global 的缩写,匹配所有满足正则表达式的结果,一般用于全局替换 替换:replace 替换 ![](https://i-blog.csdnimg.cn/direct/e054eed0ee124cdea1d877c861d3da61.png) 和g一起作用,或是【\|】竖线: ![](https://i-blog.csdnimg.cn/direct/afa2113b1e5e4abc89ab9d90f6d11a13.png) ![](https://i-blog.csdnimg.cn/direct/7411c8eb2c6f473cb8f513fb5928c820.png) #### 过滤敏感词 ```html Document

``` ![](https://i-blog.csdnimg.cn/direct/b3d479e3e822444e9cd3dc9816a87b54.png) ## 注册界面 利用之前学过的东西写一个注册页面 其中讲到了两个新的知识点: change事件,是判断表单和之前的内容有没有区别的事件 classList.contains()可以确定该元素有没有包含某个类 ![](https://i-blog.csdnimg.cn/direct/c2f206c141d6477887d0558ac742e8a2.png) ![](https://i-blog.csdnimg.cn/direct/9451d9d882db4c9f9cf3edba956905c4.png) ```html 小兔鲜儿 - 新鲜 惠民 快捷!

新用户注册

已阅读并同意《用户服务协议》
``` 登录界面: ```html 小兔鲜儿 - 新鲜 惠民 快捷! ``` 从登陆页面跳转到主页的模块:js ```javascript ```

相关推荐
___波子 Pro Max.2 天前
正则表达式和通配符
正则表达式
北极象2 天前
用C实现一个最简单的正则表达式引擎
c语言·正则表达式·php
学吧别真挂了2 天前
正则表达式从入门到飞升:覆盖90%前端场景的秘籍
前端·javascript·正则表达式
bst@微胖子3 天前
正则表达式示例集合
正则表达式
智能编织者4 天前
深入解析 Python 正则表达式:全面指南与实战示例
python·mysql·正则表达式
課代表4 天前
VBA 中正则表达式使用指南
数据库·mysql·正则表达式·excel
南隅。5 天前
【C++】基础3——正则表达式,静态多态(函数重载和模板),异常处理
开发语言·c++·正则表达式
BabyFish135 天前
notepad++ 正则表达式
正则表达式·notepad++
奕奕星空6 天前
MySQL中数据处理小技巧
mysql·正则表达式
活跃家族6 天前
正则表达式-万能表达式
正则表达式