正则表达式(手把手教学）

zYaung

于 2023-11-07 15:00:09 发布

阅读量486

点赞数

文章标签： javascript 正则表达式

本文链接：https://blog.csdn.net/qq_46545346/article/details/134267492

版权

1. 什么是正则表达式

2. 创建正则表达式

3. 测试正则表达式
4. 常见的匹配规则
5. 匹配模式
6. 正则应用举例

一．什么是正则表达式

通俗的说就是验证字符串格式的一种表达式

正则表达式(regular expression)是一个描述字符模式的对象。ECMAScript的RegExp类表示正则表达式，而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。

正则表达式主要用来验证客户端的输入数据。用户填写完表单单击按钮之后，表单就会被发送到服务器，在服务器端通常其进行进一步处理。因为客户端验证，可以节约大量的服务器端的系统资源，并且提供更好的用户体验。

二．创建正则表达式

创建正则表达式和创建字符串类似，创建正则表达式提供了两种方法，一种是采用new运算符，另一个是采用字面量方式。

两种创建方式

+ 方式一

var box = new RegExp('abc'); //第一个参数字符串,包含

+ 方式2

var regx=/abc/;

var regx=/\d+/;

三、测试正则表达式

RegExp对象包含两个方法：test()和exec()，功能基本相似，用于测试字符串匹配。test()方法在字符串中查找是否存在指定的正则表达式并返回布尔值，如果存在则返回true，不存在则返回false。exec()方法也用于在字符串中查找指定正则表达式，如果exec()方法执行成功，则返回包含该查找字符串的相关信息数组。如果执行失败，则返回null。

以下两个方法都是正则表达式对象的方法

| 方法 | 功能 |
| ------- | --------------------------------------- |
| test | 在字符串中测试模式匹配，返回true或false |
| exec | 在字符串中执行匹配搜索，返回结果数组 |

1. exec(str)，返回str中与表达式相匹配的第一个字符串,则返回包含该查找字符串的相关信息数组

//实例一
var regx=/\d+/;
var rs=regx.exec(“3432ddf53”);
//返回的rs值为：{3432}
var regx=/ab(\d+)c/;
var str=regx.exec("ab234c44");
返回的rs值为：{ab234c,234}

另外，如果有多个合适的匹配，则第一次执行exec返回一个第一个匹配，此时继续执行exec，则依次返回第二个第三个匹配。例如：

var regx=/user\d/g;
var rs=regx.exec("ddduser1dsfuser2dd");
var rs1=regx.exec("ddduser1dsfuser2dd");
console.log(rs)
console.log(rs1)
// 则rs的值为{user1}，rs的值为{rs2}，

2. test:test(str)，判断字符串str是否匹配表达式，返回一个布尔值。

例如：
var regx=/user\d+/;
var flag=regx.test(“user12dd”);
flag的值为true。

3. 字符串的正则表达式方法

除了test()和exec()方法，String对象也提供了4个使用正则表达式的方法。

String对象中的正则表达式方法

| 方法 | 含义 |
| ------------------------------ | --------------------------------- |
| match(pattern) | 返回pattern中的子串或null |
| replace(pattern, replacement) | 用replacement替换pattern |
| search(pattern) | 返回字符串中pattern开始位置 |
| split(pattern) | 返回字符串按指定pattern拆分的数组 |

+ *使用match方法获取获取匹配数组*/

```js
var regx=/user\d/;
var str=“user13userddduser345”;
var rs=str.match(regx);
//rs的值为：{user1}
```

+ *使用search来查找匹配数据*

```js
var regx=/user\d/;
var str="userddduser345";
var rs=str.search(regx);
console.log(rs);//7 查找到的位置
```

+ 使用replace替换数据

```js
var regx=/user\d+/;
var str="userddduser345";
var rs=str.replace(regx,"00");
console.log(rs);
```

+ *使用split拆分成字符串数组*

```js
var regx=/user\d/;
var str="user13userddduser345";
var rs=str.split(regx)
console.log(rs);// [ "", "3userddd", "45" ]
```

四、常见的匹配规则

1. 字符类：单个字符和数字

| 元字符/元符号 | 匹配情况 |
| ------------- | ---------------------------------- |
| . | 匹配除换行符外的任意字符 |
| [a-z0-9] | 匹配括号中的字符集中的任意字符 |
| [^a-z0-9] | 匹配任意不在括号中的字符集中的字符 |
| \d | 匹配数字 |
| \D | 匹配非数字 |
| \w | 匹配字母和数字及_ |
| \W | 匹配非字母和数字及_ |

使用点元字符*

var pattern = /g..gle/; //.匹配一个任意字符
var str = 'google';
alert(pattern.test(str));

2. 字符类：空白字符

| 元字符/元符号 | 匹配情况 |
| ------------- | ---------------------------------- |
| \s | 匹配空白字符、空格、制表符和换行符 |
| \S | 匹配非空白字符 |

```js
var pattern = /g\s\Sle/;
var str = 'g le';

alert(pattern.test(str));

3. 字符类：

都加上：相当于字符串整体要和正则表达式匹配

| 表达式 | 作用 |
| ------ | -------------------------------------- |
| ^ | 与字符串开始的地方匹配，不匹配任何字符 |
| $ | 与字符串结束的地方匹配，不匹配任何字符 |

```js
var pattern = /^aaa/;
var str = 'xxxxxxxaaa';
alert(pattern.test(str));//false
var pattern = /aaa$/;
var str = 'xxxxxxxaaa';
alert(pattern.test(str));//true

4. 字符类：重复字符

| 表达式 | 作用 |
| ------ | ------------------------------------------------------------ |
| {n} | 表达式重复n次，比如：a{5}相当于"aaaaa" |
| {m,n} | 表达式至少重复m次，最多重复n次，比如：["ba{1,3}"](http://www.regexlab.com/zh/workshop.asp?pat=ba{1,3}&txt=a,baaa,baa,b,ba)[可以匹配 ](http://www.regexlab.com/zh/workshop.asp?pat=ba{1,3}&txt=a,baaa,baa,b,ba)["ba"](http://www.regexlab.com/zh/workshop.asp?pat=ba{1,3}&txt=a,baaa,baa,b,ba)[或](http://www.regexlab.com/zh/workshop.asp?pat=ba{1,3}&txt=a,baaa,baa,b,ba)["baa"](http://www.regexlab.com/zh/workshop.asp?pat=ba{1,3}&txt=a,baaa,baa,b,ba)[或](http://www.regexlab.com/zh/workshop.asp?pat=ba{1,3}&txt=a,baaa,baa,b,ba)["baaa"](http://www.regexlab.com/zh/workshop.asp?pat=ba{1,3}&txt=a,baaa,baa,b,ba) |
| {m,} | 表达式至少重复m次，比如：["/w\d{2,}"]["a12","_456","M12344"... |
| ? | 匹配表达式0次或者1次，相当于 {0,1}，比如：["a[cd\]?"](http://www.regexlab.com/zh/workshop.asp?pat=a[cd]?&txt=a,c,d,ac,ad)[可以匹配 ](http://www.regexlab.com/zh/workshop.asp?pat=a[cd]?&txt=a,c,d,ac,ad)["a","ac","ad"](http://www.regexlab.com/zh/workshop.asp?pat=a[cd]?&txt=a,c,d,ac,ad) |
| + | 表达式至少出现1次，相当于 {1,}，比如：["](http://www.regexlab.com/zh/workshop.asp?pat=a+b&txt=a,b,ab,aab,aaab)[a+b](http://www.regexlab.com/zh/workshop.asp?pat=a+b&txt=a,b,ab,aab,aaab)["](http://www.regexlab.com/zh/workshop.asp?pat=a+b&txt=a,b,ab,aab,aaab)[可以匹配 ](http://www.regexlab.com/zh/workshop.asp?pat=a+b&txt=a,b,ab,aab,aaab)["](http://www.regexlab.com/zh/workshop.asp?pat=a+b&txt=a,b,ab,aab,aaab)[ab","aab","aaab](http://www.regexlab.com/zh/workshop.asp?pat=a+b&txt=a,b,ab,aab,aaab)["...](http://www.regexlab.com/zh/workshop.asp?pat=a+b&txt=a,b,ab,aab,aaab) |
| * | 表达式不出现或出现任意次，相当于 {0,}，比如：["/^*b"](http://www.regexlab.com/zh/workshop.asp?pat=\^*b&txt=^,b,^^^b,^^^^^^^b)[可以匹配 ](http://www.regexlab.com/zh/workshop.asp?pat=\^*b&txt=^,b,^^^b,^^^^^^^b)["](http://www.regexlab.com/zh/workshop.asp?pat=\^*b&txt=^,b,^^^b,^^^^^^^b)[b","^^^b](http://www.regexlab.com/zh/workshop.asp?pat=\^*b&txt=^,b,^^^b,^^^^^^^b)["...](http://www.regexlab.com/zh/workshop.asp?pat=\^*b&txt=^,b,^^^b,^^^^^^^b) |

```js
var pattern = /\d+\.?\d*/;
var str = 'It costs $12.5';

alert(pattern.test(str));
```

5. 分组匹配

| 表达式 | 作用 |
| ------ | ------------------------------------------------------------ |
| \| | 左右两边表达式之间 "或" 关系，匹配左边或者右边 |
| ( ) | (1). 在被修饰匹配次数的时候，括号中的表达式可以作为整体被修饰 (2). 取匹配结果的时候，括号中的表达式匹配到的内容可以被单独得到 |

```js
var pattern = /google|baidu|bing/; //匹配三种其中一种字符串
var str = 'google';
alert(pattern.test(str));
```

*使用分组模式匹配*/

```js
var pattern = /(google){4,8}/; //匹配分组里的字符串4-8次

var str = 'googlegoogle';

alert(pattern.test(str));

var pattern = /8(.*)8/; //获取8..8之间的任意字符

var str = 'This is 8google8';

str.match(pattern);

alert(RegExp.$1); //得到第一个分组里的字符串内容



var pattern = /8(.*)8/;

var str = 'This is 8google8';

var result = str.replace(pattern,'$1'); //得到替换的字符串输出

document.write(result); //This is google
```

6. 贪婪匹配和非贪婪匹配

| 贪婪 | 惰性 |
| ------- | ------- |
| + | +? |
| ? | ?? |
| * | *? |
| {n} | {n}? |
| {n,} | {n,}? |
| {n,m} | {n,m}? |

```js
var pattern = /[a-z]*/; //?号关闭了贪婪匹配，只替换了第一个
var str = 'abcdefjhijklmnopqrstuvwxyz';
var result =pattern.exec(str);
alert(result);//abcdefjhijklmnopqrstuvwxyz

var pattern = /[a-z]*?/; //?号关闭了贪婪匹配，只替换了第一个
var str = 'abcdefjhijklmnopqrstuvwxyz';
var result =pattern.exec(str);
alert(result);//一个都没有返回

var pattern = /[a-z]+/; //?号关闭了贪婪匹配，只替换了第一个
var str = 'abcdefjhijklmnopqrstuvwxyz';
var result =pattern.exec(str);
alert(result);//abcdefjhijklmnopqrstuvwxyz

var pattern = /[a-z]+?/; //?号关闭了贪婪匹配，只替换了第一个
var str = 'abcdefjhijklmnopqrstuvwxyz';
var result =pattern.exec(str);
alert(result);//a
```

7. 匹配模式

用来扩展表达式的含义，目前主要有三个参数：
g：代表可以进行全局匹配。

```js
var regx=/user\d/g;
var str="user13userddduser345";
var rs=str.match(regx);
console.log(rs);//Array [ "user1", "user3" ]
```

i：代表不区分大小写匹配。

```js
var regx=/user\d/gi;
var str="User13userddduser345";
var rs=str.match(regx);
console.log(rs);//Array [ "user1", "user3" ]
```

m：代表可以进行多行匹配。

主要作用：行末行首的内容匹配

**实例代码:**
实例一:

```js
var str="This is an\n antzone good";
var reg=/an$/;
console.log(reg.exec(str));
```

以上代码不能够匹配字符串"an"，尽管"an"后面已经换行了，但是并没有采用多行匹配，所以不是字符串行的结尾。

实例二:

```js
var str="This is an\n antzone good";
var reg=/an$/m;
console.log(reg.exec(str));
```

以上代码可以匹配字符串"an"，因为采用了多行匹配。

实例三：

```js
var reg = /^b/;
var str = 'test\nbbs';
console.log(reg.exec(str));
```

匹配失败，因为字符串的开头没有b字符。但是加上m修饰符之后：

实例四：

```js
var reg = /^b/m;
var str = 'test\nbbs';
console.log(reg.exec(str));
```

匹配到b，因为加了m修饰符之后，^已经表示行首，由于bbs在字符串第二行的行首，所以可以成功地匹配。

五．常用的正则

1. 检查邮政编码

```js
var pattern = /^[1-9][0-9]{5}$/; //共6位数字，第一位不能为0
var str = '224000';
alert(pattern.test(str));
```

2.检查文件压缩包

```js
var pattern = /[\w]+\.zip$|rar$|gz$/; //\w表示所有数字和字母加下划线

var str = '123.zip'; //\.表示匹配.，后面是一个选择

alert(pattern.test(str));
```

3.删除多余空格

```js
var pattern = /\s/g; //g必须全局，才能全部匹配
var str = '111 222 333'
var result = str.replace(pattern,''); //把空格匹配成无空格
alert(result);

```

4.删除首尾空格

```js
var pattern = /^\s+/; //强制首
var str = ' goo gle ';
var result = str.replace(pattern, '');
pattern = /\s+$/; //强制尾
result = result.replace(pattern, '');
alert(result)
```

5. 限制用户名是2-4个汉字

```js
function checkForm(username){

var regx=/^[\u4e00-\u9fa5]{2,4}$/
if(!regx.test(username)){
alert("Invalid username!");
return false;
}
return true;
}
console.log(checkForm("张三"));
```

6. 将一个字符串中的一对html标记去掉

```js
    function toPlainText(htmlStr){
        var regx=/<[^>]*>|<\/[^>]*>/gm;
var regx=/<\w+>|<\/\w+>/gm;
        var str=htmlStr.replace(regx,"");
        return str;
}

        console.log(toPlainText("<html>123</html>

zYaung

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
正则表达式(手把手教学）

通俗的说就是验证字符串格式的一种表达式正则表达式(regular expression)是一个描述字符模式的对象。ECMAScript的RegExp类表示正则表达式，而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。正则表达式主要用来验证客户端的输入数据。用户填写完表单单击按钮之后，表单就会被发送到服务器，在服务器端通常其进行进一步处理。因为客户端验证，可以节约大量的服务器端的系统资源，并且提供更好的用户体验。
复制链接

扫一扫