正則表達(dá)式巧用 Unicode 匹配特殊字符

rubyshen 發(fā)布于2019-08-21 10:40 / 1930人閱讀

摘要：正則表達(dá)式巧用匹配特殊字符作者原文章首先聲明，本文所有的代碼都是在下面運(yùn)行，需要修改之后才能運(yùn)行，但是本文沒(méi)有涉及到太多的新特性，而且由于對(duì)修飾符不支持，最后的實(shí)現(xiàn)也基本是用的知識(shí)寫(xiě)的代碼。

正則表達(dá)式巧用 Unicode 匹配特殊字符

作者 @zwhu

原文章 @github

首先聲明，本文所有的代碼都是在 ES6 下面運(yùn)行，ES5需要修改之后才能運(yùn)行，但是本文沒(méi)有涉及到太多的ES6新特性，而且由于v8對(duì)u修飾符不支持，最后的實(shí)現(xiàn)也基本是用ES5的知識(shí)寫(xiě)的代碼。

最初我只是想記錄下正則表達(dá)式用unicode的方式來(lái)匹配特殊字符，寫(xiě)著寫(xiě)著發(fā)現(xiàn) v8 對(duì) u 修飾符的不支持，又轉(zhuǎn)而去研究怎么轉(zhuǎn)換字符串到utf-16的格式，在研究怎么轉(zhuǎn)換的過(guò)程中發(fā)現(xiàn)ES5的正則對(duì) unicode 編碼單元 > 0x10000 的字符串不支持，再轉(zhuǎn)而去實(shí)現(xiàn)了一遍對(duì)大于 0x10000 的字符串的轉(zhuǎn)換，特此記錄。

之前有遇到過(guò)一個(gè)實(shí)用正則表達(dá)式匹配特殊字符的需求，例如一段文本 "ab*cd$你好我也好] seg$me*ntfault hello,world"，用戶(hù)可以選擇用 * 或者 $ 來(lái)分割字符串。

在javascript中，$ 和 * 都是預(yù)定義的特殊字符，不能直接寫(xiě)在正則表達(dá)式中，而需要轉(zhuǎn)義，寫(xiě)成 /$/或者/*/。
我們需要根據(jù)用戶(hù)的選擇來(lái)寫(xiě)正則表達(dá)式，封裝成一個(gè)函數(shù)就是:

function reg(input) {
    return new RegExp(`${input}`)
}

這種寫(xiě)法初看上去很美好，將字符都轉(zhuǎn)義之后遇到一些特殊的字符可以匹配，然而現(xiàn)實(shí)是殘酷的：當(dāng)用戶(hù)輸入的是n或者t這一類(lèi)的字符的話(huà)，返回的正則表達(dá)式為/ /或者/ /,匹配的就是所有的制表符，這就違背了用戶(hù)的初衷。

通常有一種寫(xiě)法就是把所有需要轉(zhuǎn)義的特殊字符都列出來(lái)，然后再逐一匹配，這種寫(xiě)法很耗費(fèi)精力，而且可能因?yàn)闆](méi)有統(tǒng)計(jì)到的特殊字符而出現(xiàn)漏匹配的情況。

這個(gè)時(shí)候unicode就隆重登場(chǎng)了，在 JavaScript 中，我們也可以用unicode來(lái)表示一個(gè)字符，例如 "a" 可以寫(xiě)成"u{61}"， "你" 也可以寫(xiě)成 "u{4f60}"。

關(guān)于unicode的介紹大家可以看 Unicode與JavaScript詳解

ES5中提供了 charCodeAt() 方法來(lái)返回指定索引處字符的 Unicode 數(shù)值，但是 Unicode 編碼單元 > 0x10000 的除外，ES2015 中又增加了一個(gè)新的方法 codePointAt() 可以返回大于 0x10000 字符串的數(shù)值。返回的數(shù)值是十進(jìn)制的，此時(shí)我們還需要通過(guò)toString(16)轉(zhuǎn)成16進(jìn)制。
封裝之后的函數(shù)如下

function toUnicode(s) {
    return `u{${s.codePointAt().toString(16)}}`
}

toUnicode("$") -> "u{24}"

重新封裝reg函數(shù)為

function reg(input) {
    return new RegExp(`${toUnicode(input)}`, "u")
}

其實(shí)寫(xiě)到這里，我希望是對(duì)的，但是很不幸，V8 不支持 RegExp 的 u 修飾符。V8支持的話(huà)，寫(xiě)到這里就應(yīng)該結(jié)束了，沒(méi)關(guān)系，這里只是提供一種用unicode的方式來(lái)轉(zhuǎn)義特殊字符的思想。

雖然v8不支持u修飾符，作為一個(gè)有追求的碼農(nóng)，當(dāng)然不能止步于此，我們也可以使用其他方法繼續(xù)把這個(gè)完善

function toUnicode(s) {
  var a = `u${utf(s.charCodeAt(0).toString(16))}`
  if(s.charCodeAt(1))
    a = `${a}u${utf(s.charCodeAt(1).toString(16))}` 
  return a      
}

function utf(s) {
    return Array.from("00").concat(Array.from(s)).slice(-4).join("")
}

// 這里用var而沒(méi)有用let聲明，是因?yàn)檫@些代碼直接復(fù)制到 chrome 的控制臺(tái)下就可以看到執(zhí)行結(jié)果
// 測(cè)試一下
// toUnicode("a")   --> "u0061"
// toUnitcode("?")  --> "ud842udfb7"

function reg(input) {
    return new RegExp(`${toUnicode(input)}`)
}
// 再測(cè)試一下
reg("$").test("$") --> true

寫(xiě)完啦，看到最后的同學(xué)，如果覺(jué)得對(duì)你有幫助的話(huà)，就點(diǎn)個(gè)推薦唄。