JS中的正则表达式

1.两种创建方式

  • 字面量创建方式
  • 实例创建方式

var reg = /pattern/flags // 字面量创建方式

var reg = new RegExp(pattern,flags); //实例创建方式

pattern:正则表达式 flags:标识(修饰符)

标识主要包括:

1. i 忽略大小写匹配

2. m 多行匹配,即在到达一行文本末尾时还会继续寻常下一行中是否与正则匹配的项

3. g 全局匹配 模式应用于所有字符串,而非在找到第一个匹配项时停止

2.两种创建方式的区别

字面量创建方式不能进行字符串拼接,实例创建方式可以

var regParam = 'cm';

var reg1 = new RegExp(regParam+'1');

var reg2 = /regParam/;

console.log(reg1); // /cm1/

console.log(reg2); // /regParam/

字面量创建方式特殊含义的字符不需要转义,实例创建方式需要转义

var reg1 = new RegExp('\d'); // /d/

var reg2 = new RegExp('\\d') // /\d/

var reg3 = /\d/; // /\d/

3.元字符

\d : 0-9之间的任意一个数字 \d只占一个位置

\w : 数字,字母 ,下划线 0-9 a-z A-Z _

\s : 空格或者空白等

\D : 除了\d

\W : 除了\w

\S : 除了\s

. : 除了\n之外的任意一个字符

\ : 转义字符

| : 或者

() : 分组

\n : 匹配换行符

\b : 匹配边界 字符串的开头和结尾 空格的两边都是边界 => 不占用字符串位数

^ : 限定开始位置 => 本身不占位置

$ : 限定结束位置 => 本身不占位置

[a-z] : 任意字母 []中的表示任意一个都可以

[^a-z] : 非字母 []中^代表除了

[abc] : abc三个字母中的任何一个 [^abc]除了这三个字母中的任何一个字符

4.代表次数的量词元字符

* : 0到多个

+ : 1到多个

? : 0次或1次 可有可无

{n} : 正好n次;

{n,} : n到多次

{n,m} : n次到m次

5.正则表达式的特性

  • 贪婪性

    所谓的贪婪性就是正则在捕获时,每一次会尽可能多的去捕获符合条件的内容。
    如果我们想尽可能的少的去捕获符合条件的字符串的话,可以在量词元字符后加?

  • 懒惰性

    懒惰性则是正则在成功捕获一次后不管后边的字符串有没有符合条件的都不再捕获。
    如果想捕获目标中所有符合条件的字符串的话,我们可以用标识符g来标明是全局捕获

    var str = '123aaa456';
    var reg = /\d+/;  //只捕获一次,一次尽可能多的捕获
    var res = str.match(reg)
    console.log(res)
    // ["123", index: 0, input: "123aaa456"]
    reg = /\d+?/g; //解决贪婪性、懒惰性
    res = str.match(reg)
    console.log(res)
    // ["1", "2", "3", "4", "5", "6"]

    6.和正则表达式相关的方法

  • reg.test(str) 用来验证字符串是否符合正则 符合返回true 否则返回false
var str = 'abc';
var reg = /\w+/;
console.log(reg.test(str));  //true
  • reg.exec() 用来捕获符合规则的字符串
var str = 'abc123cba456aaa789';
var reg = /\d+/;
console.log(reg.exec(str))
//  ["123", index: 3, input: "abc123cba456aaa789"];
console.log(reg.lastIndex)
// lastIndex : 0 

reg.exec捕获的数组中 
// [0:"123",index:3,input:"abc123cba456aaa789"]
0:"123" 表示我们捕获到的字符串
index:3 表示捕获开始位置的索引
input 表示原有的字符串

当我们用exec进行捕获时,如果正则没有加'g'标识符,则exec捕获的每次都是同一个,当正则中有'g'标识符时 捕获的结果就不一样了,我们还是来看刚刚的例子

var str = 'abc123cba456aaa789';
var reg = /\d+/g;  //此时加了标识符g
console.log(reg.lastIndex)
// lastIndex : 0 

console.log(reg.exec(str))
//  ["123", index: 3, input: "abc123cba456aaa789"]
console.log(reg.lastIndex)
// lastIndex : 6

console.log(reg.exec(str))
// ["456", index: 9, input: "abc123cba456aaa789"]
console.log(reg.lastIndex)
// lastIndex : 12

console.log(reg.exec(str))
// ["789", index: 15, input: "abc123cba456aaa789"]
console.log(reg.lastIndex)
// lastIndex : 18

console.log(reg.exec(str))
// null
console.log(reg.lastIndex)
// lastIndex : 0

每次调用exec方法时,捕获到的字符串都不相同
lastIndex :这个属性记录的就是下一次捕获从哪个索引开始。
当未开始捕获时,这个值为0。          
如果当前次捕获结果为null。那么lastIndex的值会被修改为0.下次从头开始捕获。
而且这个lastIndex属性还支持人为赋值。

exec的捕获还受分组()的影响

var str = '2017-01-05';
var reg = /-(\d+)/g
// ["-01", "01", index: 4, input: "2017-01-05"]
"-01" : 正则捕获到的内容
"01"  : 捕获到的字符串中的小分组中的内容
  • str.match(reg) 如果匹配成功,就返回匹配成功的数组,如果匹配不成功,就返回null
//match和exec的用法差不多
var str = 'abc123cba456aaa789';
var reg = /\d+/;
console.log(reg.exec(str));
//["123", index: 3, input: "abc123cba456aaa789"]
console.log(str.match(reg));
//["123", index: 3, input: "abc123cba456aaa789"]

上边两个方法console的结果有什么不同呢?二个字符串是一样滴。
当我们进行全局匹配时,二者的不同就会显现出来了.

var str = 'abc123cba456aaa789';
var reg = /\d+/g;
console.log(reg.exec(str));
// ["123", index: 3, input: "abc123cba456aaa789"]
console.log(str.match(reg));
// ["123", "456", "789"]

当全局匹配时,match方法会一次性把符合匹配条件的字符串全部捕获到数组中,
如果想用exec来达到同样的效果需要执行多次exec方法。

我们可以尝试着用exec来简单模拟下match方法的实现。

 String.prototype.myMatch = function (reg) {
    var arr = [];
    var res = reg.exec(this);
    if (reg.global) {
        while (res) {
            arr.push(res[0]);
            res = reg.exec(this)
        }
    }else{
        arr.push(res[0]);
    }
    return arr;
}

var str = 'abc123cba456aaa789';
var reg = /\d+/;
console.log(str.myMatch(reg))
// ["123"]

var str = 'abc123cba456aaa789';
var reg = /\d+/g;
console.log(str.myMatch(reg))
// ["123", "456", "789"]

此外,match和exec都可以受到分组()的影响,不过match只在没有标识符g的情况下才显示小分组的内容,如果有全局g,则match会一次性全部捕获放到数组中

var str = 'abc';
var reg = /(a)(b)(c)/;

console.log( str.match(reg) );
// ["abc", "a", "b", "c", index: 0, input: "abc"]
console.log( reg.exec(str) );
// ["abc", "a", "b", "c", index: 0, input: "abc"]


当有全局g的情况下
var str = 'abc';
var reg = /(a)(b)(c)/g;
console.log( str.match(reg) );
// ["abc"]
console.log( reg.exec(str) );
// ["abc", "a", "b", "c", index: 0, input: "abc"]
  • str.replace() 这个方法大家肯定不陌生,现在我们要说的就是和这个方法和正则相关的东西了。
正则去匹配字符串,匹配成功的字符去替换成新的字符串
写法:str.replace(reg,newStr);

var str = 'a111bc222de';
var res = str.replace(/\d/g,'Q')
console.log(res)
// "aQQQbcQQQde"

replace的第二个参数也可以是一个函数
str.replace(reg,fn);

var str = '2017-01-06';
str = str.replace(/-\d+/g,function(){
    console.log(arguments)
})

控制台打印结果:
["-01", 4, "2017-01-06"]
["-06", 7, "2017-01-06"]
"2017undefinedundefined"
从打印结果我们发现每一次输出的值似乎跟exec捕获时很相似,既然与exec似乎很相似,那么似乎也可以打印出小分组中的内容喽 

var str = '2017-01-06';
str = str.replace(/-(\d+)/g,function(){
    console.log(arguments)
})
["-01", "01", 4, "2017-01-06"]
["-06", "06", 7, "2017-01-06"]
"2017undefinedundefined"
从结果看来我们的猜测没问题。

此外,我们需要注意的是,如果我们需要替换replace中正则找到的字符串,函数中需要一个返回值去替换正则捕获的内容。

通过replace方法获取url中的参数的方法

(function(pro){
    function queryString(){
        var obj = {},
            reg = /([^?&#+]+)=([^?&#+]+)/g;
        this.replace(reg,function($0,$1,$2){
            obj[$1] = $2;
        })
        return obj;
    }
    pro.queryString = queryString;
}(String.prototype));

// 例如 url为 https://www.baidu.com?a=1&b=2
// window.location.href.queryString();
// {a:1,b:2}

 

 

 

 

参考:https://www.cnblogs.com/chenmeng0818/p/6370819.html 

 

练习

1.连续三个数字

var reg=/\d{3}/g;
var str='123dd4567fffff555ffff666hhh567890';
console.log(str.match(reg));

2.连续两个相同的数字

var reg=/(\d)\1/g;
str='233ddd45f67dd666ddd888dd786dddd9999';
console.log(str.match(reg));

3.连续3个相同的数字

//连续3个相同的数字
var pattern1 = /(\d)\1{2}/g;
console.log(pattern1.test('s23')); // false
console.log(pattern1.test('s222s')); // true

4.正整数

/[1-9]\d*/g

5.负整数

/-[1-9]\d*/g

6.整数

var reg=/-?[1-9]\d*|0/g

7.正浮点数

/\d+.\d+/g

8.匹配日期

var reg=/\d{4}-(0?[1-9]|1[0-2])-(0?[1-9]|[12]\d+|3[01])/g
str='2019-21-09';


var reg1=/\d{4}(-|.)(0?[1-9]|1[0-2])(-|.)(0?[1-9]|[12]\d+|3[01])/g;
str1='2019.12.09';

利用小括号,替换日期内容格式;

9.匹配链接

10.匹配邮箱

11.匹配时间

12.匹配url参数

/(a|b){3,}/  匹配ab任意组合至少三次以上;

https://blog.csdn.net/b954960630/article/details/82634008

 

匹配url:

(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值