JS-正則表達式實戰篇（Angel著）javascript
你們會看到我最新的系列博客都是spring boot怎麼忽然來了一個js的呢，並且這個貌似對你們而言好像很簡單的嘛，因此在寫以前我說說我寫這一篇文章的初衷。公司新來了一位同事，而後問我什麼js正則表達式？我當時也是腦殼一蒙，本身平時會用，可是要下個定義仍是有點困難的，而後腦殼在一轉，好像本身也忘記的差很少了，因此這一篇文章主要是爲了同事而寫的，但願他能對js以及對正則表達式有必定新的認識。html
這裏主要分以下幾節：html5
2. js之Hello World
3. js正則表達式理論
四、正則實戰學習
（1）小試牛刀
（2）初露鋒芒
初露鋒芒之【手機號碼】正則表達式
初露鋒芒之【郵箱】正則表達式
（3）過關斬將
1. 什麼是JS?java
在學習js正則表達式的時候，這裏咱們拋磚引玉下：什麼是js？首先js的全稱是JavaScript,是一種腳本語言，一種普遍用於客戶端web開發的腳本語言，經常使用來給HTML網頁標籤的元素添加動態功能。這裏有一個關鍵是js是用於客戶端的web腳本語言那麼他和如今流行的java語言是什麼關係呢？不少剛剛瞭解javaScript的初學者都會有這種誤區以爲是是否是java的擴展語言或者跟java有必定的聯繫呢,而且java是服務端語言。web
到底有聯繫呢？博主在這裏告訴你們沒有關係？JavaScript原本叫LiveScript,在Netscape Navigator 2正式發佈前夕，Netscape爲了更搭上媒體熱炒的java順風車，因此更名叫javascript。另一個解釋就是Netscape與Sun合做，Netscape管理層但願它外觀看起來更像java,所以取名爲javaScript。不論是什麼一個理解，總之javaScript和Java沒有關係，請你們牢記。正則表達式
2. js之Hello Worldspring
這是本博主第一次寫有關JS相關的文章，雖然是介紹正則表達式，可是在這裏也幫你們回顧下js的和hello world吧。咱們在學習任何一門語言的時候，第一個代碼少不了Hello World，那麼在JS中是如何實現呢？具體須要以下幾個步驟：sql
（1） 新建一個.html文件；數據庫
（2） 編寫script語言；數組
（3） 測試；
（1）新建一個.html文件；
咱們使用記事本或者經常使用的開發工具Dreamweaver等新建一個hello.html
在這個文件中有一個按鈕元素，具體代碼以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="點擊我哦" />
</body>
</html>
以上這個代碼很簡單，沒有什麼特別的，固然這是在你會html的狀況下，若是html不瞭解的話，那麼博主建議先回去學習下什麼是html吧，而後也能夠html5。
（2）新建script腳本語言
Javascript的使用方式經常使用的有兩種，第一就是在.html中使用標籤<script>標籤是腳本語言，其二就是使用<script src=」xxx.js」>的方式引入外部定義的js文件，這裏既然是hello world咱們就使用最簡單的方式來進行編碼，直接在hello.html中進行編碼，具體代碼以下：
<!--
做者：412887952@qq.com
時間：2016-04-30
描述：使用script標籤指定這裏的代碼是腳本語言。
開發中咱們經常會把腳本代碼放在一個定義的.js文件中，而後經過script src
引入的方式進行編碼，固然若是腳本代碼就一兩句，也沒有必要非得建立一個.js
文件進行引入，這個反而是多此一舉了。
-->
<script>
/*
* 這是js的註釋方式。
* 使用function關鍵詞定義這是一個方法，方法能夠和咱們定義的標籤元素
* 進行綁定，在標籤元素中都一個 onclick的方法，咱們直接綁定，就會執行咱們
*
* 定義的js方法了。
*
*
*/
function hello(){
alert("welcome to js!");
}
</script>
接在在input標籤進行綁定咱們編寫的腳本語言：
<input type="button" value="點擊我哦" onclick="hello()" />
這裏使用onclick屬性和咱們編寫的js的hello進行綁定。
這裏是全部的代碼（直接複製到.html文件雙擊就能夠運行）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="點擊我哦" onclick="hello()" />
<!--
做者：412887952@qq.com
時間：2016-04-30
描述：使用script標籤指定這裏的代碼是腳本語言。
開發中咱們經常會把腳本代碼放在一個定義的.js文件中，而後經過script src
引入的方式進行編碼，固然若是腳本代碼就一兩句，也沒有必要非得建立一個.js
文件進行引入，這個反而是多此一舉了。
-->
<script>
/*
* 這是js的註釋方式。
* 使用function關鍵詞定義這是一個方法，方法能夠和咱們定義的標籤元素
* 進行綁定，在標籤元素中都一個 onclick的方法，咱們直接綁定，就會執行咱們
*
* 定義的js方法了。
*
*
*/
function hello(){
alert("welcome to js!");
}
</script>
</body>
</html>
（3）測試
到這裏hello js就完成了。咱們使用瀏覽器打開咱們編寫的代碼，便可按鈕便可看到welcome to js! 的彈框信息。好了這裏咱們不是要介紹js的hello world的，仍是讓咱們來看看什麼是js正則表達式吧，這個前提就是對js有都必定了解了，否則是會學着很累的。
3. js正則表達式實戰
（1）Js正則表達式定義？
在回答js正則表達式的時候，咱們先說說什麼是正則表達式？所謂的正則表達式（英語：Regular Expression，在代碼中常簡寫爲regex、regexp或RE）是對字符串操做的一種邏輯公式，就是事先定義好的一些特殊字符、及一些特定字符的組合，組成一個「規則字符串」，這個「規則字符串」用來表達對字符串的一種過濾邏輯。
瞭解了正則表達式咱們就能夠很好的理解什麼是js正則表達式了？就是使用js腳本語言實現的能夠匹配規則字符串的表達式。
（2）正則表達式語法：
一個正則表達式就是由普通字符（例如字符 a 到 z）以及特殊字符（稱爲元字符）組成的文字模式。該模式描述在查找文字主體時待匹配的一個或多個字符串。正則表達式做爲一個模板，將某個字符模式與所搜索的字符串進行匹配。
（3）正則表達式的建立
var re = new RegExp();//RegExp是一個對象,和Aarray同樣
//但這樣沒有任何效果,須要將正則表達式的內容做爲字符串傳遞進去
re =new RegExp("a");//最簡單的正則表達式,將匹配字母a
re=new RegExp("a","i");//第二個參數,表示匹配時不分大小寫
正則表達式還有另外一種正則表達式字面量的聲明方式
var re = /a/gi;
咱們經常使用的是第二種方式，由於第一種方式中是使用「」包含的方式，這樣在有特殊字符的時候要使用使用字符字符的方式進行轉義，固然這裏只是建議，要是喜歡第一種方式也不曾不可。
（4）正則表達式的方式、屬性
其中將對正則表達式的經常使用方法和屬性，以及相關的String的match方法講述。
正則表達式方法：
· test 方法：返回Boolean型。它指出被查找的字符串中是否包含該模式。若是存在返回True，不然返回False；
· exec 方法：用正則表達式模式在字符串中尋找，並返回符合該正則表達式模式的數組；
正則表達式屬性：
· source 屬性：返回正則表達式的文本內容。只讀；
String 的匹配正則表達式的方法：
· match 方法：找到一個或多個正則表達式的匹配，相似exec 方法，返回一數組
4、正則實戰學習
說了這麼多理論無非就是爲了使用，咱們仍是來練練手吧。
（1）小試牛刀
//最簡單的正則表達式,將匹配he這個單詞
var re = /he/;
var str = "he";
var str2 = "ha";
alert(re.test(str));//true
alert(re.test(str));//false
咱們能夠在.html中的<script中進行測試,具體代碼以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//最簡單的正則表達式,將匹配he這個單詞
var re = /he/;
var str = "he";
var str2 = "ha";
alert(re.test(str));//true
alert(re.test(str2));//false
</script>
</body>
</html>
運行以上代碼就能夠看到彈框信息。請自行測試。以後的代碼將再也不提供.html文件。請自行復制相應代碼到<script></script>中進行測試。
//最簡單的正則表達式,將匹配he這個單詞
var reg = /he/;
var str = "HE";
//匹配大寫的HE將返回false;
console.log(reg+"--test--"+str+"="+reg.test(str));//false
/*
* 從新定義正則表達式讓其支持大小寫
* 在正則表達式中使用i的意思就是：忽略大小寫。
*/
reg = /he/i;
str = "HE";
console.log(reg+"--test--"+str+"="+reg.test(str));//true
str = "Certainly!He loves her!";
//,只要包含he(HE)就符合,若是要只是he或HE,不能有其它字符,則可以使用^和$
console.log(reg+"--test--"+str+"="+reg.test(str));//true
reg = /^he/i;// ^ 表明字符開始位置 ,就是必須是以 he 進行開頭。
//false,由於he不在str最開始
console.log(reg+"--test--"+str+"="+reg.test(str));
str = "He is a good boy!";
//true,He是字符開始位置,很明顯就是HE開頭的,加上i不區分大小寫。
console.log(reg+"--test--"+str+"="+reg.test(str));
//這時候咱們需求又來了，咱們但願必須以 he 結束，不能有其它的了，那麼就要使用$符號了。
reg = /^he$/i;//$表示字符結束位置
//false, 很明顯str = "He is a good boy!";不是以 he就是結束了。
console.log(reg+"--test--"+str+"="+reg.test(str));
str = "He";
//true;
console.log(reg+"--test--"+str+"="+reg.test(str));
//固然,這樣不能發現正則表達式有多強大,由於咱們徹底能夠在上面的例子中使用==或indexOf
reg = /\s/;// \s匹配任何空白字符，包括空格、製表符、換頁符等等
str= "user Name";//用戶名包含空格
//true
console.log(reg+"--test--"+str+"="+reg.test(str));
str= "userName";//用戶名包含空格
//false
console.log(reg+"--test--"+str+"="+reg.test(str));
str = "user Name";//用戶名包含製表符
//true
console.log(reg+"--test--"+str+"="+reg.test(str));
/*
* 咱們解釋下這個正則表達式的意思：
*
* 首先解讀：[a-z] : []匹配指定範圍內的任意字符,就是a,b,c,d
* /i ：說明咱們不區分大小寫：A，a,B,c都是支持的。
* ^ : 這個是必須以什麼開頭，那麼就是必須以英文字母開頭，若是是以 1,2等數字或者別的字符開頭就是不匹配的。
*
*/
reg=/^[a-z]/i;//[]匹配指定範圍內的任意字符,這裏將匹配英文字母,不區分大小寫
str="variableName";//變量名必須以字母開頭
//true
console.log(reg+"--test--"+str+"="+reg.test(str));
str="123abc";
//false;
console.log(reg+"--test--"+str+"="+reg.test(str));
中場休息下，寫的實在是太累了，咱們總結下：上面咱們學習到了什麼：
// : 使用//表示咱們是一個正則表達式的寫法；
i : 表示咱們不區分大小寫；
^ : 表示必需要以什麼進行開頭；
[] : 匹配指定範圍內的任意字符;
$ : 表示以什麼字符結尾。
（2）初露鋒芒
初露鋒芒之【手機號碼】正則表達式
如今咱們的需求是這樣的，判斷用戶輸入的手機號是不是正常的手機號碼。咱們指望是這樣的：只有13、15、18開頭的11位手機號碼是合理的。
咱們分析下，咱們要知足幾點：
1> 11位數字
2> 1開頭
3> 第二位置是3,5,8
4> 剩下的幾位是隨意數字。
咱們先看看1>,怎麼確保輸入的是11位數呢？咱們會使用到{n}的表達式：
{n} n 是一個非負整數。匹配肯定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，可是能匹配 "food" 中的兩個 o。
測試代碼以下：
var reg = /o{2}/;
var str = "Bob";
//false
alert(reg.test(str));
var str = "food";
//true
alert(reg.test(str));
那麼配置11位數字的正則表達式就是,咱們容易寫成以下表達式：
var reg = /[0-9]{11}/;
這個確實是能匹配到11位的數字，可是12位的數字也是能匹配的，10位的固然是沒法匹配，因此正確的方式就是要限定開始+結尾，正確的寫法就是：
var reg = /^[0-9]{11}$/;
這個表達式只能是11位數字了，測試代碼以下：
var reg = /^[0-9]{11}$/;
var str = "110123443211";
//false
alert(reg.test(str));
var str = "1101234432";
//false
alert(reg.test(str));
var str = "11012344321";
alert(reg.test(str));//true
接下來咱們來知足第二個條件，就是1開頭，這個就比較簡單了，改造以後的表達式爲：
var reg = /^1[0-9]{10}$/;
或者
var reg = /^[1][0-9]{10}$/;
那麼這兩種方式有什麼區別呢？第二種方式應該是比較好擴展，[]表示是匹配多個字符，那麼咱們若是指望是以1,2開始的話，那麼咱們這麼寫：
var reg = /^[12][0-9]{10}$/;
注意這裏不是12,就是知足以1開頭或者以2開頭的數字而已。
另外這裏的{}中的是10，由於咱們本來是11位，1佔用1位，因此11-1=10就是10位了。
緊接着咱們來知足第二位是3,5,8數字，這個實現，其實咱們在以上的時候就提到了，就是[12]的表示方式，3,5,8就是[358]，那麼咱們的正則表達式就是：
var reg = /^[1][358][0-9]{9}$/;
ok，到底算是高一段落了，咱們仍是來總結下，使用的到表達符號：
// : 表示是一個正則表達式；
[]: 匹配指定範圍內的任意字符；
{n} : 匹配肯定的n次，若：a{2},那麼能夠匹配到12aa,不能匹配到12a或者12aaa;
^:以什麼字母開始；
$: 以什麼結束；
i：不區分小寫；
這裏最後提供一個.html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/**
* 是不是合理的手機號.
* @param {Object} input
*/
function isMobile(input){
var reg = /^[1][358][0-9]{9}$/;
return reg.test(input);
}
//用戶輸入的.
var input = "13012344321";
//true;
alert(isMobile(input));
//用戶輸入的.
var input = "12012344321";
//false;
alert(isMobile(input));
</script>
</body>
</html>
初露鋒芒之【郵箱】正則表達式
如今咱們的需求是這樣的，判斷用戶輸入的是不是合理的郵箱，那麼郵箱的一個規則是什麼呢?(固然咱們這裏是咱們的假設，實際中請參考實際的需求或者直接在網上尋找郵箱的正則表達式)。
1> 以字母數字以及-開頭、不限制位數
2> 緊接有一個@
3> 以後又是字母數字以及-多個以點結尾
4> 最後以字母數字2-4位結束。
在這裏咱們會學習到的表達式符號是：
[]: 匹配指定範圍內的任意字符；
+：+號表示字符至少要出現1次
\:轉義字符,因爲-是特殊字符，因此咱們須要使用\-進行轉義。
(pattern):匹配 pattern 並獲取這一匹配。所獲取的匹配能夠從產生的 Matches 集合獲得;
For example:
reg = /^a|bc$/;//將匹配開始位置的a或結束位置的bc
str ="add";
alert(reg.test(str));//true
reg = /^(a|bc)$/;//將匹配a或bc
str ="bc";
alert(reg.test(str));//true
{m,n}: m 和 n 均爲非負整數，其中n <= m。最少匹配 n 次且最多匹配 m 次。劉， "o{1,3}" 將匹配 "fooooood" 中的前三個 o。'o{0,1}' 等價於 'o?'。請注意在逗號和兩個數之間不能有空格。
接下來咱們來實現如下：
1> 以字母數字以及-開頭、不限制位數
知足這個條件的正則表達式是：
var reg = /^([a-zA-Z0-9\-])+/;
1> 緊接有一個@
var reg = /^([a-zA-Z0-9\-])+@/;
2> 以後又是字母數字以及-多個以點結尾
var reg = /^([a-zA-Z0-9\-])+@(([a-zA-Z0-9\-])+\.)+ /;
3> 最後以字母數字2-4位結束。
var reg = /^([a-zA-Z0-9\-])+@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
測試代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/**
* 是不是合理的郵箱
* @param {Object} input
*/
function isEmail(input){
var reg = /^([a-zA-Z0-9\-])+@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return reg.test(input);
}
//用戶輸入的.
var input = "abc@qq.com";
//true;
alert(isEmail(input));
</script>
</body>
</html>
在這裏我要告訴你們另一個點，正則表達式針對於同一個要實現的問題並非固定的，就拿手機號碼來講，有其它不一樣的寫法能知足咱們要的結果。
（3）過關斬將
咱們本身按照咱們本身的要求寫完了一兩個正則表達式例子，實際中咱們並不須要徹底會本身寫，如今有不少的在線生成工具：http://tool.lu/regex/ 咱們只須要解讀就行了。
那麼來解讀下別人寫的手機號碼的校驗吧,打開網址，你會看到手機號碼的正則表達式以下：
var reg = /(13\d|14[57]|15[^4,\D]|17[678]|18\d)\d{8}|170[059]\d{7}/
這裏有新的知識咱們要學習：
\d: 匹配一個數字字符。等價於 [0-9]。
\D : 匹配一個非數字字符。等價於 [^0-9],因此在某些場合^還有非的意思。
[^a-z]：負值字符範圍。匹配任何不在指定範圍內的任意字符。例如，'[^a-z]' 能夠匹配任何不在 'a' 到 'z' 範圍內的任意字符。
咱們根據 | 拆分咱們正則表達式爲：
(13\d|14[57]|15[^4,\D]|17[678]|18\d)\d{8}
這部分表示：
(13[0-9]|14[57]|15[^4,[^0-9]]|17[678]|18[0-9])[0-9]{8}
也就是說：
13[0-9] ： 131,132,133等
14[57] : 145 , 147
15[^4,[^0-9]]：這個很深奧，須要好好解讀下，首先咱們先說下不能匹配到的是154，那麼怎麼正確解讀呢？首先是15開始這個沒什麼疑問, ^4意思不能出現4,^,不能有,而後就是
^[^0-9],而後這個就是等待與[0-9]了，說白了除了4的其它數字都能知足。
剩下的就沒什麼難度，本身解讀下就行了。
這裏已是3位了，剩下的\d{8}就是任意的8位數字。
170[059]\d{7}
| 以後的代碼就比較簡單了，就是若是是170的話，只能是
1700… ,1705… 1709….其它的就不符合。
好了解讀完了，因此要把js徹底學透傳仍是有必定難度的。
參考：
精通 JS正則表達式
http://www.cnblogs.com/aaronjs/archive/2012/06/30/2570970.html
JS中正則表達式概述
http://www.cnblogs.com/yangmingming/archive/2010/03/10/1682470.html
正則表達式所有符號解釋
http://www.cnblogs.com/yirlin/archive/2006/04/12/373222.html
【Spring Boot 系列博客】
58. Spring Boot國際化（i18n）【從零開始學Spring Boot】
57. Spring 自定義properties升級篇【從零開始學Spring Boot】
56. spring boot中使用@Async實現異步調用【從零開始學Spring Boot】
55. spring boot 服務配置和部署【從零開始學Spring Boot】
54. spring boot日誌升級篇—logback【從零開始學Spring Boot】
52. spring boot日誌升級篇—log4j多環境不一樣日誌級別的控制【從零開始學Spring Boot】
51. spring boot屬性文件之多環境配置【從零開始學Spring Boot】
50. Spring Boot日誌升級篇—log4j【從零開始學Spring Boot】
49. spring boot日誌升級篇—理論【從零開始學Spring Boot】
48. spring boot單元測試restfull API【從零開始學Spring Boot】
47. Spring Boot發送郵件【從零開始學Spring Boot】
46. Spring Boot中使用AOP統一處理Web請求日誌
45. Spring Boot MyBatis鏈接Mysql數據庫【從零開始學Spring Boot】
44. Spring Boot日誌記錄SLF4J【從零開始學Spring Boot】
43. Spring Boot動態數據源（多數據源自動切換）【從零開始學Spring Boot】
42. Spring Boot多數據源【從零開始學Spring Boot】
41. Spring Boot 使用Java代碼建立Bean並註冊到Spring中【從零開始學Spring Boot】
40. springboot + devtools（熱部署）【從零開始學Spring Boot】
39.4 Spring Boot Shiro權限管理【從零開始學Spring Boot】
39.3 Spring Boot Shiro權限管理【從零開始學Spring Boot】
39.2. Spring Boot Shiro權限管理【從零開始學Spring Boot】
39.1 Spring Boot Shiro權限管理【從零開始學Spring Boot】
38 Spring Boot分佈式Session狀態保存Redis【從零開始學Spring Boot】
37 Spring Boot集成EHCache實現緩存機制【從零開始學Spring Boot】
36 Spring Boot Cache理論篇【從零開始學Spring Boot】
35 Spring Boot集成Redis實現緩存機制【從零開始學Spring Boot】
34Spring Boot的啓動器Starter詳解【從零開始學Spring Boot】
33 Spring Boot 監控和管理生產環境【從零開始學Spring Boot】
32 Spring Boot使用@SpringBootApplication註解【從零開始學Spring Boot】
31 Spring Boot導入XML配置【從零開始學Spring Boot】