01學習筆記-正則表達式(基礎知識)

相關連接：00學習筆記-正則表達式(實用總結)

第一章、概述

正則表達式是對字符串操做的一種邏輯公式，就是用事先定義好的一些特定字符、及這些特定字符的組合，組成一個「規則字符串」，這個「規則字符串」用來表達對字符串的一種過濾邏輯。

-      正則表達式簡寫爲regex、regexp、RE

-      正則表達式經常使用於字符串操做，以及表單的輸入驗證

-      正則表達式是用某種模式去匹配一類字符串的公式，是一種強大的字符串匹配工具

-      正則表達式能夠理解爲生產流水線上一種標準的格式規範，做爲一個標準的模具，當須要被驗證的字符串符合這種格式規範就會經過檢驗，不符合則被過濾掉

第二章、格式

正則表達式的定義有兩種： 顯式定義、隱式定義

        顯式定義：

            　　   使用new關鍵字來定義，其中的正則表達式必須使用引號包裹，還要注意字符串的轉義。

       　　　　語法：  var 變量名 =  new RegExp( 「 正則表達式 」 );

　　　　　　　　　  var 變量名 =  new RegExp( 「 正則表達式 」，「選項」 );

                      例：　  var re = new RegExp( 「[a-z]」 ，」i」 );

        隱式定義：

              　　不須要new和引號，只須要在表達式先後都加 /

      　　　　 語法：   var 變量名 = / 正則表達式 /；

　　　　　　　　　   var 變量名 = / 正則表達式 /選項；

      　　　　 例：　　var re = /[a-z]/i;

　　　　　　*---------------------------------------*

　　　　　　　　選項（可選）：

  　　　　　　　　     i : 忽略大小寫

   　　　　　　　　    g : 全局匹配

　　　　　　　　　　gi: 既全局匹配，又忽略大小寫

　　　　　　*---------------------------------------*

** 在JS中，正則表達式是由一個RegExp對象表示的，利用RegExp對象來完成有關正則表達式的操做和功能

第三章、正則匹配驗證

　　re.test(str);      //用於判斷某字符串str是否匹配須要的正則表達式re模式

　　　　語法：正則表達式 . test( 字符串 )

              　　若是符合，返回true ;不然返回false

　　　　例：    

1 var oRe = /\d{6}/;
2 var oStr0 = '666666';
3 var oStr1 = '332od';

4 alert(oRe.test(oStr0));    //返回true
5 alert(oRe.test(oStr1));    //返回false

 

第四章、匹配規則

a)普通字符

　　單個出現,前面沒有轉義符號的的a~z、0~9

　　普通字符的出現，就意味着待驗證的字符串的相同位置必須有相同的普通字符

　　例：/h[123456]/   表示h1~h6

b)      元字符

　　*** 在元字符中，字母大寫表示非

　　　　好比：\d表示匹配數字， \D表示匹配非數字

1 \d      //匹配數字，至關於[0-9]
2 \D      //匹配非數字，至關於[^0-9]
3 \w      //匹配字母/數字/下劃線
4 \W      //匹配非（字母/數字/下劃線）的字符
5 \s      //匹配空白符，包括(空格/換行符/製表符tab)
6 \S      //匹配非空白符
7 .       //匹配除了換行符之外的字符
8 [ ]     //匹配符合方括號裏面條件的字符
9 [^ ]    //匹配不符合方括號裏面條件的字符

 

** []拓展：

　　在正則中，[ ] 表示匹配方括號中的任意一個字符就算匹配成功，也能夠說，[]就表明一個字符，這個字符符合[]裏任一的條件就可

　　1. [abc]

　　　　表示或者：即此處出現而且只出現abc中的一個，只使用其中一個字符，在這裏邊不須要空格或，等間隔符號

　　　　例：　　/ A[abc]B / : 等價於/A(a|b|c)B/，也等價於/ AaB|AbB|AcB /

　　2. [0-9] / [a-z] / [0-9a-z]

　　　　範圍：表明從0到9每個數字至關於\d / 從a到z的每個字母 /  全部數字/字母

　　　　** []只表示取值範圍，取值個數只有一個

　　　　**須要注意的是[]裏面無論有多少規則，可是在匹配字符串的時候，[]規則對應的只是響應位置上的一位字符的匹配

　　　　例：[0-9] 表明數字0到9中的一個

　　3. [ ^ ]

　　　　非 : 除了，

　　　　要注意的是，一個[^]是一個總體，表明一個字符，也就是

　　　　[ ^abc ] : 意爲[ ^a ]、[ ^b ]、[ ^c ],這個字符不能是a,也不能是b，也不能是c

　　　　必定不要認爲[^ab]等於[^a]或[b]，這個是錯誤的

       　　應用：小說採集器—自定義innerText方法去掉標籤，將HTML變成文本             

oBtn.onclick = function (){
        var re = /<[^<>]+>/g;
       oTxt2.value = oTxt1.value.replace(re,' ');
}    

 

　　　　　

　*** 在這裏必定要有[ ^<> ],這是爲了不因爲第一個<和最後一個>致使全部東西都清空，也就是避免<>裏面嵌套着標籤

c)      鏈接符

　　-做爲鏈接符來表示一種範圍

1 [0-9]            //匹配數字，至關於/d
2 [a-z]            //匹配小寫字母
3 [A-Z]            //匹配大寫字母
4 [0-9a-zA-Z]   　　//匹配數字或英文字母    

 

d)      限定符/量詞

限定某個或某一類字符出現的次數，當表示一類字符的重複次數的時候，字符之間是連續的，不能被其餘字符隔開

 

1 +    　  //a+　　 　　表示+前一個字符a必須出現至少一次纔算匹配成功 　　　　（1~）次
2 *　　　　 //a*　　 　　表示*前一個字符*出不出現，出現多少次都行 　　　　　　（0~）次
3 ?　　　　 //a? 　　　　表示a能夠出現，也能夠不出現，但出現最多出現一次　　　（0~1）次
4 {n}　　　 //a{n}　　  a必須出現n次 　　　　　　　　　　　　　　　　　　　　（n）次
5 {n,}　　  //a{n,}　 　a至少出現n次 　　　　　　　　　　　　　　　　　　　　（n~）次
6 {,m}　　　//a{,m}　　 a最多出現m次　　　　　　　　　　　　　　　　　　　　　（~m）次
7 {n,m}　 　//a{n,m}　  a至少出現n次，最多m次 　　　　　　　　　　　　　　　（n~m）次

 

 例：

　　匹配qq號： /1-9\d{5,10}/ ,表示查找一串字符，第一位是1到9中的一個數字，後面跟着5到10個數字

 ** 要注意的是：限定符限定的字符是連續的，

　　即 go{2} 能夠匹配goo，但不能匹配goao

e)      定位符

定位符用於限定某些字符出現的位置

正則表達式的匹配規則是，只要有一部分符合就算匹配成功，也就是說咱們要匹配一段字符串，這個時候開頭和結尾若是多了其餘的字符也算匹配成功，因此這時候就用到限定行首行尾,通常用於校驗以及去首尾空格的狀況

正確的語法是：  /^a正則$b/   這個正則表達式，開頭必須是a，結尾必須是b

1 ^    /*  /^abc/ 限定開始的字符必須是abc,也就是整個表達式規則對應的字符串部分必須在待驗證字符串的開頭  */
2 $    /*  /abc$/ 限定結尾的字符必須是abc，也就是整個表達式規則對應的字符串部分必須在待驗證字符串的末尾  */
3 \b   /*  \b表明這裏有一個單詞邊界   */
4 \B   /*  \B表明這裏不是單詞邊界   */

 

**  ^在[]中表明非，在外面就是表明行首

舉例：

對於^,  /^abc/能夠經過的是：abcd,可是dabc是不能夠的

對於$,  /abc$/能夠經過的是：dabc,可是abcd是不能夠的

**關於\b和\B

這兩個定位符主要用於英文，最經常使用的就是經過/\b...\b/來匹配一個英文單詞

*-*單詞邊界：

　　所謂的單詞邊界是單詞字母和單詞分隔符（通常指空白符）中間位置，也就是說單詞邊界就表明單詞字母和空白符相鄰

好比：hello world,咱們使用！表明單詞邊界來看就是：hello! !world

因此：對於：acb cab bac 來講

　　 /c\b/ 能夠匹配到 bac

　　/\bc/　能夠匹配到cab

　　/\b[a-z]c[a-z]\b/ 能夠匹配到acb

　　/\Bc/和/c\B/均可以匹配到acb,由於在單詞內部，c的兩邊都不是邊界

f)       轉義字符

對於特殊字符：$  (   )   *   +  .   [  ]  ?  /  ^  {  }  |  在正則表達式中都有特殊的含義，若是想要將他做爲原有含義使用，那麼都須要進行轉義，轉義方法爲在前面加一個\

若是要轉義的特殊字符是\，那麼久使用\\

例如：go+中的+表明重複、go\+中通過轉義後的+表明就是單純的+

**特殊的，咱們知道定義一個正則的語法是//包裹

var abc = / \d{6} /;

使用另外一種寫法爲：

var abc = new RegExp(「\\d{6}」);

** 會發現這裏使用的是\\而不是\

其實使用new關鍵字定義正則表達式，RegExp對象是一個字符串，所以這裏必須使用JavaScript的轉義字符（不一樣於正則表達式轉義字符）

g)      分組符

　　使用（）將某部分字符做爲一個總體進行操做

　　對於/[abc]{2}意思是匹配含有abc中任意兩個字符組合的字符串

　　對於/(abc){2}意思是匹配含有abcabc的字符串

h)      選擇符

　　常和分組符配套使用

　　ab|cd 這樣是匹配ab或者cd,
　　而a（b|c）d匹配的abd或者acd

第五章、與字符串相結合

a)      由字符串操做引入

　　1.str.search(Str);查找

　　　　返回一個數字，這個數字是目標字符串第一次出現的位置

　　　　若是字符串不包含目標字符串，就返回-1

　　2.str.substring(m);剪切

　　　　返回從m一直到最後一個字符的一段字符串

　　　　str.substring(m,n);剪切

　　　　返回從m到n-1的一段字符串

　　3.str.charAt(m);

　　　　返回第m位的字符

　　4.str.split(Str);

　　　　將目標字符串以Str爲分隔符切開塞入數組並返回數組

b)      將字符串操做與正則結合

　　　　a)      str.search(Str);       

　　　　　　//該方法不僅能夠查找字符串，同時能夠查找正則表達式

　　　　例：

　　　　　　var re = /\d/;

　　　　　　str.search(re);

　　　　　　**應用：

　　　　　　window.navigator.userAgent       這句話的意思是當前瀏覽器的種類和版本，裏面雜亂的東西不少

 　　　　　　

　　　　　　這個時候能夠經過userAgent配合正則來獲取並判斷瀏覽器的類型

b)      str.match()

　　　　//匹配

　　　　**  挑出全部數字

 　　　　例： var Str = /\d+/g;

　　　　　　　alert(str.match(Str));

c)      str.replace()    

　　　　//替換、過濾

　　　　str.replace( ‘a’ , ‘T’);            //這句話本意是說將a都替換爲T，可是這個是有問題的，若是str中的a不止一個，結果被替換的卻只有第一個

　　　　解決：

　　　　str.replace(/a/g , ‘T’);

　　　　** 若是咱們忽略大小寫，將全部的a/A改成T，那麼str.replace(/a/gi , ‘T’);或者str.replace(/a/ig , ‘T’);均可以。

　　簡單實例：敏感詞過濾： 　　　

1 oBtn.onclick = function (){
2    var re = /你丫的|你妹的|你大爺的/g;
3    oTxt2.value = oTxt1.value.replace(re,"***");          
4 }

 

第六章、相關應用

a)      匹配HTML標籤

　　<[a~zA~Z][^>]*>

b)      匹配windows系統的名稱

　　Windows\s*((95)|(98)|(2000)|(ME)|(XP)|(7)|(8)|(10)) 

d)      校驗郵箱

 

最終：/^ \w+@[a-z0-9]+\.[a-z]{2,4} $/

e)      去首尾空格

　　/^\s+/   去掉行首的空格

　　/\s+$/   去掉行尾的空格

　　/^\s+|\s+$/g    去掉行首行尾的空格

f)       匹配中文

　　/[\u4e00-\u9fa5]/     全部漢字的範圍

g)      完美版getByClass

　　**    單詞邊界       \b    使用兩個\b包裹的是單獨一個完整的單詞

 1 function getByClass(oParent,sClass){
 2 
 3   var aEle = oParent.getElementsByTagName('*');
 4 
 5   var aResult = [];
 6 
 7   var re = new RegExp('\\b'+sClass+'\\b','i'); 
 8 
 9   for(var i=0;i<aEle.length;i++){
10 
11      if(re.test(aEle[i].className)){
12 
13         aResult.push(aEle[i]);
14 
15      }
16 
17   }
18 
19   return aResult;
20 
21 }
22 
23 //例：：
24 //var aTar = getByClass(oUl,'box');
25 
26 //for(var i=0;i<aTar.length;i++){
27 
28 // aTar[i].style.background = 'red'; 
29 //}