js学习正则表达式应用总结

最新推荐文章于 2022-03-28 20:29:11 发布

曾皙

最新推荐文章于 2022-03-28 20:29:11 发布

阅读量282

点赞数 2

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/qq_39148344/article/details/86078325

版权

javascript 专栏收录该内容

63 篇文章 4 订阅

订阅专栏

距离第一次看js正则表达式有快2年一直到现在看了部知道多少遍了，今天下定决心吧他整理一遍

这里我要说明一下我对一些重要的东西的进行了总结一些很基础的W3C中有我就么有写了，如果文章中有错欢迎联系

定义正则：

 1 var re = new RegExp(“a”);  //RegExp对象。参数就是我们想要制定的规则。有一种情况必须用这种方式，下面会提到。
 2 var re = /a/;   // 简写方法 推荐使用 性能更好  不能为空 不然以为是注释 ，

正则的常用方法

1 test() :在字符串中查找符合正则的内容，若查找到返回true,反之返回false.

用法：正则.test(字符串)

var str = '1111111111111';
var str2 = 'A111111111111';
var reg = /\D/; //这个是自动的全局匹配
var a = reg.test(str);//false
var b = reg.test(str2);//true只有存在一个就可以了
console.log(a);
console.log(b);

2 exec()方法 :搜索符合规则的内容，并返回内容，格式为数组

用法：正则.exec(字符串)

当匹配一次的时候

 var testStr = "now test001 test002";   
 var re = /test(\d+)/; //只匹配一次     
 var r = "";   
 var r = re.exec(testStr)
 var r2 = re.exec(testStr)

 console.log(r);//["test001", "001", index: 4, input: "now test001 test002"]         
 console.log(r2); //["test001", "001", index: 4, input: "now test001 test002"]

test001：匹配项

001：子表达式也就是用括号括起来的（\d+）具体的下面在分析

index:4开始的位置

input：代表每次匹配成功的那条字符串

当匹配全局g的时候

var testStr = "now test001 test002";
var re = /test(\d+)/g; //只匹配一次     
var r = "";
var r = re.exec(testStr)
var r2 = re.exec(testStr)
console.log(r); //["test001", "001", index: 4, input: "now test001 test002"]
console.log(r2); //["test002", "002", index: 12, input: "now test001 test002"]

可以看出来虽然他是全局匹配但还是一个一个的匹配输出出来（r，r1）他们并不是一下吧返回结果和子表达式一下全部显示出来而是一次一次跟的光标的移动：例如第一个匹配前光标移到了4(index),当第2次匹配前的时候光标到了12的位置

3 match() 在字符串中搜索复合规则的内容，搜索成功就返回内容，格式为数组，失败就返回null。
用法：字符串.match(正则)
如果大家有对正则有一些了解就知道match()与exec()很相似但是他们还是有一些细微的区别

1.他们一个是字符串的方法match一个是正则的方法exec

2.当不是全局的时候

var testStr = "now test001 test002";
var re = /test(\d+)/; //只匹配一次     
var r = "";
var r = testStr.match(re);
var r2 = re.exec(testStr)		
console.log(r); //["test001", "001", index: 4, input: "now test001 test002"]
console.log(r2); //["test001", "001", index: 4, input: "now test001 test002"]

字符串得到值不管运行多少次都是["test001", "001", index: 4, input: "now test001 test002"]和exec一样

3.是全局的时候

var testStr = "now test001 test002";
var re = /test(\d+)/g;   

var r = testStr.match(re);
var r2 = re.exec(testStr);
var r3 = re.exec(testStr);	
console.log(r); //["test001", "test002"]
console.log(r2); //["test001", "001", index: 4, input: "now test001 test002", groups: undefined]
console.log(r3);//["test002", "002", index: 12, input: "now test001 test002", groups: undefined]

这个时候有区别了那就是

match：他是一下全部输出符合匹配的值他们成为一个数值

exec：他是一个一个的输出与子表达式，index，input形成一个数组

4 search() ：在字符串搜索符合正则的内容，搜索到就返回出现的位置（从0开始，如果匹配的不只是一个字母，那只会返回第一个字母的位置），如果搜索失败就返回 -1

用法：字符串.search(正则)

其实就是index的值也可以说就是match和exec中的一个部分

var str = 'abcdef';
var re = /B/i;
//var re = new RegExp('B','i'); 也可以这样写
alert( str.search(re) ); // 1

也就是第1的位置(从0开始)：匹配到了b(B)他早str中是1的位置

下面来了最NB的东西来了

5 replace() :查找符合正则的字符串，就替换成对应的字符串。返回替换后的内容。

用法：字符串.replace(需要替换的值（正则） , 新的字符串/回调函数 )

| : 或的意思

例子：敏感词过滤，比如我爱北京天安门，天安门上太阳升。------我爱*****，****上太阳升。即北京和天安门变成*号，

一开始我们可能会想到这样的方法：

var str = "我爱北京天安门，天安门上太阳升。";
var rep = /北京|天安门/g;
console.log(str.replace(rep, "*"));//我爱**，*上太阳升。

但是你会发现不行他只会替换成为一个星号，我们需要一个字一个星号，不可能说把北京拆开吧，那么出现单个的字就不可了

所以我们就要用到一下方法，也就是要一个回调函数

正确的写法

var str = "我爱北京天安门，天安门上太阳升。";
var rep = /北京|天安门/g;
var str2 = str.replace(rep,function(strr){
	console.log(strr); //用来测试：函数的第一个参数代表每次搜索到的符合正则的字符，所以第一次str指的是北京 第二次str是天安门 第三次str是天安门
	result = "";
	for(var i = 0 ; i<strr.length ; i++){
		result = result+"*";
	}	
	return result;
})
console.log(str2);//我爱*****，***上太阳升。

注意：函数的第一的参数代表每次搜索到的符合正则的字符，第一次strr指：北京；第二次天安门；第三次天安门。在每一次搜索到就会回调一次函数

那么其他的参数是什么呢？

$1、$2、...、$99

与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。

那么问题来了什么是具体的子表达式呢？

()：，小括号，叫做分组符。就相当于数学里面的括号。如下：

var str = '2013-6-7';
var re1 = /\d-+/g;  // 全局匹配数字，横杠，横杠数量至少为1，匹配结果为：  3- 6-
var re1 = /(\d-）+/g;  // 全局匹配数字，横杠，数字和横杠整体数量至少为1   3-6-
var re2  = /(\d+)(-)/g;   //  全局匹配至少一个数字，匹配一个横杠 匹配结果：2013- 6-

正则中的每一个带小括号的项，都叫做这个正则的子项（子表达式）。子项在某些时候非常的有用，比如我们来看一个栗子。

例子：让2013-6-7 变成 2013.6.7

//例子：让2013-6-7 变成 2013.6.7
//分析目的吧2013-替换为2013.;吧6-替换为6.
var str = "2013-6-7";
var re = /(\d+)(-)/g;
var str2 = str.replace(re,function(strr,$1,$2){
	return $1 + '.';//分别返回2013.   6.
})
console.log(str2);

//replace()中如果有子项，
//第一个参数：$0（匹配成功后的整体结果  2013-  6-）,
// 第二个参数 : $1(匹配成功的第一个分组，这里指的是\d   2013, 6)
//第三个参数 : $1(匹配成功的第二个分组，这里指的是-    - - )

例子：数组去重

var str = "aaaaaaaabbbccbbbbbcccccccccnnnnnmmmm";
var reg = /(\w)\1+/g;
//字符串去重
var abc = str.replace(reg, "$1") //abcbcnm
//\1代表第一的子表达式
//这里的\1相当于(\w)的值比如如果\w为a \1也为a ；那么$1就等于第一个子表达式等于(\w)同时也等于\1的值；

\1代表第一的子表达式
这里的\1相当于(\w)的值比如如果\w为a \1也为a ；那么$1就等于第一个子表达式等于(\w)同时也等于\1的值；

如果出现了第二个子表达式就等于\2,$2

例子：我们将把 "Doe, John" 转换为 "John Doe" 的形式：

name = "Doe, John";
name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");

在这里$1等于Doe $2等于John；

例子

/ (a) (b) (c) \1/-----匹配 abca
/ (a) (b) (c) \2/------匹配 abcb

要匹配子字符串而不会记住匹配的部分，请在括号内用开头?:。例如，(?:\d+)匹配一个或多个数字字符，但不记住匹配的字符

(?:x)具体什么意思呢，再我自己的测试下比如把$1给加上(?:)那么$1就会变成意义上的$2

不使用：

      var reg = /^-?(\d*).?(\d*)$/g;
      '11.11'.replace(reg, function (strr, $1, $2) {
        console.log('strr-----', strr) // 11.11
        console.log('$1----', $1, '$2------', $2) // $1 === 11 , $2 === 11
      })

使用

      var reg = /^-?(?:\d*).?(\d*)$/g;
      '11.22'.replace(reg, function (strr, $1, $2) {
        console.log('strr-----', strr) // 11.22
        console.log('$1----', $1, '$2------', $2) // $1 === 22 , $2 === 0
      })

为什么呢？因为当第一个()被设置(?:)非捕获后，上面的reg可以理解为只剩下一个捕获值(也就是上面说的分组符)，那么参数只有$1有效果，$2是找不到我默认为0

重要补充

注意 /[^a] / 和 /^[a]/是不一样的，前者是排除的意思，后者是代表首位。

\b	匹配单词边界。
\B	匹配非单词边界。

执行多行匹配。

n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。

(red|blue|green)

查找任何指定的选项。

.（点）——任意字符
\. : 真正的点

[] ：表示某个集合中的任意一个，比如 [abc] 整体代表一个字符匹配 a b c 中的任意一个，也可以是范围，[0-9] 范围必须从小到大。

下面来简单讲解下其中m和\b的作用：

定义和用法

\b 元字符匹配单词边界。

在单词边界匹配的位置，单词字符后面或前面不与另一个单词字符直接相邻。请注意，匹配的单词边界并不包含在匹配中。换句话说，匹配的单词边界的长度为零。（不要与 [\b] 混淆。）

如果未找到匹配，则返回 null。

提示：\b 元字符通常用于查找位于单词的开头或结尾的匹配。

例子：

/\bm/ 匹配 "moon" 中的 'm'；

/oo\b/ 不匹配 "moon" 中的 'oo'，因为 'oo' 后面的 'n' 是一个单词字符；

/oon\b/ 匹配 "moon" 中的 'oon'，因为 'oon' 位于字符串的末端，后面没有单词字符；

/\w\b\w/ 不匹配任何字符，因为单词字符之后绝不会同时紧跟着非单词字符和单词字符,因为确保我在同一个单词。

var a = "adc adc";
var r = /\w\b\w/;
console.log(r.exec(a));//null

为什么不可以呢？因为他检测的是一个一个分开的单词如上文(c a)是不可以的

如何想要（c a）:吧\b改为\s

var a = "adc adc";
var r = /\w\s\w/g;
console.log(a.match(r));//["c a"]

我们可以来一个实例就是当我们要匹配className中的值的时候有时候我们需要"div",但有的时候会出现"div class" 或"div1"这样的几种情况，我们要怎么去解决呢？

下面是我写的几中方法

var a= "div";
var rat = /\bdiv\b/g;
var rat2 = new RegExp("\\b"+a+"\\b","g"); //使用 new RegExp("pattern") 的时候不要忘记将 
\ 进行转义，因为 \ 在字符串里面也是一个转义字符。
var rat3 = new RegExp(/\bdiv\b/,"g");
var str = "div";
			
console.log(rat.test(str));
console.log(rat2.test(str));
console.log(rat3.test(str));

这里用字面量的方法还是构造法看需求了，一般会用都构造法因为a变量的值不一定但是固定的

M的具体的用法解析

multiline 属性用于返回正则表达式是否具有标志 m。

它声明了给定的正则表达式是否以多行模式执行模式匹配。

在这种模式中，如果要检索的字符串中含有换行符，^ 和 $ 锚除了匹配字符串的开头和结尾外还匹配每行的开头和结尾。

例如，模式 /W3School$/im 匹配 "w3school" 和 "W3School\nisgreat"。（\n 是换行符\u000A）。

如果 m 标志被设置，则该属性为 true，否则为 false。

（|）的使用详情：查找任何指定的选项

var str = "         zwxsgsg       ";
var str2 = "         zwxsgsg";
var reg = /(^\s+|\s+$)/g; //没有短路功能:查找任何指定的选项,有一个也可以
var ds = str.replace(reg, function(word) {
	console.log(word);
	return word = "";
})
var ds2 = str2.replace(reg, function(word) {
	console.log(word);
	return word = "";
})
console.log(ds); //zwxsgsg
console.log(ds2); //zwxsgsg
console.log("zwxsgsg"); //用来比较是否去除了

从str与str2的区别可以看出来这个是没有短路功能的又一个也可以

如果大家想看一些案例可以点击这个

曾皙

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习正则表达式应用总结

距离第一次看js正则表达式有快2年一直到现在看了部知道多少遍了，今天下定决心吧他整理一遍这里我要说明一下我对一些重要的东西的进行了总结一些很基础的W3C中有我就么有写了，如果文章中有错欢迎联系定义正则： 1 var re = new RegExp(“a”); //RegExp对象。参数就是我们想要制定的规则。有一种情况必须用这种方式，下面会提到。 2 var re =...
复制链接

扫一扫