1. 程式人生 > >正則表示式基礎及應用

正則表示式基礎及應用

正則表示式,按照我自己的理解,其實就是字串的操作校驗,所以先介紹關於字串操作的知識:

第一個是search 查詢搜尋:

var str='abcdef'
alert(str.search('b'))    
//找到對應的位置 下標從0開始  沒有找到對應的 返回是-1

第二個是substring 字串擷取

var str='abcdef' 

//第一個引數是起點  第二個引數是終點  擷取的範圍不包括終點的值----------
alert(str.substring(2,5)) 

//從起點開始 範圍包括起點
alert(str.substring(1)) 

第三個是 charAt  返回字串的某一位 下標從0開始

var str='abcdef'
//charAt 返回字串的某一位  下標從0開始
alert(str.charAt(3))

第四個是  split  切割後存放到陣列

 var text = '1995-11-20'
 var arr = text.split('-')
 alert(arr)

下面舉例通過字串操作的方法,將一串字串中的數字提取出來:

 var str = '12 fff 87 er334 233 -=-=fa80';
 var arr=[];
 var tmp = '';
 //迴圈字串
 for(var i=0;i<str.length;i++){
      //判斷字串中的每一位是否為數字 如果是的話就存進到tmp中 然後推進到arr陣列中
      if(str.charAt(i)>='0' && str.charAt(i)<='9'){
           tmp +=str.charAt(i) 
      }else{
           if(tmp){
              arr.push(tmp);
                  tmp=''
              }
           }
 }
 if(tmp){
     arr.push(tmp);
     tmp=''
 }
 alert(arr)

可以看出 這種方法,程式碼量多,並且只是一個小功能而已,那麼如果用正則表示式去匹配呢?


正則表示式對字串的操作

正則表示式的 search 字串搜尋

var re = new RegExp('a');//獲取一個字串

var re = new RegExp('a','i');//獲取一個字串 忽略大小寫

var str = 'hdjoAAAshd ';

alert(str.search(re));

 

 

正則表示式的 match 獲取匹配的專案 把所有匹配的東西都提取出來

\d 表示一位數字 如果要匹配多位數 就要多一個\d 
g表示匹配對應得上的全部專案 +代表若干個 就是多少都可以

 var re = /\d+/g;

 var str ='adsf 34 656 cvs33'

 alert(str.match(re));

//正則表示式的 replace 替換所有匹配項

var str = 'abc aaa erw'

var re = /a/g;

alert(str.replace(re,'0'));//將匹配項替換成0

正則表示式的量詞

{n} 代表n個 {n,m} 最少n個,最多m個 {n,}最少m個,最多不限

校驗電話號碼

/[1-9]\d{7}/

校驗QQ號最少五位數 最多11位數 且開頭數字不為0

/[1-9]\d{4,10}/

校驗固話

比如 010-87496698-分機號 前面010不一定需要 規則加上?號 表示可有可無

分為三塊 (0\d{2,3}-)? 代表區號 (-\d{1,5})?表示分機號 加上問號都是可有可無

/(0\d{2,3}-)?[1-9]\d{7}(-\d{1,5})?/

+號表示 至少1個 最多不限 {1,}

*號表示 至少0個 最多不限 {0,}

 

 

正則表示式的量詞

方括號作用是 裡面的值 任選一個 和外部的字元結合 進行匹配

[0-9] 0到9選一個 等價於 \d [a-z] a到z選一個

[^a-z] 除了字母 其他都要 [^a-z0-9] 除了數字和字母 其他都要

var str = 'apc vpc dpc gpc';

var re = /[ad]pc/g;

alert(str.match(re));

 

 

正則表示式的轉義字元

\d 代表數字 等價於  [0-9]            \D 代表除了數字以外的  等價於 [^0-9]

\w 代表英文數字下劃線 等價於[a-z0-9_]             \W 代表除了英文數字下劃線以外的  等價於 [^a-z0-9_]

\s 代表空白字元  不可列印不可顯示的字元             \D 代表非空白字元 

. 代表任意字元

 

 

 

接下來看一些基礎應用例項:

第一個:敏感詞過濾: 在第一個文字框輸入敏感詞 點選按鈕過濾 將過濾後的內容 體現在第二個文字框

正則的寫法就是就是 匹配字有 背景 大會上 但收到貨 都要變成 ***

<body>
        <textarea  id="txt1" cols="40" rows="10"></textarea><br>
        <input type="button" id="btn" value="過濾">
        <textarea  id="txt2" cols="30" rows="10"></textarea>

        <script>
            window.onload=function(){
                var oTxt1 = document.getElementById('txt1');
                var oTxt2 = document.getElementById('txt2');
                var oBtn = document.getElementById('btn')
                
                oBtn.onclick=function(){
                    //編寫規則
                    var re =/背景|大會上|但收到貨/g;   //  |代表或的意思
                    //將敏感詞過濾成*號
                    oTxt2.value = oTxt1.value.replace(re,'***')

                }

            }
        </script>
    </body>

第二個:過濾html標籤: 在第一個文字框輸入含html標籤的內容 點選按鈕過濾 將過濾後的內容 體現在第二個文字框

正則表示式就是將html標籤替換成空字元  :

<body>
        <textarea  id="txt1" cols="40" rows="10"></textarea><br>
        <input type="button" id="btn" value="過濾">
        <textarea  id="txt2" cols="30" rows="10"></textarea>
        <script>
            window.onload=function(){
                var oTxt1 = document.getElementById('txt1');
                var oTxt2 = document.getElementById('txt2');
                var oBtn = document.getElementById('btn')
                
                oBtn.onclick=function(){
                    //編寫規則
                    var re =/<[^<>]+>/g;   //  
                    //將敏感詞過濾成*號
                    oTxt2.value = oTxt1.value.replace(re,' ')

                }

            }
            


            
            
        </script>
    </body>

第三個:校驗郵箱,在輸入框輸入一個郵箱,點選驗證,通過正則表示式的規則來判斷輸入的郵箱是否合法:

<body>
        <input type="text" id="txt"/><br>
        <input type="button" id="btn" value="檢驗"/>
        <script>
            //郵箱校驗
            window.onload=function(){
                var oTxt = document.getElementById('txt');
                var oBtn = document.getElementById('btn');
                

                oBtn.onclick=function(){

                    // 郵箱組成  一串 英文數字下劃線 加上 @ 加上 一串數字英文  加上.(需要轉義)  加上一串英文  不區分大小寫
                    //並且開頭到結尾都必須遵守這個規則
                    //開頭  ^  結尾  $
                    var re = /^\[email protected][a-z0-9]+\.[a-z]+$/i
                    //正則檢驗 test
                    if(re.test(oTxt.value)){
                        alert('合法郵箱')
                    }else{
                        alert('不合法')
                    }
                }
            }
            


        </script>
    </body>

如果覺得有用的朋友可以加個關注,點個贊哦,歡迎交流!