1. 程式人生 > >正則表達式(輕松入門級)

正則表達式(輕松入門級)

構造 day 過濾 文件 col 轉義符 pla value 簡單

前言:正則表達式又稱為火星文,因為視覺上讓人感覺很復雜。本文將會詳細介紹正則表達式,初學者只要認真閱讀過,定會有收獲。

1、正則的概念

  正則表達式(regular expression)是一個描述字符規則的對象。可以用來檢查一個字符串是否含有某個子字符串,將匹配的子字符串替換或者從某個字符串中取出符合某個條件的子串等。

  為什麽要用正則:前端往往有大量的表達數據校驗工作,采用正則表達式會使得數據校驗的工作量大大減輕。常用效果(郵箱、手機號、身份證號等等)。

2、創建方式

  第一種方式:

// 通過構造函數的方式
  var oReg = new RegExp(‘study‘, ‘i‘);

  第二種方式:

// 通過語法糖(簡寫)的形式
  var oReg = /study/i;

  修飾符:

  i :表示忽略大小寫。

  g:表示全局匹配,查找所有匹配而非在找到第一個匹配後停止。

  m:多行匹配。

3、正則對象方法

  test:檢索字符串中指定的值。返回true或false。

  exec:用於檢索字符串中的正則表達式的匹配。返回一個數組,其中存放匹配的結果,如果未找到匹配,則返回值為null。

  下面我們來個舉個列子:

  // 首先我來看test
  //我們要在字符串str中找出符合Reg的規則的子字符串,符合則返回true,不符合則返回false
    var
str = ‘Good good study, Day day up! Good good study‘; var Reg1= /good/ig; var Reg2= /goood/ig; console.log(Reg1.test(str));//true console.log(Reg2.test(str));//false

  

    // 接下來我們再來看 exec
    //用於檢索字符串中的正則表達式的匹配。返回一個數組,其中存放匹配的結果,如果未找到匹配,則返回值為null
    var str = ‘Good good study, Day day up! Good good study‘;
    
var Reg= /good/ig; console.log(Reg.exec(str));//["Good", index: 0, input: "Good good study, Day day up! Good good study"] console.log(Reg.exec(str));//["good", index: 5, input: "Good good study, Day day up! Good good study"] console.log(Reg.exec(str));//["Good", index: 29, input: "Good good study, Day day up! Good good study"] console.log(Reg.exec(str));//["good", index: 34, input: "Good good study, Day day up! Good good study"] console.log(Reg.exec(str));//null //註:如果沒有指定g修飾符,那麽每次匹配都是從頭開始匹配,如果指定g修飾符以後,下次匹配則從上次匹配的結束位置開始匹配。

4、字符串函數

  search:檢索與正則表達式相匹配的值,返回字符串中第一個與正則表達式相匹配的子串的起始位置,如果沒有找到則返回-1。

  match :找到一個或多個正則表達式的匹配。

  replace:替換與正則表達式匹配的子串。

  split :把字符串分割為字符串數組。

  單看概念不容易理解,看看下面的小實列就一目了然

 
   var
str = ‘Good good study, Day day up! Good good study‘; var Reg= /study/ig; console.log(str.search(Reg));//10 console.log(str.match(Reg));// ["study", "study"] console.log(str.replace(Reg,‘aaaa‘));//Good good aaaa, Day day up! Good good aaaa console.log(str.split(Reg));//["Good good ", ", Day day up! Good good ", ""]

5、正則表達式構成

  正則表達式是由普通字符(列如字符a到z)以及特殊字符(稱為元字符)組成的文字模式。正則表達式作為一個模板,將某個字符模式與所搜索的字符串進行匹配。

  ①元字符---限定符:

  *:匹配前面的子表達式零次或多次。

  +:匹配前面的子表達式一次或多次。

  ?:匹配前面的子表達式零次或一次。

  {n}:匹配確定n次。

  {n,}:至少匹配n次。

  {n,m}:最少匹配n次且最多匹配m次。

  實列如下:

var str =‘gd god good goood gooood‘;

     var Reg1 =/go*d/ig; //*:匹配前面的子表達式零次或多次
     console.log(str.match(Reg1));//["gd", "god", "good", "goood", "gooood"]


     var Reg2 =/go+d/ig; //+:匹配前面的子表達式一次或多次
     console.log(str.match(Reg2));//["god", "good", "goood", "gooood"]


     var Reg3 =/go?d/ig; //?:匹配前面的子表達式零次或一次
     console.log(str.match(Reg3));//["gd", "god"]


     var Reg4 =/go{2}d/ig; //{n}:匹配確定n次
     console.log(str.match(Reg4));//["good"]


     var Reg5 =/go{2,}d/ig; //{n,}:至少匹配n次
     console.log(str.match(Reg5));//["good", "goood", "gooood"]
     

     var Reg6 =/go{1,3}d/ig; //{n, m}:最少匹配n次且最多匹配m次
     console.log(str.match(Reg6));//["god", "good", "goood"]

 

  ②元字符---字符匹配符:

  字符匹配符用於匹配某個或某些字符。

  [xyz]:字符集合。匹配所包含的任意一個字符。

  [^xyz]:負值字符集合。匹配未包含的任意字符。

  [a-z]:字符範圍。匹配指定範圍內的任意字符。

  [^a-z]:負值字符範圍。匹配任何不在指定範圍內的任意字符。

  \d:匹配一個數字字符。

  \D:匹配一個非數字字符。

  \w:匹配包含下劃線的任何單詞字符。等價於[a-z0-9A-Z_]

  \W:匹配任何非單詞字符。等價於[^a-z0-9A-Z_]

  \s:匹配任何空白字符。

  \S:匹配任何非空白字符。

  ·:匹配除”\n”之外的任何單個字符。

  實列如下:

     var str = ‘aiod acd abd add aed afd ahd $%#@ 12345678 asdfghh‘;

     var Reg1 = /a[abc]d/ig;        //[xyz]:字符集合。匹配所包含的任意一個字符
     console.log(str.match(Reg1)); //["acd", "abd"]

     var Reg2 = /a[^abc]d/ig;       //[^xyz]:負值字符集合。匹配未包含的任意字符
     console.log(str.match(Reg2)); // ["add", "aed", "afd", "ahd", "asd"]

     var Reg3 = /a[a-z]d/ig;        //[a-z]:字符範圍。匹配指定範圍內的任意字符
     console.log(str.match(Reg3)); //["acd", "abd", "add", "aed", "afd", "ahd", "asd"]

     var Reg4 = /a[^a-e]d/ig;      //[^a-z]:負值字符範圍。匹配任何不在指定範圍內的任意字符
     console.log(str.match(Reg4)); //["afd", "ahd", "asd"]

     var Reg5 = /\d+/ig;             //  \d:匹配一個數字字符。
     console.log(str.match(Reg5));  //["12345678"]

     var Reg6 = /\D+/ig;            //    \D:匹配一個非數字字符
     console.log(str.match(Reg6));  //["aiod acd abd add aed afd ahd $%#@ ", " asdfghh"]

     var Reg7 = /\w+/ig;            //   \w:匹配包含數字,字母,下劃線的任何單詞字符,等價於[a-z0-9A-Z_]
     console.log(str.match(Reg7));  //["aiod", "acd", "abd", "add", "aed", "afd", "ahd", "12345678", "asdfghh"]

     var Reg8 = /\W+/ig;            //    \W:匹配任何非單詞字符。等價於[^a-z0-9A-Z_]
     console.log(str.match(Reg8));  // [" ", " ", " ", " ", " ", " ", " $%#@ ", " "]

     var Reg9 = /\s+/ig;            //    \s:匹配任何空白字符
     console.log(str.match(Reg9));  //[" ", " ", " ", " ", " ", " ", " ", " ", " "]

     var Reg10 = /\S+/ig;            //    \S:匹配任何非空白字符
     console.log(str.match(Reg10)); //["aiod", "acd", "abd", "add", "aed", "afd", "ahd", "$%#@", "12345678", "asdfghh"]

  

  ③元字符---定位符:

  定位符可以將一個正則表達式固定在一行的開始或結束,也可以創建只在單詞內或只在單詞的開始或結尾處出現的正則表達式。  

  ^:匹配輸入字符串的開始位置。

  $:匹配輸入字符串的結束位置。

  \b:匹配一個單詞邊界,也就是單詞和空格間的位置。

  \B:匹配非單詞邊界。

// ^:匹配輸入字符串的開始位置。
    var str  =‘123456‘;  
    var Reg1  =/^\d+/ig;
    var Reg2  =/\d/ig;
    console.log(Reg1.test(str));//true
//$:匹配輸入字符串的結束位置。
    var str =‘abcd789‘;
    var Reg =/.+\d{3}$/ig;
    console.log(Reg.test(str));//true
// \b:限定單詞以什麽開頭和結尾,\B:限定單位不以什麽開頭和結尾
var str = ‘good ogoodm goods sgoods‘;

var reg1 = /\bg\w+/g;
var reg2 = /\w+d\b/g;
console.log(str.match(reg1));//["good", "goods"]
console.log(str.match(reg2));//["good"]
var reg3 = /\Bg\w+/g;
var reg4 = /\w+d\B/g;
console.log(str.match(reg3));//["goodm", "goods"]
console.log(str.match(reg4));//["ogood", "good", "sgood"]

  ④元字符---轉義符

  \:用於匹配某些特殊字符(遇到特殊字符需要用反斜杠轉義)

 // 特殊字符:. + * ? {} [] ^ $ \

    var str = ‘++++++-*/%‘;
    var oReg = /\++/g;
    console.log(str.match(oReg));//["++++++"]

  

  ⑤元字符---選擇匹配符

  |:可以匹配多個規則

// 選擇匹配符
var str = ‘gooqd gaawd gwwsd‘;
var oReg = /g(ooq|aaw)d/g;
console.log(str.match(oReg));// ["gooqd", "gaawd"]

  接下來是常用簡單型檢測案例

  1、手機號檢測

// 下面是國內 13、15、18開頭的手機號正則表達式。(可根據目前國內收集號擴展前兩位開頭號碼)
var reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$/

  2、檢測中文

//字符串只能是中文
var oReg = /^[\u2E80-\u9FFF]+$/;

  3、身份證檢測

// 18位身份證檢測
 var oReg = /^\d{17}[\dxX]$/;

  4、日期檢測

//日期檢測
 var oReg = /^\d{4}(\-|\/)\d{1,2}\1\d{1,2}$/;

  5、去除首尾空格

// 去除首尾的空格
var sVal = oSpace.value;
var oReg = /^\s+(\S*)\s+$/;
console.log(sVal.replace(oReg, ‘$1‘));

  6、檢測文件格式

//檢測文件格式
var oReg = /.+\.(jpg|jpeg|png|gif)$/i;

  7、檢測郵編

//檢測郵編
var oReg = /^\d{6}$/;

  8、過濾

// 過濾
var str = ‘小明說小強是混蛋,小強說他不是混蛋‘;
str.replace(/混蛋/g, ‘**‘);

  

正則表達式(輕松入門級)