1. 程式人生 > >Javascript高階培訓-正則表示式

Javascript高階培訓-正則表示式

  
   三道測試題:
   1, var str=“ abbbbacc”;
   var rs=str.replace(“a”,”0”);
   (A) 0bbbbacc (B)0bbbb0cc
   2,var str=“ abbbbacc”;
   var rs=str.replace(“/a/”,”0”);
   (A) 0bbbbacc (B)0bbbb0cc
   3,var str=“ abbbbacc”;
   var rs=str.replace(“/a/g”,”0”);
   (A)0bbbbacc (B) 0bbbb0cc
   附註:String物件的replace方法簽名為:

   replace(regx,str)
   一,概述
  1,正則表示式,可以說是任何一種程式語言都提供的機制,它主要是提供了對字串的處理能力。
  2,正則表示式在頁面處理中的使用場景:
  1)表單驗證。驗證某些域符合某種規則,例如郵件輸入框必須輸入的是郵件、聯絡電話輸入框輸入的必須是數字等等
  2)處理DOM模型。例如通過表示式定位DOM中的一個物件或一系列物件,一個例子就是定位id屬性中含有某個特殊字元的div物件。
  3)純程式設計邏輯。直接用於程式設計的邏輯之中。
  3,說明:本部分所舉的正則表示式的程式碼片斷,都是經過測試的,但有一點需要注意,對於換行的字串的定義,我們在表述時使用的是類似如下的形式:
  var str=“It’s is
  a beautiful city”;
  這種形式直接寫在JS程式碼中是錯誤的,那如何獲取具有換行的字串呢?簡單的辦法:在textarea中輸入文字並換行,然後將該值賦給JS變數即可。例如:
  var str=document.forms[0].mytextarea.value;
   二,語法與使用

   1,定義正則表示式
  1)定義正則表示式有兩種形式,一種是普通方式,一種是建構函式方式。
  2)普通方式:var reg=/表示式/附加引數
  表示式:一個字串,代表了某種規則,其中可以使用某些特殊字元,來代表特殊的規則,後面會詳細說明。
  附加引數:用來擴充套件表示式的含義,目前主要有三個引數:
  g:代表可以進行全域性匹配。
  i:代表不區分大小寫匹配。
  m:代表可以進行多行匹配。
  上面三個引數,可以任意組合,代表複合含義,當然也可以不加引數。
  例子:
  var reg=/a*b/;
  var reg=/abc+f/g;
  3)建構函式方式:var reg=new RegExp(“表示式”,”附加引數”);
  其中“表示式”與“附加引數”的含義與上面那種定義方式中的含義相同。
  例子:
  var reg=new RegExp(“a*b”);
  var reg=new RegExp(“abc+f”,”g”);
  4)普通方式與建構函式方式的區別
  普通方式中的表示式必須是一個常量字串,而建構函式中的表示式可以是常量字串,也可以是一個js變數,例如根據使用者的輸入來作為表示式引數等等:
  var reg=new RegExp(document.forms[0].exprfiled.value,”g”);
   2,表示式模式

  1)表示式模式,是指表示式的表達方式與樣式, 即 var reg=/表示式/附加引數 中的“表示式”怎樣去描述?
  2)從規範上講,表示式模式分為簡單模式和複合模式。
  3)簡單模式:是指通過普通字元的組合來表達的模式,例如
  var reg=/abc0d/;
  可見簡單模式只能表示具體的匹配。
  4)複合模式:是指含有萬用字元來表達的模式,例如:
  var reg=/a+b?/w/;
  其中的+、?和/w都屬於萬用字元,代表著特殊的含義。因此複合模式可以表達更為抽象化的邏輯。
  下面我們著重說一下複合模式中各個萬用字元的含義及其使用。
  5)複合模式中特殊字元的講解:
  1>/:在許多程式語言裡面被用作轉義符,一般來說
  /符號後面如果跟的是普通字元c,那麼/c就代表特殊的含義,例如n本來代表字元n,但/n就代表換行。
  /符號後面如果跟的是特殊字元c,那麼/c就代表普通字元c,例如/一般用作轉義符,但//則調錶普通字元/。
  Javascript的正則表示式中/的用法與上面相同,只是不同的程式語言,特殊字元表可能不太一樣罷了。
  2>^:匹配輸入字串的起始端,如果是多行匹配,即表示式的附加引數中含有m,則也在一個換行符後匹配。
  例子:/^B/匹配 “Bab Bc ”中的第一個B
  例子2:/^B/gm匹配
  “Badd B
  cdaf
  B dsfB”
  中的第一行第一個B,第三行中的第一個B
  
  3>$:匹配輸入字元創的尾端,如果是多行匹配,即表示式的附加引數中含有m,則也在一個換行符前匹配。
  與^的用法相反。
  例子:/t$/匹配“bat”中的t,但是不匹配“hate”中的t
  例子2:/t$/匹配
  “tag at
  bat”
  中第一行的最後一個t和第二行的t。
  4>*:匹配前一個字元0次或多次。
  例子:/ab*/匹配“dddabbbbc”中的“abbbb”,也匹配“ddda”中的“a”
  5>+:匹配前一個字元1次或多次。
  例子:/ab+/匹配“dddabbbbc”中的“abbbb”,但不匹配“ddda”
  與後面的{1,}(原型:{n,})的用法類似
  6>?:?的用法比較特殊,一般來說它用來對前一個字元做0次或1次匹配,但是它有另外兩種特殊的用法:
  如果緊跟在*、+、?和{ }之後,則表示原始匹配的最小次數匹配,例如:
  /ba*/本來匹配“bbbaaaa”中的“baaaa”,但是/ba*?/則匹配“bbbaaaa”中的“b”(因為*表示0次或多次匹配,而加?應該表示最少次數匹配,即0次匹配)。
  同理:/ba+?/則匹配“baaaa”中的“ba”。
  作為語法結構符號,使用於前置斷言中,即後面要說到的x(?=y)和x(?!=y)
  7>.:小數點中的“.”號,匹配任何一個單獨的字元,但是換行符除外。
  標準中總共有哪些字元?請參考:字符集
  例如:/a.b/匹配“acbaa”中的“acb”,但是不匹配“abbb”。
  8>(x):表示匹配x(並非特指字元x或者特指一個字元,x表示一個字串),而且匹配會被記住,在語法中這種()被稱為“capturing parentheses ”,即捕捉用的小括號。
  匹配會被記住,是因為在表示式提供的函式中,有些函式返回一個數組,該陣列會儲存所匹配的所有字串,例如exec()函式。
  另外還要注意()中的x被記住的前提是匹配x。
  例子1:
  var regx=/a(b)c/;
  var rs=regx.exec(“abcddd”);
  從上面可以看出,/a(b)c/匹配“abcddd”中的“abc”,因為()的原因,b也會記錄下來,因此rs返回的數字內容為:
  {abc,b}
  例子2:
  var regx=/a(b)c/;
  var rs=regx.exec(“acbcddd”);
  rs返回null,因為/a(b)c/不匹配“acbcddd”,所以()中的b不會被記錄下來(儘管字串中含有b)
  
  9>(?:x):匹配x,但不會記住x,這種格式中的()被稱為“non-capturing parentheses ”,即非捕捉用的小括號。
  例子:
  var regx=/a(?:b)c/;
  var rs=regx.exec(“abcddd”);
  從上面可以看出,/a(?:b)c/匹配“abcddd”中的“abc”,因為(?:)的原因,b不會記錄下來,因此rs返回的數字內容為:
  {abc}
  10>X(?=y):匹配x,僅當後面緊跟著y時。如果符合匹配,則只有x會被記住,y不會被記住。
  例子:
  var regx=/user(?=name)/;
  var rs=regx.exec(“The username is Mary”);
  結果:匹配成功,而且rs的值為{user}
  11>X(?!y):匹配x,僅當後面不緊跟著y時。如果符合匹配,則只有x會被記住,y不會被記住。
  例子:
  var regx=/user(?!name)/;
  var rs=regx.exec(“The user name is Mary”);
  結果:匹配成功,而且rs的值為{user}
  例子2:
  var regx=//d+(?!/.)/;
  var rs=regx.exec(“54.235”);
  結果:匹配成果,rs的值為{5},不匹配54是因為54後面跟著“.”號,當然235也匹配,但是由於exec方法的行為,235不會被返回
  12>x|y:匹配x或y。注意如果x和y都匹配上了,那麼只記住x。
  例子:
  var regx=/beijing|shanghai/;
  var rs=regx.exec(“I love beijing and shanghai”);
  結果:匹配成功,rs的值為{beijing},雖然shanghai也匹配,但不會被記住。
  13>{n}:匹配前一個字元的n次出現。
  n必須是一個非負數,當然如果是一個負數或小數也不會報語法錯誤。
  例子:
  var regx=/ab{2}c/;
  var rs=regx.exec(“abbcd”);
  結果:匹配成功,rs的值為:{abbc}。
  14>{n,}:匹配前一個字元的至少n次出現。
  例子:
  var regx=/ab{2,}c/;
  var rs=regx.exec(“abbcdabbbc”);
  結果:匹配成功,rs的值為:{abbc}。注意為什麼abbbc也符合條件為什麼沒有被記住,這與exec方法的行為有關,後面會統一講解。
  15>{n,m}:匹配前一個字元的至少n次最多m次的出現。
  只要n與m為數字,而且m>=n就不會報語法錯誤。
  例子:
  var regx=/ab{2,5}c/;
  var rs=regx.exec(“abbbcd”);
  結果:匹配成功,rs的值為:{abbbc}。
  例子2:
  var regx=/ab{2,2}c/;
  var rs=regx.exec(“abbcd”);
  結果:匹配成功,rs的值為:{abbc}。
  例子3:
  var regx=/ab(2,5)/;
  var rs=regx.exec(“abbbbbbbbbb”);
  結果:匹配成功,rs的值為:{abbbbb},這說明,如果前一個字元出現多於m次,則只匹配m次。另外:
  var regx=/ab(2,5)c/;
  var rs=regx.exec(“abbbbbbbbbbc”);
  結果:匹配失敗,rs的值為:null,為什麼匹配失敗,因為b多於5個則b(2,5)會匹配前5個b,,而表示式/ab(2,5)c/中b後面是c,但字串中5個b之後還是b所以會報錯。
  16>[xyz]:xyz表示一個字串,該模式表示匹配[]中的一個字元,形式上[xyz]等同於[x-z]。
  例子:
  var regx=/a[bc]d/;
  var rs=regx.exec(“abddgg”);
  結果:匹配成功,rs的值為:{abd}
  例子2:
  var regx=/a[bc]d/;
  var rs=regx.exec(“abcd”);
  結果:匹配失敗,rs的值為:null,之所以失敗,是因為[bc]表示匹配b或c中的一個,但不會同時匹配。
  17>[^xyz]:該模式表示匹配非[]中的一個字元,形式上[^xyz]等同於[^x-z]。
  例子:
  var regx=/a[^bc]d/;
  var rs=regx.exec(“afddgg”);
  結果:匹配成功,rs的值為:{afd}
  例子2:
  var regx=/a[^bc]d/;
  var rs=regx.exec(“abd”);
  結果:匹配失敗,rs的值為:。
  18>[/b]:匹配退格鍵。
  19>/b:匹配一個詞的邊界符,例如空格和換行符等等,當然匹配換行符時,表示式應該附加引數m。
  例子:
  var regx=//bc./;
  var rs=regx.exec(“Beijing is a beautiful city”);
  結果:匹配成功,rs的值為:{ci},注意c前邊的空格不會匹配到結果中,即{ ci}是不正確的。
  20>/B:代表一個非單詞邊界。
  例子:
  var regx=//Bi./;
  var rs=regx.exec(“Beijing is a beautiful city”);
  結果:匹配成功,rs的值為:{ij},即匹配了Beijing中的ij。
  21>/cX,匹配一個控制字元。例如, /cM 匹配一個 Control-M 或
  回車符。 x 的值必須為 A-Z 或 a-z 之一。否則,將 c 視為一
  個原義的 ’c’ 字元。(實際的例子還需補充)
  21>/d:匹配一個數字字元,等同於[0-9]。
  例子:
  var regx=/user/d/;
  var rs=regx.exec(“user1”);
  結果:匹配成功,rs的值為:{user1}
  22>/D:匹配一個非數字字元,等同於[^0-9]。
  例子:
  var regx=/user/D/;
  var rs=regx.exec(“userA”);
  結果:匹配成功,rs的值為:{userA}
  23>/f:匹配一個換頁符。
  24>/n:匹配一個換行符。因為是換行符,所以在表示式中要加入m引數。
  例子:
  var regx=/a/nbc/m;
  var str=“a
  bc”;
  var rs=regx.exec(str);
  結果:匹配成功,rs的值為:{ },如果表示式為/a/n/rbc/,則不會被匹配,因此在一般的編輯器中一個”Enter”鍵代表著“回車換行”,而非“換行回車”,至少在textarea域中是這樣的。
  25>/r:匹配一個回車符
  26>/s:匹配一個空格符,等同於[ /f/n/r/t/v/u00A0/u2028/u2029].
  例子:
  var regx=//si/;
  var rs=regx.exec(“Beijing is a city”);
  結果:匹配成功,rs的值為:{ i}
  27>/S:匹配一個非空格符,等同於[ ^/f/n/r/t/v/u00A0/u2028/u2029].
  例子:
  var regx=//Si/;
  var rs=regx.exec(“Beijing is a city”);
  結果:匹配成功,rs的值為:{ei}
  28>/t:匹配一個tab
  例子:
  var regx=/a/tb/;
  var rs=regx.exec(“a bc”);
  結果:匹配成功,rs的值為: {a bc}
  29>/v:匹配一個豎向的tab
  30>/w:匹配一個數字、_或字母表字元,即[A-Za-z0-9_ ]。
  例子:
  var regx=//w/;
  var rs=regx.exec(“$25.23”);
  結果:匹配成功,rs的值為:{2}
  31>/W:匹配一個非數字、_或字母表字元,即[^A-Za-z0-9_ ]。
  例子:
  var regx=//w/;
  var rs=regx.exec(“$25.23”);
  結果:匹配成功,rs的值為:{$}
  32>/n:注意不是/n,這裡n是一個正整數,表示匹配第n個()中的字元。
  例子:
  var regx=/user([,-])group/1role/;
  var rs=regx.exec(“user-group-role”);
  結果:匹配成功,rs的值為:{user-group-role,-},同樣對user,group,role的匹配也是成功的,但像user-group,role等就不對了。
  33>/0:匹配一個NUL字元。
  34>/xhh:匹配一個由兩位16進位制數字所表達的字元。
  35>/uhhhh:匹配一個由四位16進位制數字所表達的字元。
   3,表示式操作
  1)表示式操作,在這裡是指和表示式相關的方法,我們將介紹六個方法。
  2)表示式物件(RegExp)方法:
  1>exec(str),返回str中與表示式相匹配的第一個字串,而且以陣列的形式表現,當然如果表示式中含有捕捉用的小括號,則返回的陣列中也可能含有()中的匹配字串,例如:
  var regx=//d+/;
  var rs=regx.exec(“3432ddf53”);
  返回的rs值為:{3432}
  var regx2=new RegExp(“ab(/d+)c”);
  var rs2=regx2.exec(“ab234c44”);
  返回的rs值為:{ab234c,234}
  另外,如果有多個合適的匹配,則第一次執行exec返回一個第一個匹配,此時繼續執行exec,則依次返回第二個第三個匹配。例如:
  var regx=/user/d/g;
  var rs=regx.exec(“ddduser1dsfuser2dd”);
  var rs1=regx.exec(“ddduser1dsfuser2dd”);
  則rs的值為{user1},rs的值為{rs2},當然注意regx中的g引數是必須的,否則無論exec執行多少次,都返回第一個匹配。後面還有相關內容涉及到對此想象的解釋。
  2>test(str),判斷字串str是否匹配表示式,返回一個布林值。例如:
  var regx=/user/d+/g;
  var flag=regx.test(“user12dd”);
  flag的值為true。
  3)String物件方法
  1>match(expr),返回與expr相匹配的一個字串陣列,如果沒有加引數g,則返回第一個匹配,加入引數g則返回所有的匹配
  例子:
  var regx=/user/d/g;
  var str=“user13userddduser345”;
  var rs=str.match(regx);
  rs的值為:{user1,user3}
  2>search(expr),返回字串中與expr相匹配的第一個匹配的index值。
  例子:
  var regx=/user/d/g;
  var str=“user13userddduser345”;
  var rs=str.search(regx);
  rs的值為:0
  3>replace(expr,str),將字串中匹配expr的部分替換為str。另外在replace方法中,str中可以含有一種變數符號$,格式為$n,代表匹配中被記住的第n的匹配字串(注意小括號可以記憶匹配)。
  例子:
  var regx=/user/d/g;
  var str=“user13userddduser345”;
  var rs=str.replace(regx,”00”);
  rs的值為:003userddd0045
  例子2:
  var regx=/u(se)r/d/g;
  var str=“user13userddduser345”;
  var rs=str.replace(regx,”$1”);
  rs的值為:se3userdddse45
  對於replace(expr,str)方法還要特別注意一點,如果expr是一個表示式物件則會進行全域性替換(此時表示式必須附加引數g,否則也只是替換第一個匹配),如果expr是一個字串物件,則只會替換第一個匹配的部分,例如:
  var regx=“user”
  var str=“user13userddduser345”;
  var rs=str.replace(regx,”00”);
  rs的值為: 0013userddduser345
  4>split(expr),將字串以匹配expr的部分做分割,返回一個數組,而且表示式是否附加引數g都沒有關係,結果是一樣的。
  例子:
  var regx=/user/d/g;
  var str=“user13userddduser345”;
  var rs=str.split(regx);
  rs的值為:{3userddd,45}
   4,表示式相關屬性
  1)表示式相關屬性,是指和表示式相關的屬性,如下面的形式:
  var regx=/myexpr/;
  var rs=regx.exec(str);
  其中,和表示式自身regx相關的屬性有兩個,和表示式匹配結果rs相關的屬性有三個,下面將逐一介紹。
  2)和表示式自身相關的兩個屬性:
  1>lastIndex,返回開始下一個匹配的位置,注意必須是全域性匹配(表示式中帶有g引數)時,lastIndex才會有不斷返回下一個匹配值,否則該值為總是返回第一個下一個匹配位置,例如:
  var regx=/user/d/;
  var rs=regx.exec(“sdsfuser1dfsfuser2”);
  var lastIndex1=regx.lastIndex;
  rs=regx.exec(“sdsfuser1dfsfuser2”);
  var lastIndex2=regx.lastIndex;
  rs=regx.exec(“sdsfuser1dfsfuser2”);
  var lastIndex3=regx.lastIndex;
  上面lastIndex1為9,第二個lastIndex2也為9,第三個也是9;如果regx=/user/d/g,則第一個為9,第二個為18,第三個為0。
  2>source,返回表示式字串自身。例如:
  var regx=/user/d/;
  var rs=regx.exec(“sdsfuser1dfsfuser2”);
  var source=regx.source;
  source的值為user/d
  3)和匹配結果相關的三個屬性:
  1>index,返回當前匹配的位置。例如:
  var regx=/user/d/;
  var rs=regx.exec(“sdsfuser1dfsfuser2”);
  var index1=rs.index;
  rs=regx.exec(“sdsfuser1dfsfuser2”);
  var index2=rs.index;
  rs=regx.exec(“sdsfuser1dfsfuser2”);
  var index3=rs.index;
  index1為4,index2為4,index3為4,如果表示式加入引數g,則index1為4,index2為13,index3會報錯(index為空或不是物件)。
  2>input,用於匹配的字串。例如:
  var regx=/user/d/;
  var rs=regx.exec(“sdsfuser1dfsfuser2”);
  var input=rs.input;
  input的值為sdsfuser1dfsfuser2。
  3>[0],返回匹配結果中的第一個匹配值,對於match而言可能返回一個多值的數字,則除了[0]外,還可以取[1]、[2]等等。例如:
  var regx=/user/d/;
  var rs=regx.exec(“sdsfuser1dfsfuser2”);
  var value1=rs[0];
  rs=regx.exec(“sdsfuser1dfsfuser2”);
  var value2=rs[0];
  value1的值為user1,value2的值為user2
   5,實際應用
  1)實際應用一
  描述:有一表單,其中有一個“使用者名稱”input域
  要求:漢字,而且不能少於2個漢字,不能多於4個漢字。
  實現:
  <script>
  function checkForm(obj){
  var username=obj.username.value;
  var regx=/^[/u4e00-/u9fa5]{2,4}$/g
  if(!regx.test(username)){
  alert(“Invalid username!”);
  return false;
  }
  return true;
  }
  </script>
  <form name=“myForm”onSubmit=“return checkForm(this)”>
  <input type=“text” name=“username”/>
  <input type=“submit” vlaue=“submit”/>
  </form>
  2)實際應用二
  描述:給定一個含有html標記的字串,要求將其中的html標記去掉。
  實現:
  <script>
  function toPlainText(htmlStr){
  var regx=/<[^>]*>|<//[^>]*>/gm;
  var str=htmlStr.replace(regx,"");
  return str;
  }
  </script>
  <form name=“myForm”>
  <textarea id=“htmlInput”>