详解 JS 正则表达式

唏哩呼噜睡大觉
155 阅读7分钟

1.什么是正则表达式 ？

所谓的正则表达式[RegExp]：是描述字符模式的对象，以一个用简单的方式描述或者匹配一些列符合某个句法规则的字符串。通常被用来验证、检索、替换哪些符合某个模式的文本。

2.正则表达式的作用

  1. 专门用来验证字符串是否符合规则。
  2. 从字符串里面获取一部分符合规则的内容。
  3. 检查字符串是否具有合法性。
    • 验证用户名（a-z、0-9、不能全是数字、不能全是字母）
    • 验证邮箱格式（xxxx@qq.com）
    • 验证电话号码（11位数字）
    • 验证身份证（18位）
    • 验证QQ号码的格式（5-12位纯数字，并且第一位不能为0）
  1. 获取字符串中的信息
    • 提取一条短信中的数字
    • 提取文件名的后缀
  1. 替换字符串
    • 替换字符串中的非法字符
    • 对电话号码进行屏蔽；比如将中间四位变成****之类
    • 替换占位符 "hello{{name}}" hello 张三

3.正则表达式的使用

3.1 定义方式
  1. 字面量方式（在注释里面写内容）
// 创建reg
let reg = /abcd/[模式修饰符]
  1. 内置构造函数创建方式
const reg = new RegExp("字符串",[模式修饰符]);
//字符串里面包含一段连续的 bcd 字母就可以
const reg1 = new RegExp("bcd");

4.正则表达式的两个方法

4.1 正则.test();

正则.test();匹配字符串；括号里面的属性要放你要检测的字符串；也就是说检索字符串中指定的值。如果在检测时原正则里有相同的字符串；则返回true，否则就返回false。

var reg  = /abcd/
console.log(reg.test('aabbccdd'));//false
console.log(reg.test('aabcddd'));//true
4.2 正则.exec();

正则.exec();捕获字符串；从字符串里面获取符合正则表达式规则的那一部分片段；当字符串里面没有符合规则的片段时，返回null；而当字符串里面有符合规则的片段时，则是先捕获再返回一个数组；通过索引[0]捕获出来片段；但是不管有多少个片段，都只是捕获第一个片段。

const reg = /abcd/
const res = reg.exec('aaabbbcccddd')
console.log(res);//null

const res2 = reg.exec('aaabcddd');
console.log(res2);

5.基础元字符

正则表达式的基础元字符就是以符好的形式来代替文本的内容，是把所有的文本内容归结成一些符好来代替。

元字符描述
+组成正则表达式的基本符号
\s一个空格
\S字符串里面需要一个非空格字符
\d字符串里面需要有一个数字字符
\D一个非空数字
\w表示数字、字母、下划线这三种必须有其中一种
\W表示非数字、字母、下划线，这三种之外只有有一种都可以
.表示需要有一个非换行内容
\转义符：把没有意义的内容转换为有意义的内容；反过来就是把有意义的内容转换为没有意义的内容。
  1. 表示被检测的字符串里面需要有一个空格

  1. 代表字符串里面需要有一个非空格字符

  1. 表示字符串里面需要有一个数字字符

  1. 表示需要一个非数字

  1. 表示数字、字母、下划线这三种必须要有其中一种

  1. 表示除了数字、字母、下划线之外，至少有一种是其他的字符

  1. 表示除了换行之外还有别的其他的东西就都行

  1. \表示转义符

6.边界元字符

边界元字符只有两种

  1. ^：表示开头
  2. $：表示结束
var reg = /^\d/
//表示字符串必须以数字开头
console.log(reg.test('123'));
var reg = /\d$/
console.log(reg.test('12a'));
//表示字符串必须以数字结束
var reg = /^\d$/
console.log(reg.test('123'));
console.log(reg.test('1'));
// \d表示一个数字，以数字开头，马上又以数字结尾
// 从开头到结尾只能有一个数字
var reg = /^\d\d$/
console.log(reg.test('12'));
// \d表示一个字节，设置了开头和结尾，就代表中间只能有一个字节，如果首尾有一个打开，那么就不限制

7.限定元字符

限定元字符写在普通元字符或者字母符号的后面；表示修饰前面 一个符号 的出现次数。

元字符描述
*表示出现 0-多次
+表示出现 1-多次
？表示出现 0-1次
{n}表示出现n次
{n,}表示出现 n-多次
{n,m}表示出现 n - m次
  1. 表示你的字符串里面需要出现一个 0-多个数字组成的片段
const reg = /\d*/;
console.log(reg.test('abd123gfd'));//t
// 表示你的字符串只能由0-多个数字组成
const reg2= /^\d*$/
console.log(reg2.test('123'));//tr
  1. 表示你的字符串里面只能由1-多个数字组成
const reg3 = /^\d+$/
console.log(reg3.test(''));//f
console.log(reg3.test('1'));//t
  1. 表示你的字符串里面只能由0-1个数字组成
const reg4 = /^\d?$/
console.log(reg4.test(''));//t
console.log(reg4.test('123'));//f
  1. 表示你的字符串里面的数字只能出现3次
const reg5 = /^\d{3}$/
console.log(reg5.test(''));//f
onsole.log(reg5.test('123'));//t
  1. 表示你的字符串里面的数字只能出现3-多次
const reg6 = /^\d{3,}$/
console.log(reg6.test(''));//f
console.log(reg6.test('123'));//t
  1. 表示你的字符串里面的数字只能出现2-4次
const reg7 = /^\d{2,4}$/
console.log(reg7.test('12'));//t
console.log(reg7.test('1'));//f

8.特殊字符

其实特殊字符就是一个(),表示一个整体，而且在你捕获一个字符串的时候可以单独捕获。从从左边开始 每一个小括号依次是数组里面 从[1]开始 的内容 。

// 1.表示d出现两次
const reg = /abcd{2}/
console.log(reg.test('abcdabcd'));
//2.表示abcd这个整体出现2次
const reg2 = /(abcd){2}/
console.log(reg2.test('abcdabcd'));

9.正则的贪婪与非贪婪

贪婪：正则的贪婪表现的哪些地方呢 ?当我们给一个符号使用限定符的时候或者当我们捕获的时候，它会尽可能多的去捕获内容；我们管这个特性叫做正则的贪婪性。

const reg = /\d+/;
//能捕获的最大长度
console.log(reg.exec('as123d'));

非贪婪：当我们在捕获的时候，它会尽可能按照最小值来捕获内容；写限定符的时候，在后面多加一个 ?

const reg2 = /\d+?/;
//按照最小长度1来捕获
console.log(reg2.exec('as1234da'));
const reg3 = /\d{2,4}?/
//按照最小长度2来捕获
console.log(reg3.exec('as23432sa'));

10.重复出现的情况

/num会字符串重复出现；num 是一个正整数，也是是一个数字，表示的是正则第 num 个可以被捕获的()；这个可被捕获的小括号位置是什么 出现 一份 一模一样的内容。

const reg = /(abc|def)\d+\1/;
// \1表示重复出现第一个()中一模一样的内容
console.log(reg.test('abc123abc'));//true
console.log(reg.test('abc123def'));//false

const reg2 = /([abcd])\d+([abcd])\d+\1\2/
// 第一个1 是第一位  第二个2是和第二个括号中的一样
console.log(reg2.test('a123b123ab'));

11.正则表达式的标识符

标识符是写在正则表达式的外面，用来修饰整个正则表达式的。分享两种标识符。

  1. i：可忽略大小写 语法：/abcd/igy
// 1.忽略大小写
const reg = /^[abcd]*$/
console.log(reg.test('abcdabcd'));
console.log(reg.test('ac'));

const reg2 = /^[abcd]*$/i;
console.log(reg2.test('Ab'));
  1. g：全局匹配 语法：new RegExp('abcd','igy')；匹配和捕获的时候，都是只能找到第一个，当有g的时候，第二次捕获会从第一次的结束位置开始查找；找到底就是null。
const reg4 = /\d{3}/g
console.log(reg4.exec(str));

12.字符串方法加正则表达式

字符串和正则合作的方法：这些方法都是字符串的常用方法，只不过参数位置可以写正则表达式。

  1. search()

语法：

字符串.search(字符串片段);如果有参数，就返回对应的索引；如果没有 就返回 -1。

const str = '456asf123sdaf';
console.log(str.search('123'));
console.log(str.search(/\d{3}/));//更加灵活，不一定要写123
  1. replace()

语法：

字符串.replace(字符串片段，要替换的内容);

字符串.replace(正则表达式，要替换的内容);

只能替换第一个查找到的内容，返回替换好的字符串；没有 g 的时候，只能替换第一个找到的内容，返回替换好的字符串。有 g 的时候，会替换所有满足条件的内容，返回替换好的字符串。

const str2 = 'abcd123abcd123abcd';
console.log(str.replace('123','*'));
console.log(str.replace(/\d{3}/,'*'));
console.log(str.replace(/\d{3}/g,'*'));
  1. match()

语法：

字符串.match(字符串片段);

字符串.match(正则表达式);

查找到字符串内一个满足片段的内容返回 返回格式和 exec一样

const str3 = 'hello world hello world';
console.log(str3.match('hello'));
console.log(str3.match(/hello/));//跟 exec一样
console.log(str3.match(/hello/g));//数组
avatar
文章
阅读
粉丝