摘要:正则表达式巧用匹配特殊字符作者原文章首先声明,本文所有的代码都是在下面运行,需要修改之后才能运行,但是本文没有涉及到太多的新特性,而且由于对修饰符不支持,最后的实现也基本是用的知识写的代码。

正则表达式巧用 Unicode 匹配特殊字符

作者 @zwhu

原文章 @github

首先声明,本文所有的代码都是在 ES6 下面运行,ES5需要修改之后才能运行,但是本文没有涉及到太多的ES6新特性,而且由于v8对u修饰符不支持,最后的实现也基本是用ES5的知识写的代码。

最初我只是想记录下正则表达式用unicode的方式来匹配特殊字符,写着写着发现 v8 对 u 修饰符的不支持,又转而去研究怎么转换字符串到utf-16的格式,在研究怎么转换的过程中发现ES5的正则对 unicode 编码单元 > 0x10000 的字符串不支持,再转而去实现了一遍对大于 0x10000 的字符串的转换,特此记录。

之前有遇到过一个实用正则表达式匹配特殊字符的需求,例如一段文本 "ab*cd$你好我也好] seg$me*ntfault hello,world" ,用户可以选择用 * 或者 $ 来分割字符串。

在javascript中, $ * 都是预定义的特殊字符,不能直接写在正则表达式中,而需要转义,写成 /$/ 或者 /*/
我们需要根据用户的选择来写正则表达式,封装成一个函数就是:

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

这种写法初看上去很美好,将字符都转义之后遇到一些特殊的字符可以匹配,然而现实是残酷的:当用户输入的是n或者t这一类的字符的话,返回的正则表达式为/ /或者/ /,匹配的就是所有的制表符,这就违背了用户的初衷。

通常有一种写法就是把所有需要转义的特殊字符都列出来,然后再逐一匹配,这种写法很耗费精力,而且可能因为没有统计到的特殊字符而出现漏匹配的情况。

这个时候unicode就隆重登场了,在 JavaScript 中,我们也可以用unicode来表示一个字符,例如 "a" 可以写成"u{61}", "你" 也可以写成 "u{4f60}"。

关于unicode的介绍大家可以看 Unicode与JavaScript详解

ES5中提供了 charCodeAt() 方法来返回指定索引处字符的 Unicode 数值,但是 Unicode 编码单元 > 0x10000 的除外,ES2015 中又增加了一个新的方法 codePointAt() 可以返回大于 0x10000 字符串的数值。返回的数值是十进制的,此时我们还需要通过toString(16)转成16进制。
封装之后的函数如下

function toUnicode(s) {
    return `u{${s.codePointAt().toString(16)}}`
toUnicode("$") -> "u{24}"

重新封装reg函数为

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

其实写到这里,我希望是对的,但是很不幸,V8 不支持 RegExp 的 u 修饰符。V8支持的话,写到这里就应该结束了,没关系,这里只是提供一种用unicode的方式来转义特殊字符的思想。

虽然v8不支持u修饰符,作为一个有追求的码农,当然不能止步于此,我们也可以使用其他方法继续把这个完善

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而没有用let声明,是因为这些代码直接复制到 chrome 的控制台下就可以看到执行结果
// 测试一下
// toUnicode("a")   --> "u0061"
// toUnitcode("?")  --> "ud842udfb7"
function reg(input) {
    return new RegExp(`${toUnicode(input)}`)
// 再测试一下
reg("$").test("$") --> true

写完啦,看到最后的同学,如果觉得对你有帮助的话,就点个推荐呗。

  • 【历史上的今天】11 月 16 日:RISC-V 领导者出生;微软发布 Windows CE;电子管

    阅读 2979·2021-11-17 09:33

  • spinservers:圣何塞10Gbps带宽服务器$109/月起,达拉斯10Gbps服务器$89/

    阅读 3534·2021-09-27 13:56

  • 大一总结录

    阅读 562·2021-09-08 09:36

  • 【每日一包0026】delegates

    阅读 517·2019-08-30 15:54

  • 11月百度面试题(社招)

    阅读 416·2019-08-29 17:29

  • svg和css3创建环形渐变进度条

    阅读 695·2019-08-29 17:21

  • css中grid属性的使用

    阅读 1488·2019-08-29 16:59

  • 写网页时拿起就用的小技巧

    阅读 2536·2019-08-29 13:03

  •