資訊專欄INFORMATION COLUMN
摘要：一前言正則表達式入門實踐系列文章適合熟悉至少使用過正則表達式的同學，在文章開始的時候我們都會帶著問題去思考如何正確應用正則表達式解決出現的問題，在解決問題的過程中增長你的知識，提高你的實踐能力。
一 前言
正則表達式入門實踐系列文章適合熟悉至少使用過正則表達式的同學，在文章開始的時候我們都會帶著問題去思考如何正確應用正則表達式解決出現的問題，在解決問題的過程中增長你的知識，提高你的實踐能力。所以該系列文章是偏實踐的文章，讀者一定要手動編寫正則表達式提高自己的記憶。筆者能力有限，文章有疏漏之處，還請留言指正。
二 正文 1.從一道面試題談正則表達式問題：正則表達式將阿拉伯數字每隔三位為一逗號分離
例如：11500000 -> 11,500,000
提示：正則表達式都是從左向右匹配的，而這個問題好像是從右向左的規則。但是不要忘了JS字符串強大的反轉能力。最重要的是如何正確處理三個數字一組，零寬項斷言用過嗎？
"11500000".split("").reverse().join("").replace(/(d{3})(?=[^$])/g, "$1,").split("").reverse().join("");
(1). (?=[^$]) 會匹配除字符除末尾所有的位置
(2). /(d{3})(?=[^$])/ 會匹配連續的三個數字，并且這三個數字不能在字符串的末尾
(3)replace(/(d{3})/g, "$1,")，如果字符串長度剛好是三的倍數，那最后三個字符后也會加上逗號。比如 123456789.replace(/(d{3})/g, "$1,"); // 123,456,789,
這里用到的正則表達式就是：
const pattern = /(d{3})(?=[^$])/g;
//千萬不要寫成：
//const pattern = "/(d{3})(?=[^$])/g";
//這樣pattern就不是正則了，而是真正的字符串
正則表達式的創建方式有兩種：
（1）字面量形式，用//包裹著，如上：/(d{3})(?=[^$])/，其中的g代表全局匹配
（2）函數的形式，如：new RegExp("(d{3})(?=[^$])","g");
(1)與(2)的區別：
1）最重要的一點，（2）函數形式第一個參數是以字符串的形式傳入的，這就為動態創建正則表達式提供了可能，在標題2中你可以領略到它的威力。 2）利用函數創建正則表達式的時候要注意一些字符的轉義，比如d,以為我們并不是匹配一個一個d，d要用在一起表示匹配所有的數字，所以這里的需要轉義，轉義的方式也很簡單，就是加一個"" 3)注意它們創建的方式。（2）函數中的第一個參數和（1）//里面的內容對應，第二個參數和g修飾符對應。2.用正則實現lodash.js的_chunk函數
Example：
_.chunk(["a", "b", "c", "d"], 2); // => [["a", "b"], ["c", "d"]] _.chunk(["a", "b", "c", "d"], 3); // => [["a", "b", "c"], ["d"]]
_.chunk函數傳入兩個參數，根據第二個size把第一個參數數組切分。有沒有覺得這個和1.面試題有點像呢？只不過這里size不一定是3.
傳統的思考方法是：遍歷這個數組，遞增size，使用slice函數生成新的數組返回。
function chunk(array,size){
const length = array.length;
const block = Math.floor(length/size);
console.log(block);
const extra = length % size;
const newArray = [];
const index = 0;
for(let i=1;i<=block;i++){
newArray.push(array.slice((i-1)*size,i*size));
}
if(extra > 0){//處理末尾不足size的情況
newArray.push(array.slice(-extra))
}
return newArray;
}
那么思考如何用正則來實現呢？根據1.的正則表達式你能試著寫一下嗎？
思考30秒～～～～～～～～～～～～～～～～～～～～～～～～～～～
其實答案很簡單：
const chunk =(array,size) =>{
const reg = new RegExp(`(w{${size}})(?=[^$])`,"g");
return array.join("").replace(reg,"$1-").split("-");
}
使用函數的方式創建正則表達式就可以實現。只不過這里使用的是w詳相當于[0-9a-zA-Z].
源碼上的處理兼容了多種可能。
下面附上庫中源碼：
function chunk(array, size) {
size = Math.max(size, 0)
const length = array == null ? 0 : array.length
if (!length || size < 1) {
return []
}
let index = 0
let resIndex = 0
const result = new Array(Math.ceil(length / size))
while (index < length) {
result[resIndex++] = slice(array, index, (index += size))
}
return result
}
3.開啟真正的正則表達式
經過兩個問題的引導，我們開始正式的正則表達式學習。
推薦幾篇文章，大家可以先看一下了解正則表達式的基本知識。
參考鏈接：
全面講解：https://segmentfault.com/a/11...
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92396.html
摘要：說到郵箱格式，我們簡單分析下郵箱的命名方式一般分為三部分郵件地址郵箱域名地址郵件地址部分的規則如下英文字母數字下劃線中劃線點舉幾個栗子根據以上規則，我們先寫一下郵件地址部分圖示沒什么問題繼續往下走。 前言 平時的工作中有很多地方都要用到正則表達式，不得不說，正則的表達式非常強大，比如，我們常用的jquery選擇器，非常方便，jquery的源碼中，選擇器部分應用了大量的正則表達式。然而很...
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
閱讀 3550·2021-10-09 09:43
閱讀 6148·2021-09-07 10:15
閱讀 2746·2019-08-30 14:03
閱讀 3073·2019-08-29 11:01
閱讀 1715·2019-08-29 10:56
閱讀 1074·2019-08-28 17:52
閱讀 3501·2019-08-26 11:42
閱讀 2547·2019-08-26 10:33
