正則表達式是匹配模式，要么匹配字符，要么匹配位置。請記住這句話。
然而大部分人學習正則時，對於匹配位置的重視程度沒有那么高。
本章講講正則匹配位置的相關知識點。
內容包括：
- 什么是位置？
- 如何匹配位置？
- 位置的特性
- 幾個應用實例分析
什么是位置呢？
位置（錨）是相鄰字符之間的位置。比如，下圖中箭頭所指的地方：
如何匹配位置呢？
^、$、\b、\B、(?=p)、(?!p)
相應的可視化形式是：
^ 和 $
^（脫字符）匹配開頭，在多行匹配中匹配行開頭。
$（美元符號）匹配結尾，在多行匹配中匹配行結尾。
比如我們把字符串的開頭和結尾用 "#" 替換（位置可以替換成字符的！）：
var result = "hello".replace(/^|$/g, '#');
console.log(result);
// => "#hello#"
多行匹配模式（即有修飾符 m）時，二者是行的概念，這一點需要我們注意：
var result = "I\nlove\njavascript".replace(/^|$/gm, '#');
console.log(result);
/*
#I#
#love#
#javascript#
*/
\b 和 \B
\b 是單詞邊界，具體就是 \w 與 \W 之間的位置，也包括 \w 與 ^ 之間的位置，和 \w 與 $ 之間的位置。
比如考察文件名 "[JS] Lesson_01.mp4" 中的 \b，如下：
var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
console.log(result);
// => "[#JS#] #Lesson_01#.#mp4#"
為什么是這樣呢？這需要仔細看看。
首先，我們知道，\w 是字符組 [0-9a-zA-Z_] 的簡寫形式，即 \w 是字母數字或者下划線的中任何一個字符。而 \W 是排除字符組 [^0-9a-zA-Z_] 的簡寫形式，即 \W 是 \w 以外的任何一個字符。
此時我們可以看看 "[#JS#] #Lesson_01#.#mp4#" 中的每一個井號 ，是怎么來的。
- 第 1 個，兩邊字符是 "[" 與 "J"，是
\W與\w之間的位置。 - 第 2 個，兩邊字符是 "S" 與 "]"，也就是
\w與\W之間的位置。 - 第 3 個，兩邊字符是空格與 "L"，也就是
\W與\w之間的位置。 - 第 4 個，兩邊字符是 "1" 與 "."，也就是
\w與\W之間的位置。 - 第 5 個，兩邊字符是 "." 與 "m"，也就是
\W與\w之間的位置。 - 第 6 個，位於結尾，前面的字符 "4" 是
\w，即\w與$之間的位置。
知道了 \b 的概念后，那么 \B 也就相對好理解了。
\B 就是 \b 的反面的意思，非單詞邊界。例如在字符串中所有位置中，扣掉 \b，剩下的都是 \B 的。
具體說來就是 \w 與 \w、 \W 與 \W、^ 與 \W，\W 與 $ 之間的位置。
比如上面的例子，把所有 \B 替換成 "#"：
var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#');
console.log(result);
// => "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"
(?=p) 和 (?!p)
(?=p)，其中 p 是一個子模式，即 p 前面的位置，或者說，該位置后面的字符要匹配 p。
比如 (?=l)，表示 "l" 字符前面的位置，例如：
var result = "hello".replace(/(?=l)/g, '#');
console.log(result);
// => "he#l#lo"
而 (?!p) 就是 (?=p) 的反面意思，比如：
var result = "hello".replace(/(?!l)/g, '#');
console.log(result);
// => "#h#ell#o#"
二者的學名分別是 positive lookahead 和 negative lookahead。
中文翻譯分別是正向先行斷言和負向先行斷言。
ES5 之后的版本，會支持 positive lookbehind 和 negative lookbehind。
具體是 (?<=p) 和 (?<!p)。
也有書上把這四個東西，翻譯成環視，即看看右邊和看看左邊。
但一般書上，沒有很好強調這四者是個位置。
比如 (?=p)，一般都理解成：要求接下來的字符與 p 匹配，但不能包括 p 匹配的那些字符。
而在本人看來，(?=p) 就與 ^ 一樣好理解，就是 p 前面的那個位置。
位置的特性
對於位置的理解，我們可以理解成空字符 ""。
比如 "hello" 字符串等價於如下的形式：
"hello" == "" + "h" + "" + "e" + "" + "l" + "" + "l" + "o" + "";
也等價於：
"hello" == "" + "" + "hello"
因此，把 /\^hello$/ 寫成 /^^hello$$$/，是沒有任何問題的：
var result = /^^hello$$$/.test("hello");
console.log(result);
// => true
甚至可以寫成更復雜的:
var result = /(?=he)^^he(?=\w)llo$\b\b$/.test("hello");
console.log(result);
// => true
也就是說字符之間的位置，可以寫成多個。
TIP： 把位置理解空字符，是對位置非常有效的理解方式。
相關案例
不匹配任何東西的正則
讓你寫個正則不匹配任何東西
easy，/.^/。
因為此正則要求只有一個字符，但該字符后面是開頭，而這樣的字符串是不存在的
數字的千位分隔符表示法
比如把 "12345678"，變成 "12,345,678"。
可見是需要把相應的位置替換成 ","。
思路是什么呢？
弄出最后一個逗號
使用 (?=\d{3}$) 就可以做到：
var result = "12345678".replace(/(?=\d{3}$)/g, ',')
console.log(result);
// => "12345,678"
其中，(?=\d{3}$) 匹配 \d{3}$ 前面的位置。而 \d{3}$ 匹配的是目標字符串最后那 3 位數字。
弄出所有的逗號
因為逗號出現的位置，要求后面 3 個數字一組，也就是 \d{3} 至少出現一次。
此時可以使用量詞 +：
var result = "12345678".replace(/(?=(\d{3})+$)/g, ',')
console.log(result);
// => "12,345,678"
匹配其余案例
寫完正則后，要多驗證幾個案例，此時我們會發現問題：
var result = "123456789".replace(/(?=(\d{3})+$)/g, ',')
console.log(result);
// => ",123,456,789"
因為上面的正則，僅僅表示把從結尾向前數，一但是 3 的倍數，就把其前面的位置替換成逗號。因此才會出現這個問題。
怎么解決呢？我們要求匹配的到這個位置不能是開頭。
我們知道匹配開頭可以使用 ^，但要求這個位置不是開頭怎么辦？
easy，(?!^)，你想到了嗎？測試如下：
var regex = /(?!^)(?=(\d{3})+$)/g;
var result = "12345678".replace(regex, ',')
console.log(result);
// => "12,345,678"
result = "123456789".replace(regex, ',');
console.log(result);
// => "123,456,789"
支持其他形式
如果要把 "12345678 123456789" 替換成 "12,345,678 123,456,789"。
此時我們需要修改正則，把里面的開頭 ^ 和結尾 $，修改成 \b：
var string = "12345678 123456789",
regex = /(?!\b)(?=(\d{3})+\b)/g;
var result = string.replace(regex, ',')
console.log(result);
// => "12,345,678 123,456,789"
其中 (?!\b) 怎么理解呢？
要求當前是一個位置，但不是 \b 前面的位置，其實 (?!\b) 說的就是 \B。
因此最終正則變成了：/\B(?=(\d{3})+\b)/g。
可視化形式是：
格式化
千分符表示法一個常見的應用就是貨幣格式化。
比如把下面的字符串：1888
格式化成：$ 1,888.00
有了前面的鋪墊，我們很容實現如下：
function format (num) {
return num.toFixed(2).replace(/\B(?=(\d{3})+\b)/, ",").replace(/^/, "$$ ");
};
console.log( format(1888) );
// => "$ 1,888.00"
驗證密碼問題
密碼長度 6-12 位，由數字、小寫字符和大寫字母組成，但必須至少包括 2 種字符。
此題，如果寫成多個正則來判斷，比較容易。但要寫成一個正則就比較困難。
那么，我們就來挑戰一下。看看我們對位置的理解是否深刻。
簡化
不考慮“但必須至少包括 2 種字符”這一條件。我們可以容易寫出：var regex = /^[0-9A-Za-z]{6,12}$/;
判斷是否包含有某一種字符
假設，要求的必須包含數字，怎么辦？此時我們可以使用 (?=.*[0-9]) 來做。
因此正則變成：var regex = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;
同時包含具體兩種字符
比如同時包含數字和小寫字母，可以用 (?=.[0-9])(?=.[a-z]) 來做。
因此正則變成：var regex = /(?=.*[0-9])(?=.*[a-z])^[0-9A-Za-z]{6,12}$/;
解答
我們可以把原題變成下列幾種情況之一：
- 同時包含數字和小寫字母
- 同時包含數字和大寫字母
- 同時包含小寫字母和大寫字母
- 同時包含數字、小寫字母和大寫字母
- 以上的 4 種情況是或的關系（實際上，可以不用第 4 條）。
最終答案是：
var regex = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-
Z]))^[0-9A-Za-z]{6,12}$/;
console.log( regex.test("1234567") ); // false 全是數字
console.log( regex.test("abcdef") ); // false 全是小寫字母
console.log( regex.test("ABCDEFGH") ); // false 全是大寫字母
console.log( regex.test("ab23C") ); // false 不足6位
console.log( regex.test("ABCDEF234") ); // true 大寫字母和數字
console.log( regex.test("abcdEF234") ); // true 三者都有
可視化形式是：
解惑
上面的正則看起來比較復雜，只要理解了第二步，其余就全部理解了。
/(?=.*[0-9])^[0-9A-Za-z]{6,12}$/
對於這個正則，我們只需要弄明白 (?=.*[0-9])^ 即可。
分開來看就是 (?=.*[0-9]) 和 ^。
表示開頭前面還有個位置（當然也是開頭，即同一個位置，想想之前的空字符類比）。
(?=.*[0-9])表示該位置后面的字符匹配 .*[0-9]，即，有任何多個任意字符，后面再跟個數字。
翻譯成大白話，就是接下來的字符，必須包含個數字。
另外一種解法
“至少包含兩種字符”的意思就是說，不能全部都是數字，也不能全部都是小寫字母，也不能全部都是大寫字母。
那么要求“不能全部都是數字”，怎么做呢？ (?!p) 出馬！
對應的正則是：var regex = /(?!^[0-9]{6,12}$)^[0-9A-Za-z]{6,12}$/;
三種“都不能”呢？
最終答案是：
var regex = /(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/;
console.log( regex.test("1234567") ); // false 全是數字
console.log( regex.test("abcdef") ); // false 全是小寫字母
console.log( regex.test("ABCDEFGH") ); // false 全是大寫字母
console.log( regex.test("ab23C") ); // false 不足6位
console.log( regex.test("ABCDEF234") ); // true 大寫字母和數字
console.log( regex.test("abcdEF234") ); // true 三者都有
其可視化形式是：
本章小結
重點掌握匹配位置的這 6 個錨，給我們的解決正則問題工具箱內添加了新工具。