javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类

**
javascript从入门到跑路-----小文的js学习笔记(1)---------script、alert、document。write() 和 console.log 标签


javascript从入门到跑路-----小文的js学习笔记目录
**

       关注小文我们一起学习进步。

一、选择符

      含义: 选择符,用于选择匹配两个选项中的其中一个,写作 |,可以理解为我们前面学的 “或(||)”。

示例:下面的reg2既可以是数字也可以是我们的小写字母都可以和我们的reg1 相匹配
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第1张图片
执行结果:很显然这里是匹配的
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第2张图片

二、修饰符

修饰符就是对我们的规定我们正则表达式匹配时的一些方式

    我们常用的有三种:

i 不区分大小写
g 全文匹配(全局模式)
m 换行匹配(多行匹配)

语法1: var reg1=/正则表达式/ 修饰符;

语法2: var reg1 = new RegExp("正则表达式",“修饰符”);

如果是变量形式创建的正则表达式,我们的修饰符就直接添加在后面即可;
如果是函数的形式创建正则表达式,我们的修饰符就在后面用逗号隔开,写在引号内。

                                           注意:光理论是不够的,技术是不断更新的。在此赠送2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程,想学的可进裙 519293536 免费获取,小白勿进哦!

1、i

解释:不区分大小写

示例:
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第3张图片
执行结果:本来[a-z]是只与小写字母匹配的,但是添加i之后不区分大小写,所以大写的A也是可以与之匹配成功的
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第4张图片

2、g

解释:有时候他只会与我们的其中一个字符相匹配,但是添加之后,会与我们所有可以与正则相匹配的都进行匹配。

示例:
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第5张图片
执行结果:你可以发现只有第一个a被替换成了b,
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第6张图片
但是如果添加了 g,
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第7张图片
执行结果:你会发现所有的a都会被替换掉,这就是全局模式
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第8张图片

3、m (multiline)

也可以简单理解为多行匹配

示例: 以a开始进行全局匹配替换
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第9张图片
执行结果:你可以发现只有第一行被替换掉了。
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第10张图片
所以我们的m支持换行匹配:
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第11张图片
执行结果:这样即使是其他行满足正则的也都会被替换掉
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第12张图片
补充: 我们的修饰符是可以同时将多个写在一起的。

三、分组

用括号将正则括起来,一个括号表示一个组

示例:
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第13张图片
执行结果:很显然我么的的三个a为一组,所以我们的一个a与其是不匹配的,那么必定为false
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第14张图片
这就是分组将需要分成一组的用一个括号将其包裹住

四、字符类

写法: RegExp.$(数字)

可以简单的理解为每一个字符类就是我们正则当中的一组。所以我们的字符类只能表示正则当中的组(即正则必须分组);而且在使用字符类以前我们的正则必须要被使用,我们的字符类才可以使用成功。

示例:
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第15张图片
执行结果:因为正则没有被使用,所以很显然我们的字符类使用失败
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第16张图片

所以,前面必须先使用正则,
示例:
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第17张图片
执行结果: 当然这里不论要不要这个alert 都是可以的 只要是正则的方法,当然除了test 其他的方法也是可以的,只要先使用正则,我们后面的字符类才可以使用成功:
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第18张图片

但是当我们用替换的时候,就不需要写RegExp
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第19张图片
执行结果:这样和我们正则相匹配的字符串全都被替换为我们写定的字符类
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第20张图片

**

       将星星揉碎在眼里,成了一条银河
javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类_第21张图片

你可能感兴趣的:(javascript从入门到跑路-----小文的js学习笔记(16 — 4)-----正则表达式的选择符、修饰符、以及分组和字符类)