正則表達(dá)式入門實(shí)踐（一）

chanthuang 發(fā)布于2019-08-22 13:45 / 1319人閱讀

摘要：一前言正則表達(dá)式入門實(shí)踐系列文章適合熟悉至少使用過正則表達(dá)式的同學(xué)，在文章開始的時(shí)候我們都會(huì)帶著問題去思考如何正確應(yīng)用正則表達(dá)式解決出現(xiàn)的問題，在解決問題的過程中增長你的知識，提高你的實(shí)踐能力。

一前言

正則表達(dá)式入門實(shí)踐系列文章適合熟悉至少使用過正則表達(dá)式的同學(xué)，在文章開始的時(shí)候我們都會(huì)帶著問題去思考如何正確應(yīng)用正則表達(dá)式解決出現(xiàn)的問題，在解決問題的過程中增長你的知識，提高你的實(shí)踐能力。所以該系列文章是偏實(shí)踐的文章，讀者一定要手動(dòng)編寫正則表達(dá)式提高自己的記憶。筆者能力有限，文章有疏漏之處，還請留言指正。

二正文 1.從一道面試題談?wù)齽t表達(dá)式

問題：正則表達(dá)式將阿拉伯?dāng)?shù)字每隔三位為一逗號分離
例如：11500000 -> 11,500,000

提示：正則表達(dá)式都是從左向右匹配的，而這個(gè)問題好像是從右向左的規(guī)則。但是不要忘了JS字符串強(qiáng)大的反轉(zhuǎn)能力。最重要的是如何正確處理三個(gè)數(shù)字一組，零寬項(xiàng)斷言用過嗎？

"11500000".split("").reverse().join("").replace(/(d{3})(?=[^$])/g, "$1,").split("").reverse().join("");
(1). (?=[^$]) 會(huì)匹配除字符除末尾所有的位置
(2). /(d{3})(?=[^$])/ 會(huì)匹配連續(xù)的三個(gè)數(shù)字，并且這三個(gè)數(shù)字不能在字符串的末尾
(3)replace(/(d{3})/g, "$1,")，如果字符串長度剛好是三的倍數(shù)，那最后三個(gè)字符后也會(huì)加上逗號。比如 123456789.replace(/(d{3})/g, "$1,"); // 123,456,789,

這里用到的正則表達(dá)式就是：

const pattern = /(d{3})(?=[^$])/g;

//千萬不要寫成：
//const pattern = "/(d{3})(?=[^$])/g";
//這樣pattern就不是正則了，而是真正的字符串

正則表達(dá)式的創(chuàng)建方式有兩種：

（1）字面量形式，用//包裹著，如上：/(d{3})(?=[^$])/，其中的g代表全局匹配
（2）函數(shù)的形式，如：new RegExp("(d{3})(?=[^$])","g");

(1)與(2)的區(qū)別：

1）最重要的一點(diǎn)，（2）函數(shù)形式第一個(gè)參數(shù)是以字符串的形式傳入的，這就為動(dòng)態(tài)創(chuàng)建正則表達(dá)式提供了可能，在標(biāo)題2中你可以領(lǐng)略到它的威力。
2）利用函數(shù)創(chuàng)建正則表達(dá)式的時(shí)候要注意一些字符的轉(zhuǎn)義，比如d,以為我們并不是匹配一個(gè)一個(gè)d，d要用在一起表示匹配所有的數(shù)字，所以這里的需要轉(zhuǎn)義，轉(zhuǎn)義的方式也很簡單，就是加一個(gè)""
3)注意它們創(chuàng)建的方式。（2）函數(shù)中的第一個(gè)參數(shù)和（1）//里面的內(nèi)容對應(yīng)，第二個(gè)參數(shù)和g修飾符對應(yīng)。

2.用正則實(shí)現(xiàn)lodash.js的_chunk函數(shù)

Example：

_.chunk(["a", "b", "c", "d"], 2);
// => [["a", "b"], ["c", "d"]]
 
_.chunk(["a", "b", "c", "d"], 3);
// => [["a", "b", "c"], ["d"]]

_.chunk函數(shù)傳入兩個(gè)參數(shù)，根據(jù)第二個(gè)size把第一個(gè)參數(shù)數(shù)組切分。有沒有覺得這個(gè)和1.面試題有點(diǎn)像呢？只不過這里size不一定是3.
傳統(tǒng)的思考方法是：遍歷這個(gè)數(shù)組，遞增size，使用slice函數(shù)生成新的數(shù)組返回。

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;
}

那么思考如何用正則來實(shí)現(xiàn)呢？根據(jù)1.的正則表達(dá)式你能試著寫一下嗎？
思考30秒～～～～～～～～～～～～～～～～～～～～～～～～～～～

其實(shí)答案很簡單：

const chunk =(array,size) =>{
    const reg = new RegExp(`(w{${size}})(?=[^$])`,"g");
   return  array.join("").replace(reg,"$1-").split("-");
}

使用函數(shù)的方式創(chuàng)建正則表達(dá)式就可以實(shí)現(xiàn)。只不過這里使用的是w詳相當(dāng)于[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.開啟真正的正則表達(dá)式

經(jīng)過兩個(gè)問題的引導(dǎo)，我們開始正式的正則表達(dá)式學(xué)習(xí)。
推薦幾篇文章，大家可以先看一下了解正則表達(dá)式的基本知識。
參考鏈接：
全面講解：https://segmentfault.com/a/11...

三后記

GPU云服務(wù)器云服務(wù)器正則表達(dá)式入門 python正則實(shí)踐正則正則表達(dá)式正則匹配正則表達(dá)式

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/92396.html

發(fā)表評論

登陸后可評論

0條評論

chanthuang

男|高級講師

我要關(guān)注我要私信

TA的文章

路橋凝冰在線監(jiān)測系統(tǒng)裝置

閱讀 3613·2021-10-09 09:43
新網(wǎng)：7個(gè)域名(.xyz,.ltd,.fun,.online,.shop,.site,.space)

閱讀 6260·2021-09-07 10:15
如何隱藏scroll-Y縱向滾動(dòng)條，并不影響內(nèi)容滾動(dòng)的方法

閱讀 2807·2019-08-30 14:03
SASS

閱讀 3144·2019-08-29 11:01
20 個(gè)常用的 CSS 技巧

閱讀 1834·2019-08-29 10:56
CSS HACK

閱讀 1162·2019-08-28 17:52
tcp的認(rèn)知和應(yīng)用

閱讀 3564·2019-08-26 11:42
第八集: 從零開始實(shí)現(xiàn)一套pc端vue的ui組件庫(input, textarea組件)

閱讀 2627·2019-08-26 10:33

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

正則表達(dá)式入門實(shí)踐（一）

相關(guān)文章

正則表達(dá)式簡單入門 & 實(shí)踐

前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總