咱們能從 jQuery 的一個正則表達式中學到什麼？

注意，該篇文章當前爲粗糙的 v0.9 版本，會在稍後潤色更新。

讓咱們來看一道思考題，根據 rejectExp，分析其正則執行過程當中如何進行過濾？包含哪些執行步驟？

rejectExp 變量的值以下：

var rejectExp = /^<(\w+)\s*\/?>(?:<\/\1>|)$/;

在 jQuery.3.4.0 中，該正則表達式命名爲 rsingleTag 大概是 read single tag 的意思，是比較容易讀懂的命名，可是我以爲命名 tagNameMatchers 會更好。

其次這個正則表達式的目的就是剝離掉標籤的< 和 /> 等符號，只保留標籤名稱，爲了方便理解，咱們能夠將整個正則表達式分爲兩個部分：

1. ^<(\w+)\s*\/?>
2. (?:<\/\1>|)$

讓咱們一塊兒「讀」一下這個正則表達式的第一部分：匹配全部以 < 開頭的（^<），一個或多個大小寫字符，數字或下劃線，並將匹配結果放到正則寄存器中（(\w+)），以後匹配緊接着的任意個空白字符（\s*），以及無關緊要的一個 / 字符（\/?），緊接着一個 > 字符（>）。

在這個部分中，亮點的操做是實際上指定了咱們要捕獲 Tag 名稱字符，這意味着到時候這個字符會放在正則的寄存器裏（立刻咱們就要用到了）。

如今咱們來看看第二部分，接着讀：

上面的字符必需要以括號裏的部分結尾，可是我並不須要引用匹配結果，爲了提高性能，不要把匹配結果放在正則寄存器裏（?:(...)$）。注意，這個 ?: 就是指不要把匹配結果放在寄存器裏的意思。

而後括號裏有兩個騷操做：

1. <\/\1>：這裏 \1 使用了正則的「反向引用」的功能，把咱們剛纔放在寄存器裏的匹配結果拿出來使用了，這樣咱們就不須要再寫一遍相同的正則表達式，這很是符合 DRY 原則；
2. <...>|：注意這裏的 | 是指 「或」，這個符號右側爲空，是爲了匹配 <br /> 這樣的自閉和標籤，若是你少了這個字符，你就無法獲取自閉和標籤了，你能夠本身試試看；

這下整個正則表達式的含義應該就很明晰了，我就不針對第二部分再逐字過一遍了，相信你必定 Get 到了這個正則表達式的關鍵點。

小結一下，經過這個正則表達式咱們學到了什麼？

1. 使用非捕獲元 ?: 告訴正則不緩存匹配結果以提高性能；
2. 使用反向引用來遵照 DRY 原則；
3. 使用 | 右邊卻什麼也不寫表明什麼都不匹配；

小小的正則表達式卻有大大的學問，沒想到吧？