七天学会javascript之正则表达式的理解和使用方法(30)

js中正则表达式使用

正则表达式描述了一种字符串匹配的模式,可以用来检查一个字符串是否含有某种子串,将匹配的串做替换或者从某个字符串中取出符合某个条件的子串等。     

什么是正则表达式呢?

正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个字符串是否含有某种子串、将匹配的子串做替换或者从某个字符串中取出符合某个条件的子串等。

正则表达式(Regular Expression,RegExp)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。RegExp 对象用于存储检索模式。正则表达式主要用来验证客户端输入数据的有效性,可以节省大量的服务器端的系统资源,并且提供更好的用户体验。

说白了正则表达式就是处理字符串的,我们可以用它来处理一些复杂的字符串

正则表达式主要有以下几种主要用处:

一:测试字符串的某个模式

例如:可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或信用卡号码模式,称为数据有效性验证。

二:替换文本。

可以在文档中使用一个正则表达式来标识特定文字,然后将其全部删除,或者全部替换为别的文字。

3:根据模式匹配从字符串中提取一个子字符串。

可以用来在文本或输入字段中查找特定文字。

正则表达式的语法为:

/正则表达式主体/修饰符(可选)

一个正则表达式就是由普通字符(如字符a-z)以及特殊字符(元字符)组成的文字模式。

为什么要学习正则表达式

我们直接用一个例子来说明

//找出这个字符串中的所有数字var str = 'abc123de45fgh6789qqq111';//方法1

     function findNum(str) {

        var tmp = '',

            arr = [];

        for (var i = 0; i < str.length; i++) {

            var cur = str[i];

            if (!isNaN(cur)) {

                tmp += cur;

            } else {

                if (tmp) {

                    arr.push(tmp);

                    tmp = '';

                }

            }

        }

        if (tmp) {

            arr.push(tmp)

        }

        return arr;

    }

    console.log(findNum(str))

    //["123", "45", "6789", "111"]

    //方法2 使用正则表达式

    var reg = /\d+/g;

    console.log(str.match(reg))

   // ["123", "45", "6789", "111"]

创建正则表达式

创建正则表达式和创建字符类似。创建正则表达式可采用new运算符和字面量两种方式。

一:new 运算符创建

Re=new RegExp(a);//最简单的正则表达式,将匹配字母a

Re =new RegExp(a,“i”);//第二个参数,表示匹配时不分大小写

RegExp构造函数的第一个参数为正则表达式的文本内容,而第二个参数则为可选项标志,标志可以组合使用。标志g表示全文查找;i表示忽略大小写;m表示多行查找。例如:

Var re=new RegExg(a,gi);//匹配所有的a或A

正则表达式字面量的声明方式更常用:

例如:

var re =/a/gi  ;//简单又明了。

重点:正则表达式对象的方法:

RexExp对象包含text()exec()两个方法,其功能基本相似,用于测试字符串匹配后面会提到:

正则表达式的创建方式

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

    var reg = /pattern/flags

    // 字面量创建方式

    var reg = new RegExp(pattern,flags);

    //实例创建方式

    

    pattern:正则表达式  

    flags:标识(修饰符)

    标识主要包括:

    1. i 忽略大小写匹配

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

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

字面量创建方式和构造函数创建方式的区别

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

var regParam = 'cm';

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

var reg2 = /regParam/;console.log(reg1);  //   /cm1/console.log(reg2);  //  /regParam/

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

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

元字符

代表特殊含义的元字符

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

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

\s : 空格或者空白等

\n : 匹配换行符

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

 ^ : 限定开始位置 => 本身不占位置匹配字符串的开始

反义词:

\D : 除了\d匹配任意非数字的字符

\W : 除了\w匹配任意不是字母,数字。下划线,汉字的字符

\S : 除了\s匹配任意不是空白符的字符

\B:匹配不是单词开头或结束的位置

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

 \ : 转义字符

 | : 或者

() : 分组

 $ : 限定结束位置 => 本身不占位置匹配字符串的结束

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

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

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

代表次数的量词元字符限定符

* : 0到多个

+ : 1到多个

? : 0次或1次 可有可无

+:一次或更多次

{n} : 正好n次;

{n,} : n到多次

{n,m} : n次到m次

量词出现在元字符后面 如\d+,限定出现在前面的元字符的次数

var str = '1223334444';

var reg = /\d{2}/g;

Var res=str.match(reg);

console.log(res)  //["12", "23", "33", "44", "44"]

var str ='  我是空格君  ';

var reg = /^\s+|\s+$/g; //匹配开头结尾空格

Var res=str.replace(reg,'11');

alert('('+res+')')  //(11我是空格君11)

具体代码如下:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

</head>

 

<body><script>var str ='  我是空格君  ';

var reg = /^\s+|\s+$/g; //匹配开头结尾空格

var res=str.replace(reg,'11');

alert(res);

</script>

</body>

</html>

正则中的()和[]和重复子项 //单独说一下

  • 一般[]中的字符没有特殊含义 如+就表示+
    但是像\w这样的还是有特殊含义的

var str1 = 'abc';

var str2 = 'dbc';

var str3 = '.bc';

var reg = /[ab.]bc/;

//此时的.就表示.

reg.test(str1) //true

reg.test(str2)  //false

reg.test(str3)  //true

  • []中,不会出现两位数

[12]表示1或者2 不过[0-9]这样的表示0到9 [a-z]表示a到z

例如:匹配从18到65年龄段所有的人

var reg = /[18-65]/; // 这样写对么

reg.test('50')

 //Uncaught SyntaxError: Invalid regular expression: /[18-65]/: Range out of order in character class//聪明的你想可能是8-6这里不对,于是改成[16-85]似乎可以匹配16到85的年龄段的,但实际上发现这也是不靠谱的

 

实际上我们匹配这个18-65年龄段的正则我们要拆开来匹配

我们拆成3部分来匹配 18-19  20-59 60-65

reg = /(18|19)|([2-5]\d)|(6[0-5])/;

  •  

()的提高优先级功能:凡是有|出现的时候,我们一定要注意是否有必要加上()来提高优先级;

()的分组 重复子项 (两个放到一起说)

分组:

只要正则中出现了小括号那么就会形成一份分组

只要有分组,exec(match)和replace中的结果就会发生改变(后边的正则方法中再说)

 

分组的引用(重复子项) :

只要在正则中出现了括号就会形成一个分组,我们可以通过\n (n是数字代表的是第几个分组)来引用这个分组,第一个小分组我们可以用\1来表示

 

例如:求出这个字符串'abAAbcBCCccdaACBDDabcccddddaab'中出现最多的字母,并求出出现多少次(忽略大小写)。var str = 'abbbbAAbcBCCccdaACBDDabcccddddaab';

    str = str.toLowerCase().split('').sort(

function(a,b)

{

return a.localeCompare(b)

}).join('');

 

    var reg = /(\w)\1+/ig;

    var maxStr = '';

    var maxLen = 0;

    str.replace(reg,function($0,$1){

        var regLen = $0.length;

        if(regLen>maxLen){

            maxLen = regLen;

            maxStr = $1;

        }else if(maxLen == regLen){

            maxStr += $1;

        }

    })

    console.log(`出现最多的字母是${maxStr},共出现了${maxLen}次`)

  • 当我们加()只是为了提高优先级而不想捕获小分组时,可以在()中加?:来取消分组的捕获

var str = 'aaabbb';var reg = /(a+)(?:b+)/;var res =reg.exec(str);console.log(res)//["aaabbb", "aaa", index: 0, input: "aaabbb"]//只捕获第一个小分组的内容

正则运算符的优先级

  1. 正则表达式从左到右进行计算,并遵循优先级顺序,这与算术表达式非常类似。
  2. 相同优先级的会从左到右进行运算,不同优先级的运算先高后低。

下面是常见的运算符的优先级排列

依次从最高到最低说明各种正则表达式运算符的优先级顺序:

 

\ : 转义符

(), (?:), (?=), []  => 圆括号和方括号

*, +, ?, {n}, {n,}, {n,m}   => 量词限定符

^, $, \任何元字符、任何字符

|       => 替换,"或"操作

 

字符具有高于替换运算符的优先级,一般用 | 的时候,为了提高 | 的优先级,我们常用()来提高优先级

如: 匹配 food或者foot的时候 reg = /foo(t|d)/ 这样来匹配

正则的特性

  •  

贪婪性

  •  

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

  •  
  •  

懒惰性

  •  

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

  •  

var str = '123aaa456';

var reg = /\d+/;  //只捕获一次,一次尽可能多的捕获

var res = str.match(reg)

console.log(res)// ["123"]

reg = /\d+?/g; //解决贪婪性、懒惰性

res = str.match(reg)

console.log(res)// ["1", "2", "3", "4", "5", "6"]

和正则相关的一些方法

这里我们只介绍test、exec、match和replace这四个方法

  • 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))// nullconsole.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"  : 捕获到的字符串中的小分组中的内容

重点:String对象的一些和正则表达式相关的方法如下:

match():找到一个或多个正则表达式的匹配。

replace():替换与正则表达式匹配的子串。

search():检索与正则表达式匹配的值

split():把字符串分割为字符串数组。

测试正则表达式实例如下:

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

var pattern =/gift/ig; //全局搜索

var str=This is a Gift order ,That is a Gift order too!;

alert(str.match(pattern));//匹配到两个Gift;

alert(str.match(pattern).length);//获取数组的长度

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

var pattern =/gift/i;

var str=This is a Gift order ,That is a Gift order too!;

alert(str.search(pattern));//查找到返回位置,否则返回-1

 

 

/*使用replace方法替换匹配到的数据*/

var pattern =/gift/ig; //全局搜索

var str=This is a Gift order ,That is a Gift order too!;

alert(str.replace(pattern,simple));//将Gift替换成了simple

/*使用split方法拆分成字符串数组*/

var pattern =/ /ig;

var str=This is a Gift order ,That is a Gift order too!;

alert(str.split(pattern));//将空格拆开分成数组

match和replace详解

  • 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}

零宽断言

用于查找在某些内容(但并不包括这些内容)之前或之后的东西,如\b,^,$那样用于指定一个位置,这个位置应该满足一定的条件(即断言),因此它们也被称为零宽断言。

在使用正则表达式时,捕获的内容前后必须是特定的内容,而我们又不想捕获这些特定内容的时候,零宽断言就可以派上用场了

  • 零宽度正预测先行断言 (?=exp)
  • 零宽度负预测先行断言 (?!exp)
  • 零宽度正回顾后发断言 (?<=exp)
  • 零宽度负回顾后发断言 (?<!exp)

这四胞胎看着名字好长,给人一种好复杂好难的感觉,我们还是挨个来看看它们究竟是干什么的吧。

  • (?=exp) 这个简单理解就是说字符出现的位置的右边必须匹配到exp这个表达式。

var str = "i'm singing and dancing";

var reg = /\b(\w+(?=ing\b))/g

var res = str.match(reg);console.log(res)// ["sing", "danc"]

 

 

注意一点,这里说到的是位置,不是字符。

var str = 'abc';

var reg = /a(?=b)c/;

console.log(reg.test(str));  // false

// 这个看起来似乎是正确的,实际上结果是false

reg中a(?=b)匹配字符串'abc' 字符串a的右边是b这个匹配没问题,接下来reg中a(?=b)后边的c匹配字符串时是从字符串'abc'中a的后边b的前边的这个位置开始匹配的,

这个相当于/ac/匹配'abc',显然结果是false了

  • (?!exp) 这个就是说字符出现的位置的右边不能是exp这个表达式。

var str = 'nodejs';

var reg = /node(?!js)/;

console.log(reg.test(str)) // false

  • (?<=exp) 这个就是说字符出现的位置的前边是exp这个表达式。

var str = '¥998$888';

var reg = /(?<=\$)\d+/;

console.log(reg.exec(str)) //888

  • (?<!exp) 这个就是说字符出现的位置的前边不能是exp这个表达式。

var str = '¥998$888';var reg = /(?<!\$)\d+/;console.log(reg.exec(str)) //998

     总结如下:

 JavaScript正则表达式

      什么是正则表达式?

正则表达式(英语:Regular Expression,RegExp是正则表达式的缩写。)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。RegExp对象用于存储检索模式。正则表达式主要用来验证客户端的输入数据,可以节约大量的服务器端的系统资源,并且提供更好的用户体验。而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。正则表达式可以:

1.测试字符串的某个模式

例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证。 

2.替换文本

可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换

为别的文字。 

3.根据模式匹配从字符串中提取一个子字符串

可以用来在文本或输入字段中查找特定文字。

正则表达式语法:/正则表达式主体/修饰符(可选)

一个正则表达式就是由普通字符(例如字符a到z)以及特殊字符(称为元字符)组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板,将某个字符模式与所搜索的字符串进行匹配。

 

简写   var re=http://;  //只写两斜杠,浏览器会认为是注释,所以尽量不要给他为空,注意两斜杠之间不要有引号

全称   var re=new RegExp();  //Reg是正则的简写,Exp是表达式的简写

大部分情况用简写,只有一种情况用全称写法:正则需要传参的时候

注:全称写法用到\时,需要两个\\,否则是转义字符

     正则表达式的使用,可以通过简单的办法来实现强大的功能。下面先给出一个简单的示例:

 

^ 为匹配输入字符串的开始位置。

  •  
  •  

[0-9]+匹配多个数字, [0-9] 匹配单个数字,+ 匹配一个或者多个。

  •  
  •  

abc$匹配字母 abc 并以 abc 结尾,$ 为匹配输入字符串的结束位置。

  •  

我们在写用户注册表单时,只允许用户名包含字符、数字、下划线和连接字符(-),并设置用户名的长度,我们就可以使用以下正则表达式来设定。

 

正则表达式中常用符号

正则表达式中的方括号用于查找某个范围内的字符。

                         正则表达式中方括号的应用

表达式

描述

[abc]

查找方括号之间的任何字符。

 [^abc]

查找任何不在方括号之间的字符。

[0-9]

查找任何从 0 至 9 的数字。

[a-z]

查找任何从小写 a 到小写 z 的字符。

 [A-Z]

查找任何从大写 A 到大写 Z 的字符。

                                          正则表达式中常用元字符的含义

表达式

描述

.

匹配除换行符以外的任意字符

\w

匹配字母或数字或下划线

\s

匹配任意的空白符

\d

匹配数字

\b

匹配单词的开始或结束

^

匹配字符串的开始

$

匹配字符串的结束

                                        正则表达式中常用限定符的含义

表达式

描述

*

重复零次或更多次

+

重复一次或更多次

?

重复零次或一次

{n}

重复n次

{n,}

重复n次或更多次

{n,m}

重复n到m次

                                              正则表达式中常用反义词的含义

表达式

描述

\W

匹配任意不是字母,数字,下划线,汉字的字符

\S

匹配任意不是空白符的字符

\D

匹配任意非数字的字符

\B

匹配不是单词开头或结束的位置

[^x]

匹配除了x以外的任意字符

[^aeiou]

匹配除了aeiou这几个字母以外的任意字符

字符转义:如果想查找元字符本身的话,比如查找.,或者*,就出现了问题:没办法指定它们,因为它们会被解释成别的意思。这时就得使用\来取消这些字符的特殊意义。因此,应该使用\.\*。当然,要查找\本身,也得用\\ 例如:unibetter\.com匹配unibetter.comC:\\Windows匹配C:\Windows 

分组:要想重复单个字符,直接在字符后面加上限定符就行了;想要重复多个字符,可以用小括号来指定子表达式(也叫做分组),然后就可以指定这个子表达式的重复次数了。

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值