JavaScript學習之正則表達式

正則表達式

如何建立正則表達式

• 字面量建立var r = /a/;
• 經過構造函數var r = new RegExp("a");

正則表達式實例屬性及方法

• 三個修飾符屬性，只讀不可修改

• RegExp.prototype.ignoreCase
  正則表達式是否添加了忽略大小寫的修飾符，返回一個布爾值

  var r = /asd/i;
  console.log(r.ignoreCase);    //true

• RegExp.prototype.global
  正則表達式是否添加了全局匹配的修飾符，返回一個布爾值

  var r = /asd/i;
  console.log(r.global);    //true

• RegExp.prototype.multiline
  正則表達式是否添加了換行的修飾符，返回一個布爾值

  var r = /asd/m;    
  console.log(r.multiline);    //true

• RegExp.prototype.lastIndex
  返回一個整數，表示正則表達式下一次開始匹配的位置，

  var s = "wqerqt";
  var r = /q/g;
  console.log(r.lastIndex);   //0
  console.log(r.test(s));     //true
  console.log(r.lastIndex);   //2
  console.log(r.test(s));     //true

• RegExp.prototype.source
  返回正則表達式的字符串形式；即不包括首尾的/
• 兩個實例方法

• RegExp.prototype.test()
  做用是否能匹配參數字符串，返回一個布爾值

  console.log(/as/.test("fdas"));   //true
  console.log(/as/.test("fd"));   //false

  test()方法在全局g的匹配下，會記錄上一次test()後開始的位置，來進行下一次test();
  能夠這麼來理解lastIndex用來指定test()開始的位置，lastIndex只對同一個正則表達式有連續有效的做用，例如從新建立正則表達式，會一直返回true或者false

  var i = 3,
      r = /as/g;
  while(i) {
      console.log(r.test("asd"));
      i --;
  }                          //true false true

  下面三種結果相同都是true，至關於新的正則表達式在匹配字符串，只是正則表達式是同樣的

  var i = 3,
  while(i) {
      //r = new RegExp("as","g");
      //r = /as/g;    
      console.log(/as/g.test("asd"));
      i --;
  }                          //true true true

  因此我的認爲在外部定義正則表達式，內部引用會好點

• RegExp.prototype.exec()
  做用是返回一個數組，成員是匹配成功的字符串，不然返回null
  可是數組的長度是組匹配數再加1，例以下面例子的，數組長度只有1

  var r = /as/g;
  console.log(r.exec("asdas"));   //["as", index: 0, input: "asdas", groups: undefined]
  console.log(r.exec("asdas"));   //["as", index: 3, input: "asdas", groups: undefined]
  console.log(r.exec("adsd"));    //null

  返回數組結果還有兩個屬性：
  index:返回匹配時的位置
  input:返回參數字符串

  var r = /as/g;
  var arr = r.exec("asdas");
  console.log(arr.index, arr.input);     //0,"asdas"
  var arr1 = r.exec("asdas");
  console.logarr1.index, arr1.input);   //3,"asdas"

匹配規則

詳情可看MDN文檔

幾個值得記憶的點：

(.):任意字符，除了\r\n\\u2028\u2029的全部單個字符，大於\u0xFFFF的兩個字符也不行
[\s\S]與[^]:全部單個字符,包括換行符
o\\bo:不存在這樣的單詞進行匹配
+:{1,+Infinity},取儘量大，+?則是取儘量小，最小爲1
*:{0,+Infinity}，取儘量大，*?則是取儘量小，最小爲0
?:{0,1}，取儘量大，最大爲1，??則是取儘量小，最小爲0
[xyz]:單個字符是x或y或z；而[^xyz],則是除了xyz的單個字符

組匹配

就是用來捕獲本身想要的值，用來本身進行後續操做

var a = /-(\w)/g;
console.log('get-own-property-name'.replace(a,function (match, $1) {
    return $1.toUpperCase();
}));                     //getOwnPropertyName

match:匹配成功的字符串
$1:是第一個組匹配的值，例如後面多個括號則是$2$3...
注意組匹配嵌套時的順序console.log("bc".replace(/((b)c)/g,"$1+$2")); //bc+b從左開始，而不是從內開始
字符串的match與split在進行組匹配時，是否添加修飾符g結果不同

console.log("abc".match(/(.)b/g));   //["ab"]
console.log("abc".match(/(.)b/));    //(2) ["ab", "a", index: 0, input: "abc", groups: undefined]
console.log("abc".split(/(b)/));     // ["a", "b", "c"]
console.log("abc".split(/b/));       //["a", "c"]

總結：match方法只要進行了g全局匹配就只會返回最終匹配到的字符串組成的數組；split只要進行了組匹配就會返回捕獲的內容

• 非捕獲組
  用?:表示；說直白點就是:仍是這麼匹配可是我不返回括號裏的內容，因此咱們進行split的組匹配時能夠進行修改console.log("abc".split(/(?:b)/)); //["a", "c"]
• 先行斷言
  用x(?=y)表示，意思是匹配一個x，x必須在y前面，結果中不返回y
• 先行否認斷言
  用x(?!y)表示，意思是匹配一個x，x後面不能是y，結果中不返回y
• 後行斷言
  用(?<=y)x表示，意思是匹配一個x，x前面必須是y，結果中不返回y

• 後行否認斷言
  用(?<!=y)x表示，意思是匹配一個x，x前面不能是y，結果中不返回y

  console.log(/(?<!=b)a/.exec("bcaba"));  //["a", index: 2, input: "bcaba", groups: undefined]
  console.log(/(?<=b)a/.exec("bcaba"));   //["a", index: 4, input: "bcaba", groups: undefined]

經典例子：

數字格式化：

var r = /\B(?=((\d{3})+$))/g;
console.log('1234567890'.replace(r, '.'));    //1.234.567.890
console.log('123'.replace(r, '.'));           //123