前言

熟悉我的朋友可能會(huì)知道，我一向是不寫(xiě)熱點(diǎn)的。為什么不寫(xiě)呢？是因?yàn)槲也魂P(guān)注熱點(diǎn)嗎？其實(shí)也不是。有些事件我還是很關(guān)注的，也確實(shí)有不少想法和觀點(diǎn)。但我一直奉行一個(gè)原則，就是：要做有生命力的內(nèi)容。

對(duì)于前端工程師來(lái)說(shuō), 正則表達(dá)式也許是javascript語(yǔ)言中最晦澀難懂的, 但是也往往是最簡(jiǎn)潔的.工作中遇到的很多問(wèn)題,諸如搜索,查找, 高亮關(guān)鍵字等都可以使用正則輕松解決,所以有句話(huà)說(shuō)的好:

正則用的好, 加班遠(yuǎn)離我.

今天筆者就復(fù)盤(pán)一下javascript正則表達(dá)式的一些使用技巧和高級(jí)API, 并通過(guò)幾個(gè)實(shí)際的案例,來(lái)展現(xiàn)正則表達(dá)式的魅力.如果大家覺(jué)得正則表達(dá)式理解起來(lái)很麻煩,也可以使用如下在線網(wǎng)站, 只需要輸入你的正則表達(dá)式, 它就能以圖形的方式將你的正則展示出來(lái):

圖片

你將收獲

• 模式匹配的用法(x)
• 非捕獲括號(hào)的模式匹配(?:x)
• 先行斷言x(?=y)
• 后行斷言(?<=y)x
• 正向否定查找x(?!y)
• 反向否定查找(?<!y)x
• 字符集合和反向字符集合的用法[xyz]/[^xyz]
• 詞邊界和非單詞邊界匹配/b/B
• 空白字符/非空白字符匹配/s/S
• 單字字符/非單字字符匹配/w/W
• 正則10大應(yīng)用案例

正文

對(duì)于正則的基本用法筆者這里就不總結(jié)了,這里重點(diǎn)介紹一些比較有用且難懂的知識(shí)點(diǎn).在最后筆者會(huì)寫(xiě)10個(gè)經(jīng)典的正則案例, 供大家學(xué)習(xí)參考, 或者在工作中直接使用.

圖片

以上幾點(diǎn)應(yīng)用筆者在下文中會(huì)寫(xiě)幾個(gè)例子來(lái)講解.

模式匹配的用法(x)

模式匹配主要用來(lái)匹配某一類(lèi)字符串并記住匹配項(xiàng).

案例:

let str = 'xuxi is xuxi is'
let reg = /(xuxi) (is) \1 \2/g
reg.test(str)  // true    (1)
str.replace(reg, '$1 $2')  // xuxi is  (2)
復(fù)制代碼

解釋: 其中括號(hào)被稱(chēng)為捕獲括號(hào), 模式中的 \1 和 \2 表示第一個(gè)和第二個(gè)被捕獲括號(hào)匹配的子字符串，即 xuxi 和 is，匹配了原字符串中的后兩個(gè)單詞, 因此(1)中運(yùn)行的結(jié)果為true. 當(dāng)我們?cè)谧址惺褂胷eplace時(shí), 我們可以使用$1, $2這樣的方式獲取第n個(gè)匹配項(xiàng),并用來(lái)替換字符串. 如(2)中的運(yùn)行結(jié)果.

非捕獲括號(hào)的模式匹配(?:x)

主要用來(lái)匹配某一類(lèi)字符串但不記住匹配項(xiàng).

案例:

let str = 'xuxixuxi'
let reg = /(?:xuxi){1,2}/g
reg.test(str)  // true    (1)
復(fù)制代碼

圖片

解釋: 其中(?:)被稱(chēng)為非捕獲括號(hào), 我們可以使用它匹配一組字符但是并不記住該字符,一般用來(lái)判斷某類(lèi)字符是否存在于某字符串中.

先行斷言x(?=y)

先行斷言: 匹配'x'僅僅當(dāng)'x'后面跟著'y'.

案例:

let str = '王者融化'
let reg = /王(?=者)/
reg.test(str)  // true    (1)
復(fù)制代碼

解釋: /王(?=者)/會(huì)匹配到"王"僅當(dāng)它后面跟著"者".但是"者"不屬于匹配結(jié)果的一部分.

后行斷言(?<=y)x

后行斷言: 匹配'x'僅當(dāng)'x'前面是'y'.

案例:

let str = 'xuxiA'
let reg = /(?<=xuxi)A/
reg.test(str)  // true    (1)
復(fù)制代碼

解釋: /(?<=xuxi)A/會(huì)匹配到A僅當(dāng)它前面為xuxi.但是xuxi不屬于匹配結(jié)果的一部分.

正向否定查找x(?!y)

正向否定查找: 僅僅當(dāng)'x'后面不跟著'y'時(shí)匹配'x'.

案例:

let str = '3.1415'
let reg = /\d+(?!\.)/
reg.exec(str)  // [1415]   (1)
復(fù)制代碼

圖片

解釋: 其中/\d+(?!.)/匹配一個(gè)或多個(gè)數(shù)字,當(dāng)且僅當(dāng)它后面沒(méi)有小數(shù)點(diǎn)時(shí), 所以(1)中執(zhí)行后會(huì)匹配到1415而不是3.1415

反向否定查找(?<!y)x

反向否定查找: 僅僅當(dāng)'x'前面不是'y'時(shí)匹配'x'.

案例:

let str = '3.1415'
let reg = /(?<!\.)\d+/
reg.exec(str)  // [3]    (1)
復(fù)制代碼

解釋: /(?<!.)\d+/匹配一個(gè)數(shù)字,當(dāng)且僅當(dāng)前面字符不是.時(shí),此時(shí)將匹配3.

字符集合和反向字符集合的用法 [xyz] / [^xyz]

[xyz]: 一個(gè)字符集合。匹配方括號(hào)中的任意字符，包括轉(zhuǎn)義序列。你可以使用破折號(hào)（-）來(lái)指定一個(gè)字符范圍。

[^xyz]: 一個(gè)反向字符集。也就是說(shuō)，它匹配任何沒(méi)有包含在方括號(hào)中的字符。你可以使用破折號(hào)（-）來(lái)指定一個(gè)字符范圍。任何普通字符在這里都是起作用的

案例:

let str = 'abcd'
let reg1 = /[a-c]+/
let reg2 = /[^d]$/
reg1.test(str)  // true    (1)
reg2.test(str)  // false    (2)
復(fù)制代碼

圖片

圖片

解釋: (1)中將返回true因?yàn)樽址邪琣-c中的字符, (2)中獎(jiǎng)返回false, 因?yàn)樽址Y(jié)尾為d, 但正則reg2需要匹配結(jié)尾不為d的字符串.

詞邊界和非單詞邊界匹配\b\B

\b 匹配一個(gè)詞的邊界。一個(gè)詞的邊界就是一個(gè)詞不被另外一個(gè)“字”字符跟隨的位置或者前面跟其他“字”字符的位置，例如在字母和空格之間。注意，匹配中不包括匹配的字邊界。換句話(huà)說(shuō)，一個(gè)匹配的詞的邊界的內(nèi)容的長(zhǎng)度是0。

\B 匹配一個(gè)非單詞邊界。匹配如下幾種情況：(1)字符串第一個(gè)字符為非“字”字符 (2)字符串最后一個(gè)字符為非“字”字符 (3)兩個(gè)單詞字符之間 (4)兩個(gè)非單詞字符之間 (5)空字符串

案例:

let str = 'xuxi'
let reg1 = /xi\b/
let reg2 = /xu\B/
reg1.exec(str)  // [xi]    (1)
reg2.exec(str)  // [xu]    (2)
復(fù)制代碼

圖片

圖片

解釋: (1)中匹配到了單詞邊界,即xi, 為該字符串的末尾.(2)中應(yīng)為xu為非單詞邊界,所以會(huì)被其匹配到.

空白字符/非空白字符匹配\s\S

\s: 匹配一個(gè)空白字符，包括空格、制表符、換頁(yè)符和換行符.

\S: 匹配一個(gè)非空白字符

案例:

let str = 'xuxi is'
let reg1 = /.*\s/g
let reg2 = /\S\w*/g
reg1.exec(str)  // [xuxi]    (1)
reg2.exec(str)  // [xuxi]    (2)
復(fù)制代碼

圖片

圖片

解釋: (1)和(2)中執(zhí)行之后都將匹配xuxi, 一個(gè)是空白字符之前的匹配, 一個(gè)是非空白字符的匹配.

單字字符/非單字字符匹配\w/W

\w: 匹配一個(gè)單字字符（字母、數(shù)字或者下劃線）。等價(jià)于 [A-Za-z0-9_]。

\W: 匹配一個(gè)非單字字符。等價(jià)于 [^A-Za-z0-9_]

圖片

圖片

由于以上2種模式比較簡(jiǎn)單,這里就不一一介紹了.

正則10大應(yīng)用案例

接下來(lái)筆者將總結(jié)幾個(gè)使用正則的實(shí)際應(yīng)用,供大家學(xué)習(xí)和參考.

1. 去除字符串內(nèi)指定元素的標(biāo)簽

function trimTag(tagName, htmlStr) {
  let reg = new RegExp(`<${tagName}(\\s.*)*>(\\n|.)*<\\/${tagName}>`, "g")
  return htmlStr.replace(reg, '')
}
復(fù)制代碼

2. 短橫線命名轉(zhuǎn)駝峰命名

// 短橫線轉(zhuǎn)駝峰命名, flag = 0為小駝峰, 1為大駝峰
function toCamelCase(str, flag = 0) {
  if(flag) {
    return str[0].toUpperCase() + str.slice(1).replace(/-(\w)/g, ($0, $1) => $1.toUpperCase())
  }else {
    return str.replace(/-(\w)/g, ($0, $1) => $1.toUpperCase())
  }
}
復(fù)制代碼

3. 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的模板引擎

關(guān)于實(shí)現(xiàn)一個(gè)模板引擎, 實(shí)現(xiàn)中用到了大量的正則,建議感興趣的可以直接看實(shí)現(xiàn)一個(gè)簡(jiǎn)單的模板引擎.

4. 去除字符串中的空格符

function trimAll(str) {
  return str.replace(/\s*/g,"")
}
復(fù)制代碼

5. 判斷指定格式的數(shù)據(jù)輸入合法性

function numCheck(str, specialNum) {
  if(str.indexOf(',') > -1) {
      return str.splite(',').every(item=>this.numCheck(item));
  } else {
      return str.split(specialNum).length === 2;
  }
}
復(fù)制代碼

6. 去除url參數(shù)字符串中值為空的字段

// 去除url參數(shù)字符串中值為空的字段
const trimParmas = (parmaStr:string = '') => {
  return parmaStr.replace(/((\w*?)=&|(&\w*?=)$)/g, '')
}
復(fù)制代碼

7. 將瀏覽器參數(shù)字符串轉(zhuǎn)化為參數(shù)對(duì)象

function unParams(params = '?a=1&b=2&c=3') {
  let obj = {}
  params && params.replace(/((\w*)=([\.a-z0-9A-Z]*)?)?/g, (m,a,b,c) => {
    if(b || c) obj[b] = c
  })
  return obj
}
復(fù)制代碼

8. 計(jì)算字符串字節(jié)數(shù)

/**
 * 計(jì)算字符串字節(jié)數(shù)
 * @param str
 * @desc 一個(gè)中文占2個(gè)字節(jié), 一個(gè)英文占一個(gè)字節(jié)
 */
function computeStringByte(str) {
  let size = 0,
  strArr = str.split(''),
  reg = /[\u4e00-\u9fa5]/   // 判斷是否為中文
  for(let i = strArr.length; i--; i>=0) {
    if(reg.test(strArr[i])) {
      size+= 2
    }else {
      size += 1
    }
  }
  return size
}
復(fù)制代碼

9. 匹配是否包含中文字符

function hasCn(str) {
  let reg = /[\u4e00-\u9fa5]/g
  return reg.test(str)
}
復(fù)制代碼

10. 實(shí)現(xiàn)搜索聯(lián)想功能

function searchLink(keyword) {
  // 模擬后端返回?cái)?shù)據(jù)
  let list = ['abc', 'ab', 'a', 'bcd', 'edf', 'abd'];
  let reg = new RegExp(keyword, 'i');
  return list.filter(item => reg.test(item))
}
復(fù)制代碼