今天想好好“整理”一下正则

林小饼
208 阅读4分钟

前言

正则这个东东，聊起来都说简单。可要用的时候，又是一顿操作猛如虎。索性，自己整理一下。毕竟，初识正则，给我留下了无法磨灭的印象。再则，有备无患嘛。

一、正则表达式

1.正则表达式（Regular Expression）： 对字符串进行匹配运算的内置对象

  • 表达式：对字符串进行逻辑匹配运算
  • 内置对象：js 语言提供好的内置对象，存储一些对字符串进行匹配运算的方法 2.正则表达式作用 ： 对字符串进行逻辑匹配运算(格式校验)

3.正则表达式使用流程 ：

  • 第一步：声明正则对象：let reg = new RegExp( /正则表达式/ )
  • 第二步：调用对象 test 方法：reg.test( '要校验的字符串' )
    • true : 符合规则
    • false : 不符合规则
//(1)声明正则对象 
let reg = new RegExp(/a/)
//(2)调用正则对象 test 方法
console.log(reg.test('lin')) // false  没有a
console.log(reg.test('wan')) // true  有a

4.正则表达式字面量写法

// 有一些内置对象有字面量写法
// 数组： new Array()              []
// 对象:  new Object()             {}
// 正则:  new RegExp(/正则/)       /正则/
console.log(/a/.test('linwanxia'))

二、元字符与原义文本字符

正则表达式语法由两部分组成：

  • 原义文本字符 : 字符串本身的含义
  • 元字符 ： 改变了字符串本身的含义， 类似于 js 中的关键字
    • [] {} () . \ + ? * ^ $ | 示例如下：

1、原义文本字符

// ◆检测字符串中有没有 晚霞
 console.log(/晚霞/.test('晚晚加油')) // false
 console.log(/晚霞/.test('停车坐爱枫林晚')) // false
 console.log(/晚霞/.test('晚上的霞光')) // false
 console.log(/晚霞/.test('一抹晚霞')) // true
 
//◆匹配字符串中有没有 abc
console.log(/abc/.test('a123')) // false
console.log(/abc/.test('a1b23')) // false
console.log(/abc/.test('a1b2c3')) // false
console.log(/abc/.test('123abc')) // true

2、元字符 |就是 或者 的意思

//◆ /a|b/ 匹配字符串中有没有a或者b
console.log(/a|b/.test("cdefg"));//false
console.log(/a|b/.test("acdefg"));//true
console.log(/a|b/.test("bcdefg"));//true

三、字符类与反向类

1.字符类： []

  • 这里类指的是符合某些特征的对象，只是一个泛指，而不是指某个字符
  • 例如正则表达式： /[abc]/ 把字符 a 或 b 或 c 归为一类，可以匹配这类的字符
  • /[abc]/ 表示匹配字符串中只要有 a 或者 b 或者 c 任何一个即可
console.log(/[abc]/.test("ddddffff"));//false
console.log(/[abc]/.test("dadddfff"));//true
console.log(/[abc]/.test("dbdddfff"));//true
console.log(/[abc]/.test("dcdddfff"));//true

2.反向类（负向类）： ^

  • 反向类意思是不属于某类的内容
  • 例如正则表达式： [^abc] 代表不是字符 a 或 b 或 c 的内容
  • [^abc]表示只要有任何一个字符不是 a 或者 b 或者 c，就满足条件
console.log(/[^abc]/.test("1abacc"));//true
console.log(/[^abc]/.test("aabbcc"));//false
console.log(/[^abc]/.test("aabbce"));//true

四、范围类

范围类：

标题含义
[0-9]0-9 之间的任意字符
[a-z]a-z 之间的任意字符
[A-Z]A-Z 之间的任意字符

注意点

  • 范围类是一个闭区间， [a-z]，这个范围包含字符 a 和 z 本身
  • 在[]内部是可以连写的， [0-9a-zA-Z] 代表包含数字 0-9 或 a-z 或 A-Z 任意字符
  • 右边一定要大于左边，例如 [5-8] 表示 5-8 之间的数字，不能写[8-5],否则程序报错（正则语法错误）

示例如下：

// ◆匹配数字
console.log(/[0-9]/.test("123abcdefg"));//true  
console.log(/[0-9]/.test("abcdefg"));//false

// ◆匹配小写字母
console.log(/[a-z]/.test("a666888"));//true  
console.log(/[a-z]/.test("7777ABC"));//false

// ◆匹配大写字母
console.log(/[A-Z]/.test("Aabcd666"));//true  
console.log(/[A-Z]/.test("abc78787"));//false

// ◆匹配 数字 或 小写字母 或 大写字母
console.log(/[0-9a-zA-Z]/.test("a......[][]]"));//true  
console.log(/[0-9a-zA-Z]/.test("+-*/......[]"));//false

// ◆匹配数字 0-9 范围字符 或 - 字符
console.log(/[0-9-]/.test("-abcdefg"));// true

五、预定义类

预定义类： 正则表达式提供好的用来匹配常见的字符类

预定义类等价类含义
.[^\r\n]除了回车和换行之外的所有字符
\d[0-9]数字字符
\D[^0-9] 非数字字符
\s[\f\n\r\t\v] 空白字符
\S[a-zA-Z_0-9] 非空白字符
\w[a-zA-Z_0-9]单词字符（字母、下划线、数字）
\W[^a-zA-Z_0-9]非单词字符

示例如下：

1、除了回车和换行之外的所有字符

console.log ( /./.test ( "\r\n" ) );//false
console.log ( /./.test ( "" ) );//false 空字符
console.log ( /./.test ( " " ) );//true 空格字符
console.log ( /./.test ( "\t爱你么么哒" ) );//true

2、\d 数字字符(只要有数字即可)

console.log ( /\d/.test ( "123abc" ) );//true
console.log ( /\d/.test ( "abc" ) );//false

3、 \D 非数字字符（只要没有数字即可）

console.log ( /\D/.test ( "123abc" ) );//true
console.log ( /\D/.test ( "123" ) );//false

4、\s 空白字符(只要有空白字符即可)

console.log ( /\s/.test ( "\nabc" ) );//true
console.log ( /\s/.test ( "abc" ) );//false

5、\S 非空白字符（只要有非空白字符即可）

console.log ( /\S/.test ( "\nabc" ) );//true
console.log ( /\S/.test ( "abc" ) );//true
console.log ( /\S/.test ( "" ) );//false
console.log ( /\S/.test ( "\t\n" ) );//false

6 、\w 单词字符（只要有字母、数字、下划线即可）

console.log ( /\w/.test ( "abc123_晚霞" ) );//true
console.log ( /\w/.test ( "晚霞" ) );//false

7、 \W 非单词字符（只要有除字母、数字、下划线之外的任意字符即可）

console.log ( /\W/.test ( "abc123_晚霞" ) );//true
console.log ( /\W/.test ( "晚霞" ) );//true
console.log ( /\W/.test ( "abc123_" ) );//false

六、边界

边界：正则表达式提供了几个常用的边界匹配字符

边界字符含义
^以xx开头
$以xx结束
\b单词边界
\B非单词边界

1、以 xx 开头

// ◆ /^abc/ ： 以 a 开头，后面是 bc 的字符  （
console.log(/^abc/.test("a"));//false
console.log(/^abc/.test("abc"));//true
console.log(/^abc/.test("abc123"));//true

// ◆ /^\d/ ： 以任意数字开头的任意字符
console.log(/^\d/.test("1abc"));//true
console.log(/^\d/.test("a1bc"));//false

// ◆ /^\db/ :   以任意数字开头，后面是b的任意字符
console.log(/^\db/.test("2babc"));//true
console.log(/^\db/.test("2b"));//true
console.log(/^\db/.test("2abc"));//false

2、以 xx 结束

//◆ /b$/ ： 结尾是 b 的任意字符
console.log(/b$/.test("b"));//true
console.log(/b$/.test("abc"));//false
console.log(/b$/.test("acb"));//true

//◆ /^ab$/ ： 以 a 开头 + 以 b 结尾的字符 
console.log(/^ab$/.test("ab"));//true
console.log(/^ab$/.test("acb"));//false

//◆ /^a\db$/ : 以 a 开头 + 任意数字 + 以 b 结尾的字符
console.log(/^a\db$/.test("ab"));//false
console.log(/^a\db$/.test("a1b"));//true
console.log(/^a\db$/.test("a123b"));//false
console.log(/^a\db$/.test("a1c23b"));//false

3、\b 单词边界

//◆将单词 is 替换成 XX
console.log("this is a girl".replace(/\bis/, "XX"))// this XX a girl

4、\B 非单词边界

//◆将非单词 is 替换成 XX
console.log("this is a girl".replace(/\Bis/, "XX"))// thXX is a girl

七、量词

需求：匹配一个连续出现10次数字的字符

法1：正则表达式 /\d\d\d\d\d\d\d\d\d\d/

console.log(/\d\d\d\d\d\d\d\d\d\d/.test("1234567abc"));//false
console.log(/\d\d\d\d\d\d\d\d\d\d/.test("1234567890abc"));//true

弊端：表达式冗余
解决方案：使用量词

法2：量词，表示字符出现的数量

量词含义
？出现零次或一次（最多出现一次）
+出现一次或多次（至少出现一次）
*出现零次或多次（任意次）
{n}出现n次
{n,m}出现n-m次
{n,}出现至少n次（>=n）
console.log(/\d{10}/.test("1234567abc"));//false
console.log(/\d{10}/.test("1234567890abc"));//true

八、分组

  • ( ) 这个元字符有三个含义
    • 分组：使量词作用于分组
      • 量词只能作用于一个字符，如果想作用与多个字符，就要使用分组（将多个字符当成一组）
    • 提升优先级：通常与元字符 | 一起使用
    • 反向引用
  • | 代表 或：默认作用于两边的所有字符，如果只想作用于指定字符，则可以使用()来提升优先级 示例如下：

需求1： 匹配连续出现三次 wan 的字符串

//◆错误写法:  /wan{3}/  , 含义： wa + n{3}
console.log(/wan{3}/.test("wanwanwan"));//false
console.log(/wan{3}/.test("wannn"));//true
console.log(/wan{3}/.test("wannnnabc"));//true

//◆正确做法：使用分组   /(wan){3}/
console.log(/(wan){3}/.test("wanwanwan"));//true
console.log(/(wan){3}/.test("wannn"));//false

需求2：匹配 wan 或者 win

//◆错误写法:  /wa|in/  ,含义：  wa  或者  in
console.log("wan".replace(/wa|in/, "X"));// Xn
console.log("win".replace(/wa|in/, "X"));// wX

//◆正确写法： /w(a|i)n/, 含义：匹配 wan 或者 win
console.log("wan".replace(/w(a|i)n/, "X"));// X
console.log("win".replace(/w(a|i)n/, "X"));// X

九、修饰符

修饰符： 影响整个正则规则的特殊符号

修饰符含义
i（intensity）大小写不敏感（不区分大小写）
g（global）全局匹配
m（multiple）检测换行符，使用较少，主要影响字符串的开始^与结束$边界

书写位置： /pattern/modifiers(修饰符)

示例如下：

// i：不区分大小写
let str1 = 'ACabaacd';
console.log(str1.replace(/a/, "X"));//ACXbaacd    
console.log(str1.replace(/a/i, "X"));//XCabaacd  

// g：全局匹配
let str2 = 'ABCabaef';
console.log(str2.replace(/a/, "X"));//ABCXbaef 
console.log(str2.replace(/a/g, "X"));//ABCXbXef 

// ig：既不区分大小写，又全局匹配(修饰符可以同时使用多个)
let str3 = 'ADCcafaa'
console.log(str3.replace(/a/ig, "X"));//XDCcXfXX

// m：检测换行符(主要针对边界 ^ 与 $ )
//需求：将下列字符串中每一行开头的字符变成0
var str4 = "aascdas\nwebdfbd\ngcsdfcw";

//◆虽然在控制台看到三行字符串，实际上代码中每一行只是一个换行符 \n
console.log(str4);
// aascdas
// webdfbd
// gcsdfcw

//◆错误：只能替换第一个字符
console.log(str4.replace(/^\w/g, "0"));
// 0ascdas
// webdfbd
// gcsdfcw

//◆正确：能替换每一行第一个字符，m 能检测换行符把 \n 后面的字符作为单独一行
console.log(str4.replace(/^\w/gm, "0"));
// 0ascdas
// 0ebdfbd
// 0csdfcw

结语

说了这么多，最后推荐一个好用的浏览器插件。不用记正则啦！！！！！！

image.png

avatar
文章
阅读
粉丝