摘要：如果你還沒正式開始正則表達(dá)式，請(qǐng)快速瀏覽跳過(guò)本章節(jié)。就是一個(gè)等同于但更簡(jiǎn)略的正則表達(dá)式。如果想查找全部，就要加標(biāo)識(shí)全局匹配規(guī)則正則表達(dá)式搜索字符串指定的值，從而去匹配字符串。正則表達(dá)式都是用來(lái)操作字符串的。

Create by jsliang on 2018-11-14 10:41:20  
Recently revised in 2018-11-19 08:46:37

?Hello 小伙伴們，如果覺得本文還不錯(cuò)，記得給個(gè) star，你們的 star 是我學(xué)習(xí)的動(dòng)力！GitHub 地址

?正則表達(dá)式：正則，也叫做規(guī)則，讓計(jì)算機(jī)能夠讀懂人類的規(guī)則。
?正則表達(dá)式是繁瑣的，越學(xué)你會(huì)覺得越發(fā)發(fā)狂。
?但是，它又是強(qiáng)大的。正則在我眼里，就是作弊碼，學(xué)會(huì)之后的應(yīng)用可以大大提高你的開發(fā)效率。
?所以，你可以老老實(shí)實(shí)打怪，但是你用了它會(huì)覺得編程更爽快。

?綜上，有了 jsliang 編寫這篇文章來(lái)記錄自己所學(xué)的沖動(dòng)。
?為此，也是靈感觸發(fā)，jsliang 寫了個(gè) PC 小游戲（請(qǐng)用電腦打開網(wǎng)址）：

正則小游戲地址

GIF圖無(wú)法上傳，點(diǎn)擊上面的游戲地址直接查看吧~

?不折騰的前端，和咸魚有什么區(qū)別~

目錄

?本章節(jié)整理總結(jié)了所有的參考文獻(xiàn)，方便日后快速回顧回憶。
?如果你還沒正式開始正則表達(dá)式，請(qǐng)快速瀏覽跳過(guò)本章節(jié)。

?精選參考文獻(xiàn)/視頻/手冊(cè)：

正則表達(dá)式-教程 | 菜鳥教程

正則表達(dá)式在線測(cè)試 | 菜鳥教程

正則表達(dá)式手冊(cè) | 開源中國(guó)社區(qū)

鬼斧神工之正則表達(dá)式 | 慕課網(wǎng)

正則表達(dá)式真的很 6，可惜你不會(huì)寫 | 前端之巔

正則表達(dá)式 - 快速參考 | Miscrosoft Docs

揭開正則表達(dá)式的神秘面紗 | 正則工作室

正則表達(dá)式 JavaScript | MDN

目錄

驗(yàn)證姓名

2 到 9 位中文昵稱：^[u4e00-u9fa5]{2,9}$

驗(yàn)證密碼

只能是字母、數(shù)字和下劃線，長(zhǎng)度不限制： ^w+$

允許 小寫字母 a-z、大寫字母 A-Z、數(shù)字 0-9、下劃線 _、 連接符 -，且長(zhǎng)度在 6-18 位數(shù)： /^[a-zA-Z0-9_-]{6,18}$/

必須包含數(shù)字+小寫字母+大寫字母的密碼，且長(zhǎng)度在8-10位之間： ^(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

驗(yàn)證 Email

允許有一個(gè)字符符合 [A-Za-z0-9_] 之后可以為 [A-Za-z0-9_-+.] + @ + 允許有一個(gè)字符符合 [A-Za-z0-9_] 之后可以為 [A-Za-z0-9_-.] + . + 允許有一個(gè)字符符合 [A-Za-z0-9_] 之后可以有 [A-Za-z0-9_-.] 的郵箱： ^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$

驗(yàn)證身份證

18 位身份證號(hào)，尾數(shù)是數(shù)字或者字母 X： ^(d{6})(d{4})(d{2})(d{2})(d{3})([0-9]|X)$

15 或者 18 位身份證號(hào)，尾數(shù)可以是數(shù)字及 X 或者 x： (^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)

驗(yàn)證手機(jī)號(hào)

以 1 開頭，第二位數(shù)是 3/4/5/7/8 的 11 位手機(jī)號(hào)碼： ^1[3,4,5,7,8,9]d{9}$

移動(dòng)號(hào)碼： ^134[0-8]d{7}$|^(?:13[5-9]|147|15[0-27-9]|178|1703|1705|1706|18[2-478])d{7,8}$

電信號(hào)碼： ^(?:133|153|1700|1701|1702|177|173|18[019])d{7,8}$

聯(lián)通號(hào)碼： ^(?:13[0-2]|145|15[56]|176|1704|1707|1708|1709|171|18[56])d{7,8}|$

目錄

目錄

?JavaScript 正則默認(rèn)： 正則匹配成功就會(huì)結(jié)束，不會(huì)繼續(xù)匹配。如果想查找全部，就要加標(biāo)識(shí) g（全局匹配）

test()

?規(guī)則：正則表達(dá)式搜索字符串指定的值，從而去匹配字符串。如果匹配成功就返回 true，如果匹配失敗就返回 false。
?用法：正則.test(字符串)
?案例：

js 代碼片段

var str = "123abc";
var re = /D/; // 匹配非數(shù)字
if(re.test(str)) {
  console.log("不全是數(shù)字！");
} else {
  console.log("全是數(shù)字！");
}

Console：不全是數(shù)字

search()

?規(guī)則：正則去匹配字符串，如果匹配成功，就返回匹配成功的位置，如果匹配失敗就返回 -1
?用法：字符串.search(正則)
?案例：

js 代碼片段

var str = "abcdef";
var re1 = /d/i; // 3
var re2 = /h/i; // -1
console.log(str.search(re1));
console.log(str.search(re2));

Console：  
3  
-1

match()

?規(guī)則：正則去匹配字符串，如果匹配成功，就返回匹配成功的數(shù)組，如果匹配不成，就返回 null
?用法：字符串.match(正則)
?案例：

js 代碼片段

var str = "123fadf321dfadf4fadf1"; //(4)?["123", "321", "4", "1"]
var re = /d+/g;
console.log(str.match(re));

Console：(4)?["123", "321", "4", "1"]

replace()

?規(guī)則：正則去匹配字符串，匹配成功的字符串去替換成新的字符串。函數(shù)的第一個(gè)參數(shù)，是匹配成功的字符；第二個(gè)參數(shù)：可以是字符串，也可以是一個(gè)回調(diào)函數(shù)。
?用法：字符串.replace(正則,新的字符串)
?案例：

簡(jiǎn)單案例

js 代碼片段

var str = "aaa";
var re = /a+/g;
str = str.replace(re, "b");
console.log(str); // b

Console：b

敏感詞過(guò)濾

html 代碼片段

  
敏感詞過(guò)濾
  
替換前
  
  
  
替換后
  

js 代碼片段

window.onload = function() {
  var aT = document.getElementsByTagName("textarea");
  var oInput = document.getElementById("input1");

  var re = /非誠(chéng)|中國(guó)船|監(jiān)視之下/g;

  oInput.onclick = function() {
    // 一律單個(gè)替換： aT[1].value = at[0].value.replace(re, "*");
    // 多個(gè)替換：
    aT[1].value = aT[0].value.replace(re, function(str) {
      var result = "";
      for(var i=0; i
Console  
替換前：非誠(chéng)勿擾在中國(guó)船的監(jiān)視之下寸步難行  
替換后：**勿擾在***的****寸步難行



三 正則旅途
目錄


?什么是正則表達(dá)式？正則表達(dá)式：正則，也叫做規(guī)則，讓計(jì)算機(jī)能夠讀懂人類的規(guī)則。  
?正則表達(dá)式都是用來(lái)操作字符串的。  
?本文學(xué)習(xí)目標(biāo)：

通過(guò)小故事給小伙伴學(xué)習(xí) JavaScript 的正則表達(dá)式
讓小伙伴能了解基本正則表達(dá)式的意思，并能自己寫正則表達(dá)式



3.1 初識(shí)正則
目錄


?正則長(zhǎng)咋樣？怎么用？很簡(jiǎn)單，三行代碼帶你入門
var regex = /^d+$/;
var myNumber = "123";
console.log(regex.test(myNumber)); // true
?上面的正則，能驗(yàn)證字符串 myNumber 是不是純數(shù)字組成，就這么簡(jiǎn)單，正則入門了！  
?但是，如果我要是敢就這么結(jié)束文章，我敢保證你們想拍死我！所以，我們通過(guò)一個(gè)表達(dá)式的故事來(lái)初識(shí)正則表達(dá)式：  
?某天，盜賊小白給了盜賊小黑一個(gè)盒子，盒子像俄羅斯套娃一樣，有 3 層嵌套：  

?并且，他們約定了交易密碼提取方式：小白將給小黑提供一串字符串，小黑只需要將字符串中的所有相連的數(shù)字找出來(lái)，然后把它們拼接成一個(gè)新數(shù)組，數(shù)組的第一項(xiàng)就是第一個(gè)盒子的密碼，以此類推……
"abc123def456hash789" -> [123, 456, 789] - > [外層盒子1密碼, 中間層盒子2密碼, 最內(nèi)層盒子3密碼]
?現(xiàn)在假設(shè)盜賊小黑使用 JavaScript 進(jìn)行常規(guī)查找：
index.html




  
  
  
  



  
正則表達(dá)式 | jsliang 學(xué)習(xí)記錄

  





?寫到這里，小黑覺得不妥，上面代碼寫得太麻煩太復(fù)雜了，于是決定使用正則表達(dá)式查找：
index.html




  
  
  
  



  
正則表達(dá)式 | jsliang 學(xué)習(xí)記錄

  





?小黑瞬間覺得自己很牛逼有木有？！只需要一行代碼，就能解決字符串查找的時(shí)候用的一大串代碼！  
?那么，講到這里，小伙伴們應(yīng)該對(duì)正則有了個(gè)簡(jiǎn)單的了解，稱熱打鐵，Here we go~


3.2 正則解析
目錄


?在上文中，盜賊小黑通過(guò)使用 str.match(/d+/g)，解決了獲取箱子密碼的問(wèn)題。  
?那么，這串正則表達(dá)式是什么意思呢？我們先拋開這個(gè)，解析一串簡(jiǎn)單的：
^[a-z0-9_-]{6,12}$
?首先，^ 表示匹配字符串的開始位置，結(jié)合后面的 [a-z0-9_-] 表示該字符串開頭可以為 a-z 的字母，0-9 的數(shù)字，_ 下劃線，- 連接符。  
?然后，[a-z] 表示匹配 a-z 中任意單個(gè)字母；[0-9] 表示匹配 0-9 中任意單個(gè)數(shù)字；[_] 表示匹配下劃線；[-] 表示匹配連接符 -。所以，將前面的連起來(lái)，[a-z0-9_-] 表示字符串可以包含數(shù)字、字母、_、- 這四種形式的字符串。  
?接著，{6, 12} 表示該字符串的長(zhǎng)度為 6-12 位。  
?最后，$ 表示結(jié)束標(biāo)志，^ 的相反。
^ 與 $ 同時(shí)使用時(shí)，表示精確匹配。
?終上所述，小伙伴們應(yīng)該猜測(cè)到了這個(gè)正則表達(dá)式的用途：校驗(yàn)用戶名。該用戶名只能包含字符、數(shù)字、下劃線 (_) 和連接字符 (-)，并且用戶名的長(zhǎng)度最長(zhǎng)為 12 位，最短為 6 位。
?那么，它在 JavaScript 中要如何使用呢？我們通常用 /正則表達(dá)式/ 兩個(gè)斜杠來(lái)包裹我們要寫的正則表達(dá)式：
var reg = /^[a-z0-9_-]{6,12}$/
?看，這樣就是一條規(guī)則了，如果你需要讓他匹配一個(gè)字符串 str。那么，只需要在代碼中使用 test() 測(cè)試方法：
var str = "abc-cba_abc";
var reg = /^[a-z0-9_-]{6,12}$/;
console.log(reg.test(str)); // true
?這樣，我們就告訴了 JavaScript：reg 通過(guò) test() 方法去測(cè)試 str 是否符合 reg的規(guī)則，如果符合則返回 true，如果不符合則返回 true。這里返回的是 true，因?yàn)槲覀兊?str 是符合 reg 規(guī)則的。
test() 方法及其他好用的方法已經(jīng)整合到 【2.3 JS 正則方法】 里面了，迫不及待的小伙伴們可點(diǎn)擊鏈接先行查看。
?下面貼出完整代碼：
index.html




  
  
  
  



  
正則表達(dá)式 | jsliang 學(xué)習(xí)記錄

  





3.3 正則練習(xí)
目錄


?通過(guò)上面的了解，小伙伴對(duì)正則表達(dá)式應(yīng)該有了初始的了解，下面我們猜測(cè)一下，下面的 Console 1 - Console 3中， 哪些是 true，哪些是 false：
index.html




  
  
  
  



  
正則表達(dá)式 | jsliang 學(xué)習(xí)記錄

  





?答案是，這三個(gè)都返回 true。在這三個(gè) console.log() 中：  
?第一個(gè)判斷該字符串是否以 Cheer 開頭；  
?第二個(gè)判斷該字符串是否以 yourself 結(jié)尾；  
?第三個(gè)判斷該字符串是否包含 for。  
?在日常工作中，經(jīng)常利用該方法，判斷用戶輸入的 string 里面是否包含某些文字，例如：jsliang 是傻逼，就需要判斷替換為 jsliang 是帥哥，至于怎么替換敏感字，迫不及待的小伙伴們可前往 【2.3 JS 正則方法】 先行了解~  


3.4 漸入佳境：() 匹配子項(xiàng)
目錄


?所謂匹配子項(xiàng)，其實(shí)就是我們的小括號(hào) () 。它還有另外一個(gè)意思，叫分組操作。下面我們引用章節(jié) 【2.2 正則表達(dá)式規(guī)則】 中的定義：


表達(dá)式
釋義
用法


(子表達(dá)式)
標(biāo)記一個(gè)子表達(dá)式的開始和結(jié)束位置。

(w)1 能匹配 deep 中的 ee



?如果光解釋意思，小伙伴們可能稀里糊涂。所以我們先上代碼：
js 代碼片段
var str = "2018-11-28";
var re = /(d+)(-)/g;
str = str.replace(re, function($0, $1, $2){
  // 第一個(gè)參數(shù)：$0（母親)
  // 第二個(gè)參數(shù)：$1（第一個(gè)孩子）
  // 第三個(gè)參數(shù)：$2 (第二個(gè)孩子)
  console.log("$0：" + $0); // 2018- 以及 11-
  console.log("$1：" + $1); // 2018 以及 11
  console.log("$2：" + $2); // - 以及 -
  return $1 + ".";
});
console.log(str); // 2018.11.28
Console：  
$0：2018-  
$1：2018  
$2：-  
$0：11-  
$1：11  
$2：-  
2018.11.28

?首先，我們解析下這段正則：


/(d+)/ 表示任意 1 個(gè)及以上的數(shù)字

/(-)/ 表示匹配字符 -


g 表示匹配一次以上

?所以這段正則的意思就是匹配一次及以上的 數(shù)字- 形式的字符串。
?然后，我們使用了 replace() 方法。我們觀察 Console 打印出來(lái)的結(jié)果，可以看出：$0 即是我們的正則 var re = /(d+)(-)/g 去匹配 var str = "2018-11-28" 所得到的結(jié)果，這里我們匹配成功了兩次，即 2018- 及 11-；$1 即是我們的一個(gè)小括號(hào) (d+) 的匹配結(jié)果，所以結(jié)果為 2018 以及 11；$2 即是我們的第二個(gè)小括號(hào) (-) 的匹配結(jié)果，所以結(jié)果為 - 以及 -。  
?最后，我們做的事情就是，將 $1 加上 .，并返回最終結(jié)果給 str，即最終結(jié)果：2018.11.28。
在這里提到了 replace() 方法，詳情可了解：點(diǎn)擊前往



?【Once again】 如果小伙伴們感覺還是不過(guò)癮，那么我們?cè)賮?lái)一段：
js 代碼片段
var str = "abc";
var re = /(a)(b)(c)/;
console.log(str.match(re));
Console  
(4)?["abc", "a", "b", "c", index: 0, input: "abc", groups: undefined]

?這里我們不做過(guò)多講述，相信小伙伴們經(jīng)過(guò)這兩個(gè)案例，應(yīng)該對(duì) () 有了一定的了解。


3.5 漸入佳境：[] 字符類
目錄
?何為字符類？  
?所謂字符類，就是一組類似的元素 [] 這樣的中括號(hào)的整體，所代表一個(gè)字符。  
?話不多說(shuō)，先上代碼：
js 代碼片段
var str1 = "abcd";
var re1 = /a[bcd]c/;
console.log(re1.test(str1)); // true

var str2 = "abc";
var re2 = /a[^bcd]c/;
console.log(re2.test(str2)); // false

var str3 = "a.c";
var re3 = /a[a-z0-9A-Z]c/;
console.log(re3.test(str3));  // false
Console  
true  
false  
false

?首先，我們先解析第一部分：


/a/：匹配字母 a


/[bcd]/：匹配字母 bcd 中的一位

/[d]：匹配字母 d


?所以，可以看出，我們用 re1 來(lái)測(cè)試 str1 是否符合，它會(huì)返回 true。  
?然后，我們解析第二部分：

^ 如果寫在 [] 里面的話，就代表排除的意思。在這里就代表著 a 和 c 中間不能是 bcd 中的任意一個(gè)
?所以，可以看出，我們用 re2 來(lái)測(cè)試 str1 是否符合，它會(huì)返回 false。  
?最后，我們解析第三部分：

/[a-z0-9A-Z]/：匹配小寫字母 a-z，或者數(shù)字 0-9，或者大寫字母 A-Z。即 a 與 c 之間只能是上面匹配地上的字符。
?所以，可以看出，我們用 re3 來(lái)測(cè)試 str3 是否符合，它會(huì)返回 false。


四 回顧總結(jié)
目錄


?在第三章中，我們介紹了強(qiáng)大之處，介紹了它的使用方法，并通過(guò)小練習(xí)、() 以及 [] 的講解，讓小伙伴們更進(jìn)一步了解在 JavaScript 中正則的使用……  
?但！  
?這是完結(jié)嗎？！  
?不！  
?由于 jsliang 時(shí)間有限，沒法一一給小伙伴們介紹正則的樂趣及工作中如何使用正則提高工作效率。  
?所以，在第二章 【整合】 中，jsliang 整合網(wǎng)上資源，記錄了一些常用的正則工具，里面有很多東西，是在這篇文章中沒有涉及的，有興趣的小伙伴可以逐一嘗試加深對(duì)正則的了解。  
?————For the end————  
?在編寫這篇文章中，jsliang 玩性大發(fā)寫下了下面的游戲（請(qǐng)用電腦查看）：


游戲地址：天下第一武道會(huì)


代碼地址：https://github.com/LiangJunrong/regex




?如果小伙伴們覺得本文還不錯(cuò)，記得 GitHub 點(diǎn)個(gè) star， 你們的 star 是我學(xué)習(xí)的動(dòng)力！GitHub 地址



jsliang 的文檔庫(kù) 由 梁峻榮 采用 知識(shí)共享 署名-非商業(yè)性使用-相同方式共享 4.0 國(guó)際 許可協(xié)議進(jìn)行許可。
基于https://github.om/LiangJunron...上的作品創(chuàng)作。
本許可協(xié)議授權(quán)之外的使用權(quán)限可以從 https://creativecommons.org/l... 處獲得。


0-9 ?

 fnrtv ?