這篇只用一個實例就講清楚了正則表達式的所有常用語法

PostScript JavaScript 教育 小鄭搞碼事 2017-06-04

接著上篇,這篇我們以一個手機號碼的匹配進化歷程來學習正則的相關知識點。記住了,我們要匹配一個手機號(用正則表達式),整篇就是幹這個事。目的是學習正表達式的使用。

這篇只用一個實例就講清楚了正則表達式的所有常用語法

假設我們需要匹配的手機號為:18857012018

一、字符直接量:匹配自身

/18857012018/.test(“ 18857012018”);

// false

/18857012018/.test(“ 18857012018”);

// true

/18857012018/.test(“ui18857012018dd”);

// true

正則表達式在匹配時,只要輸出匹配內容就返回true,不考慮前面的ui和後面的dd。最後這種情況顯然不是我們想要的。

如何精準匹配了,接著往下看。

二、錨點:指定匹配位置

1、^匹配起始位置

/^http:/.test(“http://www.163.com”);

// true

/^http:/.test(“ahttp://www.163.com");

//false

/^http:/.test(“https://www.163.com");

//false

2、$匹配結尾位置

/.jpg$/.test("1.jpg"); //true

/.jpg$/.test("1.jpg png"); //false

/.jpg$/.test("1.png"); //false

/.jpg$/.test(“regexp.png"); //false

3、\b匹配一個單詞邊界

正則表達式的“匹配”有兩種概念,一種是匹配字符,一種是匹配位置。這裡所謂的邊界就是匹配位置。

/\bis\b/.test(“this"); //false

/\bis\b/.test("that is reg”); //true

/\bis\b/.test(“thatisreg"); //false

/\B[Ss]cript/; // 匹配非邊界

最後一個正則表達式/\B[Ss]cript/能夠與”JavaScript”和”/postscript”匹配,但不與”script”與”Script”匹配,因為\B表示非邊界匹配。

講清楚上面三點之後,現在我們來對一開始提到的那個電話號碼的例子進行進一步的改造。改造之後是這樣的:

/^18857012018$/.test(“18857012018”); //true

/^18857012018$/.test(“ui18857012018dd");//false

/^18857012018$/.test(“13712345674");//false

這樣看,是不是解決了號碼前後有字符不匹配的情況,但是細心的同學會發現, 這個正則只能識別這個標準的手機號碼,能不能用一種電話號碼格式識別所有的電話號碼了?如果能,那這個表達式不就更通用了嘛。

回答是有的,不急,繼續往下看

三、字符類:匹配一類字符中的一個

  1. [abc]:匹配a或b或c。

  2. [0-9]:匹配0到9之間的一個數字(只要字符串中有一個數字就為true,定義是匹配字符串中是否有數字)。

  3. [^0-9]:匹配非數字一個字符。

  4. [a-z]:匹配有一個字母(只要字符串有一個字母就為true,定義是匹配字符串中是否有字符)。

  5. .:匹配任一字符(換行符除外)。

語法應用舉例,比如:

/[0-9]/.test(“123”) //true

/[0-9]/.test(“asd") //false

/[^0-9]/.test(“asd") //true

/[a-z]/.test(“asd") //true

/./.test(“allen") //true

/./.test(“12") //true

/[a-z]/.test('12a3') // true

/[a-z]/.test('123') // false

有了這些為基礎,上面的實例我們就可以進一步改進,電話號碼中除了第一位是1,其它每一位都是一個0到9之間的任意數字。所以我們可以這樣改進:

/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test("13762571094");//true

/^1[0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9][0-9]$/.test(“13712345678");//true

此刻是不是感覺又好了一點,不過,這顯然太長了呢,繼續往下看。

關於元字符的概念這裡就不詳細了,這裡列舉一些元字符,來看看它們在與正則中都表示什麼特殊意義。

  1. ^:開頭、$:結尾、\b:邊界。

  2. \d:[0-9]。\D:[^\d]

  3. \s:空白符。\S:[^\s]

  4. \w:[A-Za-z0-9_]。\W:[^\w]

語法應用舉例,比如:

/\d/.test(“123"); //true

/\d/.test(“1dsf"); //true 只要有一個數字就是tru

/\D/.test(“1dsf"); //true

/\D/.test(“123"); //false

好了,接著我們在一開始匹配電話號碼進行改進:

/^1\d\d\d\d\d\d\d\d\d\d$/.test("13762571094");//true

/^1\d\d\d\d\d\d\d\d\d\d$/.test("13712345678");//true

/^1\d\d\d\d\d\d\d\d\d\d$/.test(“1376257109x");//false

是不是感覺代碼比剛剛短了很多了呢?但這還是不夠。接著往下看

四、量詞:出現的次數

  1. {n,m}:n到m次。

  2. ?:{0,1}

  3. +:{1,}

  4. *:{0,}

語法應用舉例:

/\d*/.test(“abc");// true

/\d+/.test(“abc”);// false

/\d+/.test(“1abc");// true

/^https?:/.test(“http://www.163.com");// true

/^https?:/.test(“https://www.163.com");// true

/^https?:/.test(“httpss://www.163.com");// false

接著將上面的匹配電話號碼的實例進一步改進:

/^1\d{10}$/.test("13762571094");//true

/^1\d{10}$/.test("13712345678");//true

/^1\d{10}$/.test(“1376257109x”);//false

寫在最後的結束語:

整篇文章分了四個部分來講,每次都用舉例的方式講清楚一個語法之後就接著對貫串全文的匹配電話號碼的例子進行改造,有節奏的將正則匹配的常用語法,講了一遍,希望對大家帶來益處。如有本文有講的不對的對方,歡迎留言。

短內容,說完整事,哪怕只讀一篇也能學知識。點擊關注小鄭搞碼事,說的都是那堆代碼。謝謝您的鼓勵!

相關推薦

推薦中...