摘要：正則大法好，正則大法好，正則大法好，重要的事情說(shuō)三遍。第二部分，這個(gè)部分是整個(gè)表達(dá)式的關(guān)鍵部分。學(xué)習(xí)正則如果還沒(méi)有系統(tǒng)學(xué)習(xí)正則表達(dá)式，這里提供一些網(wǎng)上經(jīng)典的教程供大家學(xué)習(xí)。正則表達(dá)式使用單個(gè)字符串來(lái)描述匹配一系列匹配某個(gè)句法規(guī)則的字符串。

原文收錄在我的 GitHub博客 (https://github.com/jawil/blog) ，喜歡的可以關(guān)注最新動(dòng)態(tài)，大家一起多交流學(xué)習(xí)，共同進(jìn)步，以學(xué)習(xí)者的身份寫(xiě)博客，記錄點(diǎn)滴。

有些童鞋肯定有所疑惑，花了大量時(shí)間學(xué)習(xí)正則表達(dá)式，卻發(fā)現(xiàn)沒(méi)有用武之地，正則不就是驗(yàn)證個(gè)郵箱嘛，其他地方基本用不上，其實(shí)，大部分人都是這種感覺(jué)，所以有些人干脆不學(xué)，覺(jué)得又難又沒(méi)多大用處。殊不知，想要成為編程大牛，正則表達(dá)式必須玩轉(zhuǎn)，GitHub上優(yōu)秀的開(kāi)源庫(kù)和框架里面到處都是強(qiáng)大的正則匹配，當(dāng)年jQuery作者也被稱為正則小王子。這里分享一些工作中用到的和自己收集的一些正則表達(dá)式的妙用，到處閃耀著開(kāi)發(fā)者智慧的火花。

實(shí)現(xiàn)一個(gè)需求的方法很多種，哪種更好，仁者見(jiàn)仁智者見(jiàn)智，這里只提供一種對(duì)比的思維來(lái)激發(fā)大家學(xué)習(xí)正則的興趣和養(yǎng)成活用正則的思維。

作為前端開(kāi)發(fā)人員，總會(huì)有點(diǎn)自己的奇技淫巧，畢竟前端開(kāi)發(fā)不同于后端，代碼全部暴漏給用戶不說(shuō)，代碼冗余了少則影響帶寬，多則效率降低。正則表達(dá)式（Regular Expression），這是一塊硬骨頭，很難啃，但是啃著又很香。所以今天我也來(lái)爆一些正則表達(dá)式的奇技淫巧。

正則大法好，正則大法好，正則大法好，重要的事情說(shuō)三遍。

非正則實(shí)現(xiàn)：

function getParamName(attr) {

  let search = window.location.search // "?name=jawil&age=23"

  let param_str = search.split("?")[1] // "name=jawil&age=23"

  let param_arr = param_str.split("&") // ["name=jawil", "age=23"]

  let filter_arr = param_arr.filter(ele => { // ["name=jawil"]
    return ele.split("=")[0] === attr
  })

  return decodeURIComponent(filter_arr[0].split("=")[1])
}

console.log(getParamName("name")) // "jawil"

用正則實(shí)現(xiàn)：

function getParamName(attr) {

  let match = RegExp(`[?&]${attr}=([^&]*)`) //分組運(yùn)算符是為了把結(jié)果存到exec函數(shù)返回的結(jié)果里
    .exec(window.location.search)
  //["?name=jawil", "jawil", index: 0, input: "?name=jawil&age=23"]
  return match && decodeURIComponent(match[1].replace(/+/g, " ")) // url中+號(hào)表示空格,要替換掉
}
  
console.log(getParamName("name"))  // "jawil"

看不太懂先學(xué)習(xí)一下這篇文章：[[ JS 進(jìn)階 ] test, exec, match, replace](https://segmentfault.com/a/11...

非正則實(shí)現(xiàn)：

let test = "1234567890"

function formatCash(str) {
  let arr = []

  for (let i = 1; i < str.length; i++) {
    if (str.length % 3 && i == 1)
      arr.push(str.substr(0, str.length % 3))

    if (i % 3 === 0)
      arr.push(str.substr(i - 2, 3))

  }

  return arr.join(",")
}

console.log(formatCash(test)) // 1,234,567,890

用正則實(shí)現(xiàn)：

let test1 = "1234567890"
let format = test1.replace(/B(?=(d{3})+(?!d))/g, ",")

console.log(format) // 1,234,567,890

下面簡(jiǎn)單分析下正則/B(?=(d{3})+(?!d))/g：

/B(?=(d{3})+(?!d))/g：正則匹配邊界B，邊界后面必須跟著(d{3})+(?!d);

(d{3})+：必須是1個(gè)或多個(gè)的3個(gè)連續(xù)數(shù)字;

(?!d)：第2步中的3個(gè)數(shù)字不允許后面跟著數(shù)字;

(d{3})+(?!d)：所以匹配的邊界后面必須跟著3*n（n>=1）的數(shù)字。

最終把匹配到的所有邊界換成,即可達(dá)成目標(biāo)。

非正則實(shí)現(xiàn)：

function trim(str) {
    let start, end
    for (let i = 0; i < str.length; i++) {
        if (str[i] !== " ") {
            start = i
            break
        }
    }
    for (let i = str.length - 1; i > 0; i--) {
        if (str[i] !== " ") {
            end = i
            break
        }
    }

    return str.substring(start, end - 1)
}


let str = "  jaw il "
console.log(trim(str)) // "jaw il"

用正則實(shí)現(xiàn)：

function trim(str) {
    return str.replace(/(^s*)|(s*$)/g, "")
}

let str = "  jaw il "
console.log(trim(str)) // "jaw il"

質(zhì)數(shù)又稱素?cái)?shù)。指在一個(gè)大于1的自然數(shù)中，除了1和此整數(shù)自身外，沒(méi)法被其他自然數(shù)整除的數(shù)。

非正則實(shí)現(xiàn)：

function isPrime(num){
    // 不是數(shù)字或者數(shù)字小于2
    if(typeof num !== "number" || !Number.isInteger(num)){　　　　　　
    // Number.isInterget 判斷是否為整數(shù)
        return false
    }

    //2是質(zhì)數(shù)
    if(num == 2){
        return true
    }else if(num % 2 == 0){  //排除偶數(shù)
        return false
    }
    //依次判斷是否能被奇數(shù)整除，最大循環(huán)為數(shù)值的開(kāi)方
    let squareRoot = Math.sqrt(num)
    //因?yàn)?已經(jīng)驗(yàn)證過(guò)，所以從3開(kāi)始；且已經(jīng)排除偶數(shù)，所以每次加2
    for(let i = 3; i <= squareRoot; i += 2) {
      if (num % i === 0) {
         return false
      }
    }
    return true
}

console.log(isPrime(19)) // true

用正則實(shí)現(xiàn)：

function isPrime(num) {
return !/^1?$|^(11+?)1+$/.test(Array(num+1).join("1"))
}

console.log(isPrime(19)) // true

要使用這個(gè)正規(guī)則表達(dá)式，你需要把自然數(shù)轉(zhuǎn)成多個(gè)1的字符串，如：2 要寫(xiě)成 “11”， 3 要寫(xiě)成 “111”, 17 要寫(xiě)成“11111111111111111”，這種工作使用一些腳本語(yǔ)言可以輕松的完成，JS實(shí)現(xiàn)也很簡(jiǎn)單，我用Array(num+1).join("1")這種方式實(shí)現(xiàn)了一下。

一開(kāi)始我對(duì)這個(gè)表達(dá)式持懷疑態(tài)度，但仔細(xì)研究了一下這個(gè)表達(dá)式，發(fā)現(xiàn)是非常合理的，下面，讓我?guī)銇?lái)細(xì)細(xì)剖析一下是這個(gè)表達(dá)式的工作原理。

首先，我們看到這個(gè)表達(dá)式中有“|”，也就是說(shuō)這個(gè)表達(dá)式可以分成兩個(gè)部分：/^1?$/ 和 /^(11+?)1+$/

第一部分：/^1?$/， 這個(gè)部分相信不用我多說(shuō)了，其表示匹配“空串”以及字串中只有一個(gè)“1”的字符串。

第二部分：/^(11+?)1+$/ ，這個(gè)部分是整個(gè)表達(dá)式的關(guān)鍵部分。其可以分成兩個(gè)部分，(11+?)?和 1+$ ，前半部很簡(jiǎn)單了，匹配以“11”開(kāi)頭的并重復(fù)0或n個(gè)1的字符串，后面的部分意思是把前半部分作為一個(gè)字串去匹配還剩下的字符串1次或多次（這句話的意思是——剩余的字串的1的個(gè)數(shù)要是前面字串1個(gè)數(shù)的整數(shù)倍）。

可見(jiàn)這個(gè)正規(guī)則表達(dá)式是取非素?cái)?shù)，要得到素?cái)?shù)還得要對(duì)整個(gè)表達(dá)式求反。通過(guò)上面的分析，我們知道，第二部分是最重要的，對(duì)于第二部分，舉幾個(gè)例子，

示例一：判斷自然數(shù)8。我們可以知道，8轉(zhuǎn)成我們的格式就是“11111111”，對(duì)于 (11+?) ，其匹配了“11”，于是還剩下“111111”，而 1+$ 正好匹配了剩下的“111111”，因?yàn)?，?1”這個(gè)模式在“111111”出現(xiàn)了三次，符合模式匹配，返回true。所以，匹配成功，于是這個(gè)數(shù)不是質(zhì)數(shù)。

示例二：判斷自然數(shù)11。轉(zhuǎn)成我們需要的格式是“11111111111”（11個(gè)1），對(duì)于 (11+?) ，其匹配了“11”（前兩個(gè)1），還剩下“111111111”（九個(gè)1），而 1+$ 無(wú)法為“11”匹配那“九個(gè)1”，因?yàn)椤?1”這個(gè)模式并沒(méi)有在“九個(gè)1”這個(gè)串中正好出現(xiàn)N次。于是，我們的正則表達(dá)式引擎會(huì)嘗試下一種方法，先匹配“111”（前三個(gè)1），然后把“111”作為模式去匹配剩下的“11111111”（八個(gè)1），很明顯，那“八個(gè)1”并沒(méi)有匹配“三個(gè)1”多次。所以，引擎會(huì)繼續(xù)向下嘗試……直至嘗試所有可能都無(wú)法匹配成功。所以11是素?cái)?shù)。

通過(guò)示例二，我們可以得到這樣的等價(jià)數(shù)算算法，正則表達(dá)式會(huì)匹配這若干個(gè)1中有沒(méi)有出現(xiàn)“二個(gè)1”的整數(shù)倍，“三個(gè)1”的整數(shù)倍，“四個(gè)1”的整數(shù)倍……，而，這正好是我們需要的算素?cái)?shù)的算法。現(xiàn)在大家明白了吧。

這里只考慮最簡(jiǎn)單字符串的數(shù)組去重，暫不考慮，對(duì)象，函數(shù)，NaN等情況，這種用正則實(shí)現(xiàn)起來(lái)就吃力不討好了。

非正則實(shí)現(xiàn)：

①ES6實(shí)現(xiàn)

let str_arr=["a","b","c","a","b","c"]

function unique(arr){
  return [...new Set(arr)]
}

console.log(unique(str_arr)) // ["a","b","c"]

②ES5實(shí)現(xiàn)

var str_arr = ["a", "b", "c", "a", "b", "c"]

function unique(arr) {
    return arr.filter(function(ele, index, array) {
        return array.indexOf(ele) === index
    })
}

console.log(unique(str_arr)) // ["a","b","c"]

③ES3實(shí)現(xiàn)

var str_arr = ["a", "b", "c", "a", "b", "c"]

function unique(arr) {
    var obj = {},
        array = []

    for (var i = 0, len = arr.length; i < len; i++) {
        var key = arr[i] + typeof arr[i]
        if (!obj[key]) {
            obj[key] = true
            array.push(arr[i])
        }
    }
    return array
}

console.log(unique(str_arr)) // ["a","b","c"]

額，ES4呢。。。對(duì)不起，由于歷史原因，ES4改動(dòng)太大，所以被廢棄了。
可以看到從ES3到ES6，代碼越來(lái)越簡(jiǎn)潔，JavaScript也越來(lái)越強(qiáng)大。

用正則實(shí)現(xiàn)：

var str_arr = ["a", "b", "c", "a", "b", "c"]

function unique(arr) {
    return arr.sort().join(",,").
    replace(/(,|^)([^,]+)(,,2)+(,|$)/g, "$1$2$4").
    replace(/,,+/g, ",").
    replace(/,$/, "").
    split(",")
}

console.log(unique(str_arr)) // ["a","b","c"]

這里我只是拋磚引玉的利用幾個(gè)例子對(duì)比來(lái)展現(xiàn)正則表達(dá)式的強(qiáng)大，其實(shí)正則表達(dá)式的應(yīng)用遠(yuǎn)遠(yuǎn)不止這些，這里列出的只是冰山一角，更多的奇淫技巧需要你們來(lái)創(chuàng)造，知識(shí)點(diǎn)API是有限的，技巧和創(chuàng)造卻是無(wú)限的，歡迎大家開(kāi)動(dòng)腦門(mén)，創(chuàng)造或分享自己的奇淫技巧。

如果還沒(méi)有系統(tǒng)學(xué)習(xí)正則表達(dá)式，這里提供一些網(wǎng)上經(jīng)典的教程供大家學(xué)習(xí)。

正則表達(dá)式（Regular Expression），這是一塊硬骨頭，很難啃，但是啃著又很香。

正則表達(dá)式使用單個(gè)字符串來(lái)描述、匹配一系列匹配某個(gè)句法規(guī)則的字符串。很多地方我們都需要使用正則，所以今天就將一些優(yōu)秀的教程，工具總結(jié)起來(lái)。

https://en.wikipedia.org/wiki/Regular_expression?了解一樣?xùn)|西，當(dāng)然先從WIKI開(kāi)始最好了。

// Regular Expression examples
I had a S+ day today
[A-Za-z0-9-_]{3,16}
ffffdd-dd-dd
v(d+)(.d+)*
TotalMessages="(.*?)"
<[^<>]>

http://deerchao.net/tutorials/regex/regex.htm?30分鐘入門(mén)教程，網(wǎng)上流傳甚廣
https://qntm.org/files/re/re.html?55分鐘教程【英文】，
http://regex.learncodethehardway.org/book/?一本簡(jiǎn)單的書(shū)，每一節(jié)就是一塊內(nèi)容
https://swtch.com/~rsc/regexp/regexp1.html?正則匹配原理解析
http://stackoverflow.com/tags/regex/info?stackoverflow 正則標(biāo)簽，標(biāo)簽下有值得點(diǎn)擊的鏈接，一些典型的問(wèn)題
http://regexr.com/?正則學(xué)習(xí)測(cè)試于一身
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions?MDN出品，JavaScript方面內(nèi)容

https://regex101.com/?in JavaScript, Python, PCRE 16-bit, generates explanation of pattern
https://www.debuggex.com/?正則驗(yàn)證測(cè)試，清晰明了
https://mengzhuo.org/regex/?中文版正則驗(yàn)證測(cè)試
http://refiddle.com/?測(cè)試工具
http://myregexp.com/?也是測(cè)試工具，都可以試一試

http://regex.alf.nu?闖關(guān)模式練習(xí)正則表達(dá)式，完成一個(gè)個(gè)正則匹配的測(cè)驗(yàn)
http://regexone.com/?通過(guò)實(shí)際練習(xí)掌握正則表達(dá)式
https://regexcrossword.com/?正則挑戰(zhàn)，有不同難度，很豐富
http://callumacrae.github.io/regex-tuesday/?正則挑戰(zhàn)，完成正則匹配要求

https://msdn.microsoft.com/zh-cn/library/az24scfc.aspx?MSDN 微軟出品
http://www.jb51.net/tools/regex.htm?常用正則表達(dá)式，如匹配網(wǎng)址、日期啊這種，這個(gè)谷歌一搜很多的
https://www.cheatography.com/davechild/cheat-sheets/regular-expressions/?速查表地址，如下圖