正则表达式

最新推荐文章于 2023-05-25 16:30:00 发布

编程爱好者ph

最新推荐文章于 2023-05-25 16:30:00 发布

阅读量492

点赞数

分类专栏：前端文章标签：正则表达式前端后端

本文链接：https://blog.csdn.net/qq_33193871/article/details/121289022

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

大纲

1.正则表达式基础
1.1 正则表达式概述
1.2 正则表达式基本语法
1.3 正则表达式常见用法
2.正则表达式进阶
2.1 修饰符
2.2 检索模式
2.3 RegExp对象
3.正则表达式高级
3.1 检索模式的^和$字符
3.2 重复类
3.3 贪婪模式、懒惰模式
3.4 脱字符[^]

1.正则表达式基础

1.1 正则表达式概述

正则表达式概念：
正则表达式(英文regular Expression)是一种[字符串检索模式]，正则表达式具体表现为一个字符串的样子。
正则表达式执行原理是：
通过[参数字符串]设置检索规则，在[指定字符串]中检索符合规则的字符串。
正则表达式的作用是：
可以用来进行文本搜索和文本替换。

1.2 正则表达式的基本语法

语法：/正则表达式主体/修饰符(可选)
例如：var frk_reg=/beixi/i;

其中：

/beixi/i是一个正则表达式
beixi是这个正则表达式的主体，表示想要检索的内容是beixi
i是一个正则表达式的修饰符，表示检索内容时不区分大小写

1.3 正则表达式常见用法

正则表达式在实际开发中一般不会单独使用，而是会配合一些方法来完成某种功能。
因为正则表达式的作用是对字符串进行操作，所以一般在实际开发中正则表达式会配合字符串的search、replace和match方法来使用。

search方法：用于检索与正则表达式相匹配的子字符串，并返回子字符串的起始位置。

var str='hello world!HELLO WORLD';
var index = str.search(/World/i);
console.log(index); //6

replace方法：用于在指定字符串中用一个字符串替换一个与正则表达式相匹配的子字符串。

 var str='hello world!HELLO WORLD';
  var newStr = str.replace(/World/i,'code');
  console.log(newStr); //hello code!HELLO WORLD

match方法：match能够匹配，符合参数规则的字符串第一次出现的信息

 var str='hello world!HELLO WORLD';
  var info = str.match(/World/i);
  console.log(info);

2.正则表达式进阶

2.1 修饰符

修饰符是正则表达式进行字符串检索时[检索规则]的制定者之一。
修饰符规定了正则应按照何种方式进行检索。
常见的修饰符类型有三种：i、g、m

i修饰符，表示正则检索内容时不区分大小写。
例如：

var str='hello WORLD!HELLO WORLD';
var newStr = str.search(/world/i);
console.log(newStr); //6

g修饰符，表示正则检索内容时采用全局匹配，而不是找到第一个就停止。
例如：

var str='hello WORLD!HELLO WORLD';
var newStr = str.replace(/hello/ig,'good');
console.log(newStr); //good WORLD!good WORLD

m修饰符，表示匹配换行符两端的潜在匹配，对正则中的^$符号会有影响(不常用)。

2.2 检索模式

正则表达式的检索模式，用于指定正则采用何种方式进行内容的检索。
常见的检索模式有表达式模式、元字符模式和量词模式三种。
他们并不互相独立而是相辅相成的关系，就像修饰符可以多个一起使用一样。

2.2.1 表达式模式

正则表达式的书写方式是通过表达式编写的模式称为表达式模式。
常见的表达式模式有以下三种：

[abc]
[0-9]
(m|n)
每一种模式中的内容都是表示一类值，而不是字面的含义。
一个方括号代表一个字符。

[abc]：在指定字符串中检索，查找任何满足[存在于方括号中]规则的字符或字符串。
例如：

在str中替换所有：只要满足[a、b当中之一]的字符为(frank)。

var str='123abc123ABC';
var newStr = str.replace(/[abc]/ig,'(frank)');
console.log(newStr); //123(frank)(frank)(frank)123(frank)(frank)(frank)

正则不只能替换英文，对于中文正则仍然生效

var str='你好，弗兰克！再见，弗兰克';
var newStr = str.replace(/[弗兰克]/ig,'(frank)');
console.log(newStr); //你好，(frank)(frank)(frank)！再见，(frank)(frank)(frank)

正则匹配字符串时采用多个方括号即可整体替换

var str='你好，弗兰克！再见，弗兰克';
var newStr = str.replace(/[弗][兰][克]/ig,'(frank)');
console.log(newStr); //你好，(frank)！再见，(frank)

组合匹配：[12][ab]第一个字符为1或2，第二个字符为a或b方可替换

var str='12ab12AB';
var newStr = str.replace(/[12][ab]/ig,'(frank)');
console.log(newStr); //1(frank)b1(frank)B

[0-9]：在指定字符串中检索，查找任何满足[0至9之间]规则的字符或字符串。该模式对字母也适用。
例如：

在str中替换所有:[任意是0-9之间之一]的字符为(frank)

var str='123abc123ABC';
var newStr = str.replace(/[0-9]/ig,'(frank)');
console.log(newStr); //(frank)(frank)(frank)abc(frank)(frank)(frank)ABC

在str中替换所有:[任意是a-z之间之一]的字符为(frank)

var str='123abc123ABC';
var newStr = str.replace(/[a-z]/g,'(frank)');
console.log(newStr); //123(frank)(frank)(frank)123ABC

在str中替换所有:[任意是A-Z之间之一]的字符为(frank)

var str='123abc123ABC';
var newStr = str.replace(/[A-Z]/g,'(frank)');
console.log(newStr); //123abc123(frank)(frank)(frank)

在str中替换所有:[任意是A-Z或a-z之间之一]的字符为(frank)

var str='123abc123ABC';
var newStr = str.replace(/[A-Za-z]/g,'(frank)');
console.log(newStr); //123(frank)(frank)(frank)123(frank)(frank)(frank)

在str中替换所有:[任意是A-Z或a-z或0-9之间之一]的字符为(frank)

var str='123abc123ABC';
var newStr = str.replace(/[A-Za-z0-9]/g,'(frank)');
console.log(newStr); //(frank)(frank)(frank)(frank)(frank)(frank)(frank)(frank)(frank)(frank)(frank)(frank)

在str中替换所有：[任意是A-Z或a-z之间之一，并且是三个字符组合]的字符串为(frank)

var str='123abc123ABC';
var newStr = str.replace(/[A-Za-z][A-Za-z][A-Za-z]/g,'(frank)');
console.log(newStr); //123(frank)123(frank)

在表达式模式中，检索格式不能写成[9-0]，这种写法是错误的。

(x|y):在指定字符串中检索，查找任何满足[以|分隔的选项之一]的字符或字符串
例如：
在str中替换所有：[ab或者ABC字符串]为(frank)

var str='123abc123ABC';
var newStr = str.replace(/(ab|abc)/ig,'(frank)');
console.log(newStr); //123(frank)c123(frank)C

需要注意的是，如果使用|进行正则查找，则使用的是小括号。而不是中括号。

2.2.2 元字符模式

元字符：具有特殊含义的字符称为元字符。
通过元字符来进行正则检索的模式，称为元字符模式。
常见的元字符模式有以下三种：

\d
\s
\b
一个元字符代表一个字符

\d：在指定字符串中检索，查找任何[是数字]规则的字符或字符串

var str='123abc123ABC';
var newStr = str.replace(/\d/ig,'(frank)');
console.log(newStr); //(frank)(frank)(frank)abc(frank)(frank)(frank)ABC

var str='123abc123ABC';
var newStr = str.replace(/\d\d/ig,'(frank)');
console.log(newStr); //(frank)3abc(frank)3ABC

\s：在指定字符串中检索，查找任何[是空白]规则的字符或字符串

var str=' 123 abc 123 ABC';
var newStr = str.replace(/\s/ig,'(frank)');
console.log(newStr); //(frank)123(frank)abc(frank)123(frank)ABC

var str=' 123  abc 123 ABC';
var newStr = str.replace(/\s\s/ig,'(frank)');
console.log(newStr); // 123(frank)abc 123 ABC

\b：在指定字符串中检索，查找任何[是单词边界]规则的字符或字符串

var str=' 123 abc 123 ABC';
var newStr = str.replace(/\b/ig,'(frank)');
console.log(newStr); // (frank)123(frank) (frank)abc(frank) (frank)123(frank) (frank)ABC(frank)

2.2.3 量词模式

量词：表示要检索的字符或字符串出现的次数的词组称为量词。
如果用n表示要检索的字符或字符串，那么常见的量词模式有以下三种：

n除了是具体的字符或字符串外，还可以是表达式或者元字符

n+：在原字符串中检索任何[包含一个或多个n]的子字符串
例如：

var str = 'a1abb2ab3baab';
var newStr = str.match(/a/g);
console.log(newStr);//["a", "a", "a", "a", "a"]

var str = 'a1abb2ab3baab';
var newStr = str.match(/ab/g);
console.log(newStr);//["ab","ab","ab"]

var str = 'a1abb2ab3baab';
var newStr = str.match(/a+/g);
console.log(newStr);//["a", "a", "a", "aa"]

var str = 'a1abb2ab3baab';
var newStr = str.match(/ab+/g);
console.log(newStr);//["abb", "ab", "ab"]

n*：在原字符串中检索任何[包含0个或多个n]的子字符串
例如：

var str = 'a1abb2ab3baab';
var newStr = str.match(/a*/g);
console.log(newStr);//['a', '', 'a', '', '', '', 'a', '', '', '', 'aa', '', '']

var str = 'a1abb2ab3baab ';
var newStr = str.match(/ab*/g);
console.log(newStr);//['a', 'abb', 'ab', 'a', 'ab']

n?：在原字符串中检索任何[包含0个或1个n]的子字符串

var str = 'a1abb2ab3baab';
var newStr = str.match(/a?/g);
console.log(newStr);//['a', '', 'a', '', '', '', 'a', '', '', '', 'a', 'a', '', '']

var str = 'a1abb2ab3baab';
var newStr = str.match(/ab?/g);
console.log(newStr);//['a', 'ab', 'ab', 'a', 'ab']

2.3 RegExp对象

上面我们提到过的正则表达式的基本语法是：/正则表达式主体/修饰符(可选)，这种创建正则的方法我们称之为[字面量创建正则表达式]。
而实际上在js中已经为正则表达式提供了一个构造函数RegExp，我们可以通过这个构造函数来生成一个正则表达式的实例，而这种创建正则的方法我们称之为[构造函数创建正则表达式]。
对于通过RegExp构造函数生成的正则实例来说，我们既能够和之前使用的正则表达式一样将这个正则实例直接使用，还能够通过这个实例来调用一些RegExp所独有的方法。

语法：

var regExp = new RegExp(正则表达式内容，修饰符);

通过构造函数方式创建正则，参数均采用字符串来声明。

var regExp = new RegExp('ab','g');//【等价于正则表达式：/ab/g】
var str = '12abc12abABC';
var newStr = str.replace(regExp,'(frank)');
console.log(newStr);//12(frank)c12(frank)ABC

var regExp = new RegExp('\\dab','g');//【等价于正则表达式：/\dab/g】
var str = '12abc12abABC';
var newStr = str.replace(regExp,'(frank)');
console.log(newStr);//1(frank)c1(frank)ABC

2.3.1 RegExp对象的test()方法

本方法是RegExp对象中提供的一个方法，用来判断在[指定字符串中]是否存在[满足正则表达式规则]的子字符串。存在就返回true，反之返回false。
语法：

正则表达式.test(指定字符串);

var regExp = new RegExp('abcd','g');
console.log(regExp.test('12abc12abABC'));//false

var regExp = new RegExp('abc','g');
console.log(regExp.test('12abc12abABC'));//true

其实RegExp中提供的方法对于正则表达式都是通用的，也就意味着下面的代码也是合法的：

console.log(/abc/g.test('12abc12abABC'));//true

2.3.2 RegExp对象的exec()方法

1.本方法是RegExp对象中提供的一个方法，用来查找在[指定字符串中][第一个][满足正则表达式规则]的子字符串出现的[下标和内容]。
2.本方法的返回值是一个信息集合(对象)，但是可以当做数组一样使用。若查找失败，则返回结果为null。
语法：
正则表达式.exec(指定字符串)。
例如：

var regExp = new RegExp('abc','gi');
var result = regExp.exec('12abc12abABC');
console.log(result);//["abc", index: 2, input: "12abc12abABC"]
console.log(result[0]);//abc
console.log(result.length);//1
result = regExp.exec('12abc12abABC');
console.log(result);//["ABC", index: 9, input: "12abc12abABC"]
console.log(result.length);//1
result = regExp.exec('12abc12abABC');
console.log(result);//null

尽管我们能够像使用数组一样来使用exec方法的返回结果，但那只是针对与查找的子字符串而言，对于子字符串出现的下标位置的访问仍然需要按照属性访问来执行，
即result.index或result[‘index’]

3.RegExp正则对象中提供了一个隐式参数叫做lastIndex，这个参数用来表示下一次执行正则检索时开始的位置。这个属性是可写的。

var regExp = new RegExp('abc','gi');
var result = regExp.exec('12abc12abABC');
console.log(result);//["abc", index: 2, input: "12abc12abABC"]
result = regExp.exec('12abc12abABC');
console.log(result);//["ABC", index: 9, input: "12abc12abABC"]
regExp.lastIndex = 0;
result = regExp.exec('12abc12abABC');
console.log(result);//["abc", index: 2, input: "12abc12abABC"]

正是因为lastIndex参数，才能保证下一次检索是从上一次检索的位置继续执行。

4.当在声明正则的时候如果参数中存在小括号(小括号又称作租匹配符号)，那么返回结果的length就不为1(即不仅查找第一个)

var regExp = new RegExp('(ab)c', 'gi');
var result = regExp.exec('12abc12abABC');
console.log(result);//['abc', 'ab', index: 2, input: '12abc12abABC']
console.log(result.length);//2
result = regExp.exec('12abc12abABC');
console.log(result);//['ABC', 'AB', index: 9, input: '12abc12abABC']
console.log(result.length);//2
result = regExp.exec('12abc12abABC');
console.log(result);//null

3.正则表达式高级

3.1 检索模式的^和$字符

^初位字符：表示判断字符串以某个内容开始
$末位字符：表示判断字符串以某个内容结束

var regExp = new RegExp('^abc','gi');
var str = '12abc12abABC';
if(regExp.test(str)){
    console.log('是以abc开头');
}else{
    console.log('不是以abc开头');
}

var regExp = new RegExp('abc$','gi');
var str = '12abc12abABC';
if(regExp.test(str)){
    console.log('是以abc结束');
}else{
    console.log('不是以abc结束');
}

^abc$表示字符abc本身

3.2 重复类

重复类是正则表达式中使用{}进行检索的一种模式的称谓，{}用来匹配符合正则要求的字符连续出现的次数。

{n}:想要检索的内容恰好出现n次
{n,}:想要检索的内容至少出现n次
{n,m}:想要检索的内容至少出现n次，至多出现m次。

语法：

var regExp = new RegExp('正则表达式主体 重复类','修饰符');
var regExp = new RegExp('[a-z]{2}','g');
		//表示创建了一个【全局中检索连续出现的两个小写字母】的正则

例如：

var regExp = new RegExp('[a-z]{2}','g');
var string = '12abcabc12abccab';
console.log(string.match(regExp));//["ab", "ca", "bc", "ab", "cc", "ab"]

重复类如果不存在组匹配符号，那么重复类仅对其前面的第一个符号生效

var regExp = new RegExp('abc{2}','g'); //表示的是查找ab后面连续出现两个cc的字符串，即查找abcc
var string = '12abcabc12abccab';
console.log(string.match(regExp));//["abcc"];

var regExp = new RegExp('(abc){2}','g'); //表示的是查找ab后面连续出现两个cc的字符串，即查找abcc
var string = '12abcabc12abccab';
console.log(string.match(regExp));//['abcabc']

3.3 贪婪模式、懒惰模式

对于正则来说，贪婪与懒惰两种模式都是被固化至表达式内的两种隐形的检索模式。他们并不归属于任何一种我们之前所说的检索模式，而是在此之外隐形生效的。
贪婪模式：只要符合正则要求就一直向下匹配，直到无法再匹配为止的行为模式
懒惰模式：一旦匹配到符合正则要求的内容就立即结束的行为模式

贪婪模式的标识符：+,,{n,},{n,m}.
懒惰模式的标识符：+?,?,?,{n},{n,}?,{n,m}?;

//普通正则
var str = 'a1abb2ab3baab';
var newStr = str.match(/[a-z]/g);
console.log(newStr);//["a", "a", "b", "b", "a", "b", "b", "a", "a", "b"]

//贪婪模式
var str = 'a1abb2ab3baab';
var newStr = str.match(/[a-z]*/g);
console.log(newStr);//["a", "", "abb", "", "ab", "", "baab", ""]

//懒惰模式
var str = 'a1abb2ab3baab';
var newStr = str.match(/[a-z]?/g);
console.log(newStr);//["a", "", "a", "b", "b", "", "a", "b", "", "b", "a", "a", "b", ""]

所谓贪婪模式就是令匹配结果尽可能的长，直到不满足为止。而懒惰模式则是令匹配结果尽可能的短，匹配到就结束

var regExp = /8[a-zA-Z0-9]*7/
var string = 'abc8defghij7klngon8qrstwxy7';
var result = string.match(regExp);
console.log(result);  //['8defghij7klngon8qrstwxy7', index: 3, input: 'abc8defghij7klngon8qrstwxy7', groups: undefined]

var regExp = /8[a-zA-Z0-9]*?7/
var string = 'abc8defghij7klngon8qrstwxy7';
var result = string.match(regExp);
console.log(result);  //['8defghij7', index: 3, input: 'abc8defghij7klngon8qrstwxy7', groups: undefined]

3.4 脱字符

脱字符是正则中^{符号的一种特殊表达方式，表示[不是…]的意思。当且仅当}符号出现在中括号的首位时，我们称^符号位脱字符。

如果不写在中括号中表示初位字符
如果写在中括号中却没写在首位，则表示普通字符

var regExp = new RegExp('[^abc]','gi');
//表示出现不是abc中的任意一个就符合该正则
var string = '12abcabc12abccab';
var result = string.match(regExp);
console.log(result);//["1", "2", "1", "2"]

var regExp = new RegExp('[^abc]{2}','gi');
//表示连续两个出现的字符【不是abc中的任意一个】就符合该正则
var string = '12^abcabc12^abccab';
var result = string.match(regExp);
console.log(result);//["12", "12"]

var test="<img width='200px;'/><img width='300px;'/><img width='400px;'/>";
var regExp = /<img[^>]*\/>/gi //声明<img和/>之间的字符只要不是>就继续判断。
var result = test.match(regExp);
console.log(result);//["<img width='200px;'/>", "<img width='300px;'/>", "<img width='400px;'/>"]

脱字符[^]可以匹配所有的字符

var regExp = new RegExp('a[^]*b','gi');
var string = '12abcabc12abccba';
var result = string.match(regExp);
console.log(result);//["abcabc12abccb"]

编程爱好者ph

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正则表达式

大纲1.正则表达式基础1.1 正则表达式概述1.2 正则表达式基本语法1.3 正则表达式常见用法2.正则表达式进阶2.1 修饰符2.2 检索模式2.3 RegExp对象3.正则表达式高级3.1 检索模式的^和$字符3.2 重复类3.3 贪婪模式、懒惰模式3.4 脱字符[^]1.正则表达式基础1.1 正则表达式概述正则表达式概念：正则表达式(英文regular Expression)是一种[字符串检索模式]，正则表达式具体表现为一个字符串的样子。正则表达式执行原理是：通
复制链接

扫一扫

专栏目录