js之正则表达式使用 正则的方法

1.正则表达式组成

正则表达式是由普通字符（例如字符 a 到 z）以及特殊字符（称为元字符）组成的文字模式。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配

即：

正则表达式 = 普通字符 + 特殊字符

2.匹配符

字符匹配符用于匹配某个或某些字符

2.1 字符簇

在正则表达式中，通过一对方括号括起来的内容，我们就称之为“字符簇”，其表示的是一个范围，但是实际匹配时，只能匹配固定的某个字符。

注意：
字符簇是匹配范围内的某一个字符

2.1.1 字符簇 <==> 匹配内容

字符簇	代表意义
[a-z]	匹配小写字母从a-z中的任一字符
[A-Z]	匹配大写字母从A-Z中的任一字符
[0-9]	匹配数字从0-9任一字符
[0-9a-z]	匹配数字从0-9或小写字母从a-z任一字符
[0-9a-zA-Z]	匹配数字从0-9，小写字母从a-z或者是大写字母从A-Z的任一字符
[0-9a-zA-Z_]	匹配包括下划线的任何单词字符

2.1.2 特殊符号 ^ ( 内容取反 )

在字符簇中存在一个特殊符号 ^（脱字节），脱字节在字符簇代表取反的含义

字符簇	代表意义
[^a-z]	匹配除小写字母从a-z以外的任一字符
[^0-9]	匹配除数字从0-9以外的任一字符
[^abcd]	匹配除abcd以外的任一字符

2.1.3 特殊字符

在正则表达式中还有一类特殊字符:

特殊字符	对应字符簇
\d	匹配一个数字字符，用字符簇表示[0-9]
\D	匹配一个非数字字符，也可以使用字符簇[0-9]或[^\d]来表示
\w	匹配包括下划线的任何单词字符，用字符簇[0-9a-zA-Z_]
\W	匹配任何非单词字符，[^0-9a-zA-Z_]或[^\w]
\s	匹配任何空白字符，空格、制表符、换行符都可以通过\s匹配
\S	匹配任何非空白字符，[^\s]
.	匹配除 " \n " 之外的任何单个字符

如：

//匹配cd的任一字符
var str = 'abcdefg'
var reg = /[cd]/gi
console.log(str.match(reg))   //["c", "d"]

//匹配任何任何单词字符
var str = 'abcfefg_$@'
var reg = /\w/gi
console.log(str.match(reg)) //["a", "b", "c", "f", "e", "f", "g", "_"]

//匹配符号 @
var str = 'abcfefg_$@123'
var reg = /@/gi
console.log(str.match(reg))  //["@"]

//匹配所有空白字符 
var str = 'abcfef g_$@'
var reg = /\s/gi
console.log(str.match(reg))   //[" "]

3.限定符

限定符可以指定正则表达式的一个给定组件必须要出现多少次才能满足匹配。

*：匹配前面的子表达式零次或多次，0到多，可以使用{0,}代替

+：匹配前面的子表达式一次或多次，1到多，可以使用{1,}代替

?：匹配前面的子表达式零次或一次，0或1，可以使用{0,1}代替

{n}：匹配确定的 n 次，如{18}，连续匹配18次

{n,}：至少匹配n 次，如{1,}，代表最少匹配1次

{n,m}：最少匹配 n 次且最多匹配 m 次，如{1,7}代表最少匹配1最多匹配7次

示例：

//匹配 连续4位数字
var str = 'z1234xc12345v'
var reg = /\d{4}/gi
console.log(str.match(reg))  //["1234", "1234"]

//匹配 至少连续2位 数字
var str = 'z12xc123v'
var reg = /\d{2,}/gi
console.log(str.match(reg))  //["12", "123"]

4.贪婪匹配 & 非贪婪匹配

能匹配多的就不匹配少的情况，就称之为“贪婪匹配原则”

能匹配少的就不匹配多的，“非贪婪匹配原则”
在正则表达式我们也可以在限定符的后面添加一个问号（？）

{3,5}? // 原来是默认贪婪匹配，匹配5个；现在加了 ？ ，非贪婪匹配模式，匹配到3个即可

示例：

//匹配{2,3}  贪婪模式，即匹配最多位
var str = 'z123xc1234v'
var reg = /\d{2,3}/gi
console.log(str.match(reg)) //["123", "123"]

//匹配{2,3}  非贪婪模式，即匹配最少位
var str = 'z12xc123v'
var reg = /\d{2,3}?/gi
console.log(str.match(reg)) // ["12", "12"]

5.定位符

定位符可以将一个正则表达式固定在一行的开始或结束。也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。

“ 小括号就是括号内看成一个整体 ,中括号就是匹配括号内的其中一个”

^ ：匹配输入字符串的开始位置（以***开始）

$ ： 匹配输入字符串的结束位置（以***结束）

\b ： 匹配一个单词边界（字符串开头、结尾、空格、逗号、点号等符号）

\B ： 匹配非单词边界

示例：

//验证手机格式
var str = '15212345678'
var reg = /^1[3456789]\d{9}$/gi   
//全局匹配不区分大小写  以1开头 + 第二位是[3456789]中的一位 + 连续9位数字结束

//或者
// var reg = /^1(3|4|5|6|7|8|9)\d{9}$/gi

if(reg.test(str)){
	console.log('合理的手机号')
}else{
console.log('不合理')
}

处理边界与非边界

var str = 'hello,my name id zhangsan'
var reg = /\Ban\B/gi

//匹配 第一个an字符
console.log(str.match(reg))   //["an"]
//使用lastIndex获取最后一次匹配到的索引值
console.log(reg.lastIndex)    // 0

6.转义符

在正则表达式中，如果遇到特殊符号，我们必须要使用转义字符（反斜杠\）来进行转义

(，)，[，]，*，+，?，.，/，\，^，$
这些特殊符号均需要进行转义

示例：

//匹配 $ 符号
var str = '!@#$%^&*()-+?'
var reg = /\$/gi
console.log(str.match(reg))  //["$"]

7.选择匹配符

在正则表达式，如果要匹配的内容包含多个选择，我们可以通过|选择匹配符来进行匹配

代码示例：

//定义正则，匹配 helloVue 或者  helloReact
var str = 'helloVue,helloReact'
var reg = /hello(Vue|React)/gi
console.log(str.match(reg))   // ["helloVue", "helloReact"]

8.特殊用法

8.1 正向预查

(?=) ：正向预查

匹配结果?=匹配条件，必须满足匹配条件，才能输出匹配结果

代码示例：

//匹配后面是 NB 的超人
var str = '超人NB,超人NP'
var reg = /超人(?=NB)/gi
console.log(str.match(reg))  // ["超人"]  匹配的是后面为 NB 的超人
console.log(reg.lastIndex)   //  0

8.2 负向预查

(?!) ：负向预查

代码示例：

//匹配后面不是 NB 的超人
var str = '超人NB,超人NP'
var reg = /超人(?!NB)/gi
console.log(str.match(reg))  // ["超人"]  匹配的是后面不为 NB 的超人
console.log(reg.lastIndex)   //  0

8.3 输出内容，但不捕获

（?: ） ：输出内容，但不捕获
代码示例：

//匹配 helloVue 或 helloReact
var str = 'helloVue,helloReact'
var reg = /hello(?:Vue|React)/gi   
var row;
while(row = reg.exec(str)){
document.write(row+'<hr>')
}
//

9.正则常用的方法

转载 mengxiaohuan314

推荐看这篇csdn，很详细 → 只争朝夕

test()，exec() ， match() ， replace()

9.1 test()

验证字符串是否和正则相匹配

用法：regexp.test(string)

结果：若匹配返回true，若不匹配返回false

9.2 exec()

将字符串中匹配的内容捕获出来，只会捕获一次

用法：regexp.exec(string)

返回值：是一个数组，若无分组则数组里的内容包含三项，分别是匹配的内容、匹配内容的起始索引、原字符串

exec()处理分组
返回值：

• 第一项是匹配的内容
• 第二项开始是分组（括号里匹配）的内容，有几个分组就有几项
• 倒数第二项是匹配内容的起始索引
• 倒数第一项是原字符串

注意：若不需要捕获分布的内容，则在不需要捕获分组的里面加上原字符 ?:（匹配不捕获）

var str = "2019ceshi2020";
 
var reg = /\d\w/;
console.log(reg.exec(str));  //["20", index: 0, input: "2019ceshi2020", groups: undefined]
 
var reg = /(\d)(\w)/;
console.log(reg.exec(str));  //["20", "2", "0", index: 0, input: "2019ceshi2020", groups: undefined]
 
var reg = /(?:\d)(?:\w)/;
console.log(reg.exec(str));   //["20", index: 0, input: "2019ceshi2020", groups: undefined] 

9.3 match()

将字符串中匹配的内容捕获出来

用法：string.match(regexp)

若加上量词g则一次性捕获所有匹配的内容放到数组里返回，若不加则与exec()的返回值一样

9.4 replace()

将字符串中匹配的内容捕获出来

用法：string.replace(值类型 | regexp, 值类型 | 回调函数)

该方法不改变原有字符串

经典例题：

//大写数字替换小写数字
var str = "38576";
var a = ["零","壹","贰","叁","肆","伍","陆","柒","捌","玖"];
str = str.replace(/\d/g, function () {
    return a[arguments[0]];
});
console.log(str);//叁捌伍柒陆 

//排除法
//获取地址栏中的参数并放入对象中
var str = "http://www.baidu.com?id=557131028857&name=ceshi&age=8";
var reg = /([^?=&]+)=([^?=&]+)/g;
var obj = {};
str.replace(reg, function ($0, $1, $2) {
    obj[$1] = $2;
});
console.log(obj);//{id: "557131028857", name: "ceshi", age: "8"} 

//去掉html标签
var str="<div id='div1' class='aa'>皇帝被废，太后痛哭流涕，</div><p>皇室威严扫地，群臣无不悲愤。</p>";
var reg = /<[^<>]+>/g;
str = str.replace(reg,"");
console.log(str);//皇帝被废，太后痛哭流涕，皇室威严扫地，群臣无不悲愤。