其他分享
首页 > 其他分享> > JS 正则 长篇

JS 正则 长篇

作者:互联网

正则

正则:
一个规则, 用来处理字符串的一个规则

处理:

处理

reg.test(str)

判断一个字符串是否复合我们的制定的规则

var reg = /\d/;
console.log(reg.test("lemon22")); // true
console.log(reg.test("lemon"));   // false

捕获

reg.excec(str)

把字符串中符合正则规则的内容捕获到

var reg = /\d/;
console.log(reg.exec("lemon")); // null
console.log(reg.exec("1")); // ["1", index: 0, input: "1"];

如何创建一个正则

字面量方式:

var reg = /\d/;

实例创建方式

var reg = new RegExp("");

两种方式创建区别

需要动态创建正则表达式:

var name = "lemon"
var reg = /^\d+"+name+"\d+$/g
console.log(reg.test('22"""lemon""22')) // true
var name = "lemon"
var reg = new RegExp("^\\d+" + name +"\\d+%", "g")
console.log(reg.text("22lemon""")) // true

字面量和实例创建的方式在正则中的区别?

元字符

每一个正则表达式都是由元字符和修饰符组成的,

元字符:
在//之间具有意义的一些字符

1.常用特殊意义的字符

2.代表出现次数的量词元字符

3. 定位符,

注意:

[ ]: 中出现的所有的字符都代表本身意思的字符(没有特殊的含义)

分组

改变优先级

var reg = /^18|19$/

18, 19, 181, 189, 119, 819, 1819...

var reg = /^(18|19)$/

18, 19

中括号不识别两位数

var reg = /^[12-68]$/

1, 2-6中的一个, 8

示例

匹配有效数字
var reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/

[+-]?
可以有+或-, 或者都没有

(\d|([1-9]\d+))
单个数字(包括0), 或者以1到9开头的多位数字

(.\d+)?
以.开头的多位数字, 或者都没有

年龄介于18-65之间
var reg = /^(1[8-9]|[2-5]\d|6[0-5])$/
邮箱(简版)

1144411@qq.com
123456@163.com.cn
lemon@lemon.cn
lemon_xu_22@163.com

左边: 数字, 字母, 下划线, ., -
@
右边:

var reg = /^[\w.-]+@[0-9a-zA-z]+(\.[a-zA-Z]{2,4}){1,2}$/

标准真实姓名 2-4位汉字

var reg = /^[\u4e00-\u9fa5]{2, 4}$/

身份证号码(简版)

var reg = /^\d{17}(\d|X)$/

捕获

捕获的内容格式:
每一次捕获的时候都是先进行默认的匹配, 如果没有匹配成功的, 捕获的结果是null; 只有有匹配的内容才能捕获到:

懒惰性, 贪婪性

正则捕获的特点

var reg = /\d+/;
var str = "lemon2020age22";
var res = reg.exec(str);
console.log(res);

解决懒惰性

在正则的末尾加一个修饰符"g"

修饰符:g, i, m

加了全局修饰符g, 正则每一次捕获结束后, 我们的lastIndex的值都变为了最新的值, 下一次捕获从最新的位置开始查找, 这样就可以把所有需要捕获的内容都捕获到了

var reg = /\d+/g;
var str = "lemon2020age22";
console.log(reg.lastIndex);
console.log(reg.exec(str));
console.log(reg.lastIndex);
console.log(reg.exec(str));

0
Array["2020", ...]
9
Array["22", ....]

编写程序获取正则捕获的所有内容(正则一定不要忘记加g)
var reg = /\d+/g;
var str = "lemon2020age22";
var ary = [ ];
var res = reg.exec(str);
while(res) {
    ary.push(res[0]);
    res = reg.exec(str);
}
console.log(ary)

["2020" , "22"]

解决正则贪婪性

只需要在量词元字符后面添加一个?即可

var reg = /\d+?/g;
var str = "lemon2020age22";
console.log(reg.exec(str));

["2", ....]

?在正则中有很多作用

match捕获

字符串中的match方法, 把所有和正则匹配的字符都获取到

var reg = /\d+/g;
var str = "lemon2020age22";
var ary = str.match(reg);
console.log(ary);

["2020", 22]

虽然在当前的情况下match比exec更加的简便一些, 但是match中存在一些自己处理不了的问题:

在分组捕获的情况下, match只能捕获到大正则匹配的内容, 而 对于小正则则捕获的内容是无法获取到的 , 多次捕获到的情况下

分组引用

正则分组:

var reg = /^(\w)\1(\w)\2$/;
console.log(reg.test("zzff"));
console.log(reg.test("z0f_"));

true
false

var reg = /(\w)\1(\w)\2/g;
console.log("zzff1bbzz".match(reg));
console.log("z0f_".match(reg));

\2代表和第二个分组出现一模一样的内容; \1和第一个分组出现一模一样的内容;
一模一样: 和对应的分组中的内容的值都要一样

分组捕获

正则在捕获的时候, 不仅仅把大正则匹配的内容捕获到, 而且还可以把小分组匹配的内容捕获到

var reg = /(\d{4})-(\d{2})-(\d{2})/g
console.log(reg.exec('2010-12-22') );

["2010-12-22", "2010", "12", "22"]

非捕获分组

var reg1 = /(?:\d{4})-(\d{2})-(\d{2})/g
reg1.exec('2010-12-22') 

[ "2010-12-22", "12", "22" ]

在反向引用时,还是通过\num的形式获取前面分组的匹配结果,只不过 在计算第几个分组时不包括非捕获分组

var reg2 = /(?:\d{4})-(\d{2})-(\d{2})-\2/g
reg2.exec('2010-12-22-22')

[ "2010-12-22-22", "12", "22" ]

replace

replace: 把原有的字符替换成新的字符
在不使用正则的情况下, 每当执行一次只能替换一个字符.

var str = "lemon2020lemon2021"
str = str.replace("lemon", "lemonX");
console.log(str)
str = str.replace("lemon", "lemonX")
console.log(str)

"lemonX2020lemon2021"
"lemonXX2020lemon2021"

没有实现需求

使用正则

var str = "lemon2020lemon2021"
str = str.replace(/lemon/g, "lemonX");

"lemonX2020lemonX2021"

replace第一项的值是一个正则它的实现原理

  1. 首先, 我们和exec捕获一样, 把所有和我们正则匹配的都捕获到,
  2. 然后, 把捕获的内容替换成新内容

/lemon/g, 按照这个正则把str中所有可以匹配的都捕获到, 然后统一都替换成我们的"lemonX"

str = str.replace(/lemon/g, function(){
    console.log("ok");
    console.log(arguments);
    return "lemonX"
})

ok

Arguments { 0: "lemon", 1: 0, 2: "lemonX1XX2020lemonX2XX2021", … }
ok

Arguments { 0: "lemon", 1: 13, 2: "lemonX1XX2020lemonX2XX2021", … }

"lemonXX1XX2020lemonXX2XX2021"

var reg2 = /(?:\d{4})-(\d{2})-(\d{2})-\2/g
var str2 = '2010-12-22-22 2013-09-11-11'
str2.replace(reg2, function(){
    console.log("ok");
    console.log(arguments);
    return "1"
})

ok

Arguments { 0: "2010-12-22-22", 1: "12", 2: "22", 3: 0, 4: "2010-12-22-22 2013-09-11-11", … }

ok

Arguments { 0: "2013-09-11-11", 1: "09", 2: "11", 3: 14, 4: "2010-12-22-22 2013-09-11-11", … }

"1 1"

第二个参数换成一个函数

  1. 匿名函数执行多少次, 取决于正则能在字符串中捕获多少次
  2. 每一次执行匿名函数, 里面传递的参数值arguments和我们自己通过exec捕获到的结果是非常类似的(即使正则有分组, 我们同样可以通过arguments获取到分组捕获到内容)
  3. return 你返回的结果是啥, 就相当于把当前这一次大正则捕获的内容替换成你返回的内容
var str = "2020-9-11";
var ary = ["零", "壹", "贰", "叁", "肆", "伍", "陆" ,"柒", "捌", "玖"]
str.replace(/(\d)/g, function(){
    return ary[arguments[1]]
})

"贰零贰零-玖-壹壹"

arguments[0]: 大正则捕获的
arguments[1]: 小正则捕获的

实例

时间字符串格式化

var str = "2020-9-11 18:15:00";
var str2 = "2020/9/11 18:16:00"
var resStr = "{0}年{1}月{2}日 {3}时{4}分{5}秒"
var dataArray = str.match(/\d+/g)
resStr.replace(/{(\d)}/g, function(){
    return  dataArray[arguments[1]];
})
var dataArray2 = str2.match(/\d+/g)
resStr.replace(/{(\d)}/g, function(){
    return  dataArray2[arguments[1]];
})

千分符

9335673817 9, 335, 673, 817

var str4 = "9335673817";
var reg4 = /^(\d{1,3})((?:\d{3})+)$/
str4.replace(reg4, function(){
    var result1 = arguments[1];
    var result2 = arguments[2];
    return result1 + "," + result2.replace(/\d{3}(?!$)/g, function(){
        return arguments[0] + ","
    })
})

9, 335, 673, 817

如果字符串的长度-索引位置本身-1模3 === 0, 则在这个字符串的后面加一个,
(?!$), 表示不给最后的数字加逗号

var reg = /\d(?!$)/g;
var str = "175335673817"
str.replace(reg, function(r, i){
    if( (str.length - i - 1)%3 ===0)
        return r + ",";
    else
        return r
})

正向预查和负向预查

标签:22,捕获,JS,var,正则,str,长篇,reg
来源: https://www.cnblogs.com/xiaoxu-xmy/p/13653802.html