Js中的正则表达式

一、开始1、简单使用编辑器搜索时,勾选上正则,可以搜索出满足特定条件的结果。 在webstorm中, bfunction b这样可以搜索出function单词

一、开始

1、简单使用

  • 编辑器搜索时,勾选上正则,可以搜索出满足特定条件的结果。

    在webstorm中,\bfunction\b这样可以搜索出function单词。做搜索功能时

  • 做搜索功能时

      var reg = new RegExp(inpStr);
      apps.forEach(function (v, i) {
          if (reg.test(v.name)) // 正则的test方法
              retApps.push(v);
      });
    
    或者
    apps.filter(RegExp.prototype.test.bind(new RegExp(s)));
    
  • 字符串部分字符替换

      var out = "fas8fv4gjnb2dsiou1".replace(/\d/g,function(item){
          if(Number(item)%2 == 0)
              return Number(item)+1;
          return item;
      })
    

    /\d/g就是正则

2、两种定义方式

  1. /.../ 声明

    /java/可以匹配任何包含java子串的字符串

  2. 构造函数RegExp

     new RegExp('[/]','g')
    
    new RegExp('\\b\\w+\\b','g')
    

    构造函数可传入两个参数,第一个参数是字符串,若有转义,用"\",比如"\\",第二个参数是修饰符(i、g、m)。动态创建正则表达式时只能用构造函数,(虽然eval也可以使用)。

3、修饰符和属性

  • 正则的修饰符

    • i 忽视大小写

    • g 全局匹配

    • m 多行匹配模式 常与^、&配合使用

  • 正则的实例属性

    sourceglobalignoreCasemultilinelastIndex(可读写)

二、正则的语法

1、字符

正则表达式中所有的字母和数字都是按照其字面含义进行匹配的,也支持转义

常用转义字符列表

转义字符含义
\n 换行符
\r 回车符
\t 制表符

特殊含义的标点符号,必须使用前缀\,为求保险,可以在每个标点符号前都加上反斜线。

比如 /\\/用以匹配任何包含反斜线的字符串

3、字符类

把字符放到方括号内,就构成了字符类。

  • 可以使用连字符;

  • 可以是转义字符;

  • 可以用^来否定字符类。

[a-zA-Z0-9]就是字符类

字符等同于描述
. [^\n\r] 除了换行符和其他Unicode行终止符之外的任何字符(除了换行和回车之外的任意字符)
\d [0-9] 数字字符,任何ASCII数字
\D [^0-9] 非数字字符,除了ASCII数字之外的任何字符
\s [\t\n\x0B\f\r] 空白字符,任何Unicode空白符
\S [^\t\n\x0B\f\r] 非空白字符,任何非Unicode空白符的字符
\w [a-zA-Z_0-9] 单词字符(所有的字母),任何ASCII字符组成的单词  
表示匹配数字、字母、下划线
\W [^a-zA-Z_0-9] 非单词字符,任何不是ASCII字符组成的单词

4、重复

{n,m} n到m次;

{n,} n以上次;

{n} n次;

? 0到1次;

+ 1到n次;

* 0次以上

  • 贪婪的重复:默认,尽可能多的匹配。

    /a+/ //匹配字符串"aaa"时,返回的是"aaa"。
    
  • 非贪婪的重复:加上?

    /a+?/.exec("aaa") // 返回的是"a"
    /a+?b/.exec("aaab") // 匹配的结果仍是aaab,因为匹配的时候,是从第一个字符开始的
    

5、选择项

选择项| 从左到右匹配,直到发现匹配项,就停止匹配,类似Js运算符'||'

eg./ab|cd|ef/可以匹配字符串"ab","cd","ef"。

6、分组和引用

  • 作用一:把单独的项组合成子表达式,就可以一个单元一个单元地处理*+?

    /java(script)?/
    
  • 作用二:在完整模式中定义子模式;这样可在同一正则表达式后面引用前面子表达式,通过字符“\”后加数字来引用,数字是参与计数的左括号的位置(初始值1),不能在字符类中使用引用

      /**
       * 引用的使用  $1和字符串混杂用,别当成变量
       */
      var sToMatch = "#123456789";
      var reNumbers = /#(\d+)/;
      reNumbers.test(sToMatch);
      console.log(RegExp.$1);
    
    
      /(['"])[^'"]*\1/;// 如果这样用就错了/(['"])[^\1]*\1/
    
      // 在replace中使用引用
      var sToChange = "1234 5678";
      var reMatch = /(\d{4}) (\d{4})/;
      var sNew = sToChange.replace(reMatch, "$2 $1");//sNew  5678 1234
    

单纯的分组 (?: 内容 )

7、指定匹配位置

^ 匹配字符串的开头,在多行检索中,匹配一行的开头

$ 匹配字符串的结尾,在多行检索中,匹配一行的结尾

\b匹配一个单词的边界,一种情况

/**
 * 使用\b,这种情况比较特殊
 */
var str = '.java is very good';
var match = /\b([\w]+)\b/.exec(str); 
//0:java 1:java index:1 input:.java is very good

\B 匹配非单词的位置

8、前瞻

(?=exp)正向前瞻 匹配exp前面的位置

(?!exp)负向前瞻 匹配后面不是exp的位置

var str1 = "bedroom";
var str2 = "bedding";
var reBed = /(bed(?=room))///在我们捕获bed这个字符串时,抢先去看接下来的字符串是不是room
alert(reBed.test(str1));//true
alert(RegExp.$1)//bed
alert(RegExp.$2 === "")//true
alert(reBed.test(str2))//false


var str1 = "bedroom";
var str2 = "bedding";
var reBed = /(bed(?!room))/  //要来它后面不能是room
alert(reBed.test(str1))//false
alert(reBed.test(str2))//true

'a12'.match(/^(?=[a-z])[a-z0-9]+$/)    //["a12"]以[a-z]开头的字符(a-z0-9)

解析:

1、^匹配位置0,成功 ----零宽度 只匹配位置

2、(?=[a-z]) 匹配位置0-----不占位,从当前的位置0匹配,要求位置0的右侧符合表达式 , 即a 满足[a-z]

3、[a-z0-9]+ 从位置0开始匹配 ---a12 匹配成功

4、$ 从位置3匹配 匹配成功

  • 匹配以ab开头的字符串的正则 /(?=ab)\w+/
    'abc'.match( /(?=ab)\w+/) // abc
    
  • 匹配以ing结尾的字符串的正则/\w+(?=ing)/

    'learning'.match(/(learn(?=ing))/) //learn
    
  • 匹配以b开头,但非ab开头的5位字符串的正则/(?!ab)b\w{4}/

    'abc1234567dab789d'.match(/(?!ab)b\w{4}/g) // "bc123", "b789d"

三、正则的方法

1、search

var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
console.log(data.search(reCat));// 23

字符串String的方法,唯一的参数是正则,返回第一个与之匹配的字串的起始位置,从0开始计数;若没找到,返回-1。

传入的参数若不是正则表达式,自动转化成正则,不支持全局搜索。

2、repalce

字符串String的方法,第一个参数是正则表达式,第二个参数是要替换的字符串,返回替换后的新字符串,被作用的字符串不变;g是全局搜索替换标志,若第一个参数是字符串,字符串直接替换匹配的字符串。第二个参数若有$加数字,且正则表达式有相应子表达式,则使用引用替换。

第二个参数还可以是函数,函数的第一个参数是匹配的字符串,第二个参数开始,是模式匹配的括号的子表达式字符串,然后是匹配字符串的位置,最后是当前字符串。return返回替换的字符串。

var str="acd6fadf9fa5fa";
var newStr = str.replace(/\d/g,function(item){
    return parseInt(item)+7;
})

3、match

   var data = "123123,213,12312,312,3,Cat,cat,dsfsdfs,";
   var reCat = /cat/gi;
   var arrMactches = data.match(reCat)//0:Cat 1:cat

字符串String的方法,唯一的参数是正则,返回由匹配的(所有)字符子串和RegExp子表达式组成的数组;若没找到,返回null。

传入字符串时,注意要用转义字符,js会自动转化成正则表达式,支持g;当match传入非全局的正则时,效果与exec一样,这时返回的数组有两个属性,index和input,index表示匹配字串前有几个字符。。

4、split

var data = "1 ,  2, 3,4,     5";
var arrRes = data.split(/\s*,\s*/);

将调用它的字符串拆成一个字串组成的数组,参数是分隔符,分隔符可以是正则表示式

5、exec

   var tt = "#fdas.fa"                                                        
   tt = /[\w]+/.exec(tt);// tt 0:fdas, index:1, input:"#fdas.fa" 

正则的方法,传入字符串,返回由匹配字符子串和RegExp子表达式组成的数组,数组的input属性是正在检索的字符串;找不到匹配,则返回null;

正则具有全局修饰符g时,查找时会与lastIndex一起配合,查询到字串后,将lastIndex置为字串所在字符串的后一位,第二次查找,会从lastIndex位置开始,若未找到匹配,自动将lastIndex置为0。

/**
 * lastIndex值的变化
 */
var pattern = /Java/g;
var text = "JavaScript is more fun than Java!";
var result;
while ((result = pattern.exec(text)) !== null) {
    console.log(result + 'index' + result.index + 'lastIndex' + pattern.lastIndex);
}

6、test

行为与exec类似,只不过返回的是true或false

四、实际运用例子

  • 取函数名字 /function\s([^(](/

      Function.prototype.getName = function () {
          if ("name" in this) return this.name;
          return this.name = this.toString().match(/function\s*([^(]*)\(/)[1];
      };
    

五、参考

javascript正则表达式-司徒正美

JavaScript权威指南