专栏首页全沾开发(huā)正则表达式-JavaScript

正则表达式-JavaScript

正则表达式-JavaScript

什么是正则表达式

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中,正则表达式也是对象。 这些模式被用于 RegExpexectest 方法, 以及 Stringmatchreplacesearchsplit 方法。

正则表达式存在于大部分的编程语言,就算是在写shell时也会不经意的用到正则。 比如大家最喜欢的rm -rf ./*,这里边的*就是正则的通配符,匹配任意字符。

JavaScript也有正则表达式的实现,差不多就长这个样子:/\d/(匹配一个数字)。 个人认为正则所用到的地方还是很多的,比如模版字符的替换、解析URL,表单验证 等等一系列。 如果在Node.js中用处就更为多,比如请求头的解析、文件内容的批量替换以及写爬虫时候一定会遇到的解析HTML标签。

正则表达式在JavaScript中的实现

JavaScript中的语法

赘述那些特殊字符的作用并没有什么意义,浪费时间。 推荐MDN的文档:基础的正则表达式特殊字符

关于正则表达式,个人认为以下几个比较重要:

贪婪模式与非贪婪模式

P.S. 关于贪婪模式非贪婪模式,发现有些地方会拿这样的例子:

/.+/ // 贪婪模式
/.+?/ // 非贪婪模式

仅仅拿这样简单的例子来说的话,有点儿扯淡

// 假设有这样的一个字符串
let html = '<p><span>text1</span><span>text2</span></p>'

// 现在我们要取出第一个`span`中的文本,于是我们写了这样的正则
html.match(/<span>(.+)<\/span>/)
// 却发现匹配到的竟然是 text1</span><span>text2
// 这是因为 我们括号中写的是 `(.+)` .为匹配任意字符, +则表示匹配一次以上。
// 当规则匹配到了`text1`的时候,还会继续查找下一个,发现`<`也命中了`.`这个规则
// 于是就持续的往后找,知道找到最后一个span,结束本次匹配。

// 但是当我们把正则修改成这样以后:
html.match(/<span>(.+?)<\/span>/)
// 这次就能匹配到我们想要的结果了
// `?`的作为是,匹配`0~1`次规则
// 但是如果跟在`*`、`+`之类的表示数量的特殊字符后,含义就会变为匹配尽量少的字符。
// 当正则匹配到了text1后,判断后边的</span>命中了规则,就直接返回结果,不会往后继续匹配。

简单来说就是:

  1. 贪婪模式,能拿多少拿多少
  2. 非贪婪模式,能拿多少拿多少

捕获组

/123(\d+)0/ 括号中的被称之为捕获组。

捕获组有很多的作用,比如处理一些日期格式的转换。

let date = '2017-11-21'

date.replace(/^(\d{4})-(\d{2})-(\d{2})$/, '$2/$3/$1')

又或者可以直接写在正则表达式中作为前边重复项的匹配。

let template = 'hello helloworl'
template.match(/(\w+) \1/) // => hello hello

// 我们可以用它来匹配出month和day数字相同的数据
let dateList = `
2017-10-10
2017-11-12
2017-12-12
`

dateList.match(/^\d{4}-(\d{2})-(\1)/gm) // => ["2017-10-10", "2017-12-12"]

非捕获组

我们读取了一个文本文件,里边是一个名单列表 我们想要取出所有Stark的名字(但是并不想要姓氏,因为都叫Stark),我们就可以写这样的正则:

let nameList = `
Brandon Stark
Sansa Stark
John Snow
`

nameList.match(/^\w+(?=\s?Stark)/gm) // => ["Brandon", "Sansa"]

上边的(?=)就是非捕获组,意思就是规则会被命中,但是在结果中不会包含它。

比如我们想实现一个比较常用的功能,给数组添加千分位:

function numberWithCommas (x = 0) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

numberWithCommas(123) // => 123
numberWithCommas(1234) // => 1,234

\B代表匹配一个非单词边界,也就是说,实际他并不会替换掉任何的元素。 其次,后边的非捕获组这么定义:存在三的倍数个数字(3、6、9),并且这些数字后边没有再跟着其他的数字。 因为在非捕获组中使用的是(\d{3})+,贪婪模式,所以就会尽可能多的去匹配。 如果传入字符串1234567,则第一次匹配的位置在12之间,第二次匹配的位置在45之间。 获得的最终字符串就是1,234,567

如何使用正则表达式

RegExp对象

创建RegExp对象有两种方式:

  1. 直接字面量的声明:/\d/g
  2. 通过构造函数进行创建:new RegExp('\d', 'g')

RegExp对象提供了两个方法:

exec

方法执行传入一个字符串,然后对该字符串进行匹配,如果匹配失败则直接返回null 如果匹配成功则会返回一个数组:

let reg = /([a-z])\d+/
let str = 'a233'
let result = reg.exec(str) // => ['a233', 'a', ...]

P.S. 如果正则表达式有g标识,在每次执行完exec后,该正则对象的lastIndex值就会被改变,该值表示下次匹配的开始下标

let reg = /([a-z])\d+/g
let str = 'a233'
reg.exec(str) // => ['a233', 'a', ...]
// reg.lastIndex = 4
reg.exec(str) // => null
test

方法用来检查正则是否能成功匹配该字符串

let reg = /^Hello/

reg.test('Hello World') // => true
reg.test('Say Hello') // => false

test方法一般来说多用在检索或者过滤的地方。 比如我们做一些筛选filter的操作,用test就是一个很好的选择。

// 筛选出所有名字为 Niko的数据
let data = [{ name: 'Niko Bellic' }, { name: 'Roman Bellic'}]

data.filter(({name}) => /^Niko/.test(name)) // => [{ name: 'Niko Bellic' }]

String对象

除了RegExp对象实现的一些方法外,String同样提供了一套方法供大家来使用。

传入一个正则表达式,并使用该表达式进行匹配; 如果匹配失败,则会返回-1 如果匹配成功,则会返回匹配开始的下标。 可以理解为是一个正则版的indexOf

'Hi Niko'.search(/Niko/) // => 3
'Hi Niko'.search(/Roman/) // => -1

// 如果传入的参数为一个字符串,则会将其转换为`RegExp`对象
'Hello'.search('llo') // => 2
split

split方法应该是比较常用的,用得最多的估计就是[].split(',')了。。

然而这个参数也是可以塞进去一个正则表达式的。

'1,2|3'.split(/,|\|/) // => [1, 2, 3]

// 比如我们要将一个日期时间字符串进行分割
let date = '2017-11-21 23:40:56'

date.split(/-|\s|:/)

// 又或者我们有这么一个字符串,要将它正确的分割
let arr = '1,2,3,4,[5,6,7]'

arr.split(',') // => ["1", "2", "3", "4", "[5", "6", "7]"] 这个结果肯定是不对的。

// 所以我们可以这么写
arr.split(/,(?![,\d]+])/) // => ["1", "2", "3", "4", "[5,6,7]"]

该条规则会匹配,,但是,后边还有一个限定条件,那就是绝对不能出现数字+,的组合并且以一个]结尾。 这样就会使[4,5,6]里边的,不被匹配到。

match

match方法用来检索字符串,并返回匹配的结果。

如果正则没有添加g标识的话,返回值与exec类似。 但是如果添加了g标识,则会返回一个数组,数组的item为满足匹配条件的子串。 这将会无视掉所有的捕获组。 拿上边的那个解析HTML来说

let html = '<p><span>text1</span><span>text2</span></p>'

html.match(/<span>(.+?)<\/span>/g) // => ["<span>text1</span>", "<span>text2</span>"]
replace

replace应该是与正则有关的应用最多的一个函数。 最简单的模版引擎可以基于replace来做。 日期格式转换也可以通过replace来做。 甚至match的功能也可以通过replace来实现(虽说代码会看起来很丑)

replace接收两个参数 replace(str|regexp, newStr|callback)

第一个参数可以是一个字符串 也可以是一个正则表达式,转换规则同上几个方法。 第二个参数却是可以传入一个字符串,也可以传入一个回调函数。

当传入字符串时,会将正则所匹配到的字串替换为该字符串。 当传入回调函数时,则会在匹配到子串时调用该回调,回调函数的返回值会替换被匹配到的子串。

'Hi: Jhon'.replace(/Hi:\s(\w+)/g, 'Hi: $1 Snow') // => Hi: Jhon Snow

'price: 1'.replace(/price:\s(\d)/g, (/* 匹配的完整串 */str, /* 捕获组 */ $1) => `price: ${$1 *= 10}`) // => price: 10

一些全新的特性

前段时间看了下ECMAScript 2018的一些草案,发现有些Stage 3的草案,其中有提到RegExp相关的,并在chrome上试验了一下,发现已经可以使用了。

Lookbehind assertions(应该可以叫做回溯引用吧)

同样也是一个非捕获组的语法定义

语法定义:

let reg = /(?<=Pre)\w/

reg.test('Prefixer') // => true
reg.test('Prfixer') // => false

设置匹配串前边必须满足的一些条件,与(?=)正好相反,一前一后。 这个结合着(?=)使用简直是神器,还是说解析HTML的那个问题。 现在有了(?<=)以后,我们甚至可以直接通过一个match函数拿到HTML元素中的文本值了。

let html = '<p><span>text1</span><span>text2</span></p>'

html.match(/(?<=<span>)(.+?)(?=<\/span>)/g) // => ["text1", "text2"]

Named capture groups(命名捕获组)

我们知道,()标识这一个捕获组,然后用的时候就是通过\1或者$1来使用。 这次草案中提到的命名捕获组,就是可以让你对()进行命名,在使用时候可以用接近变量的用法来调用。

语法定义:

let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/

'2017-11-21'.match(reg)

match的返回值中,我们会找到一个groupskey。 里边存储着所有的命名捕获组。

在replace中的用法
let reg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
'2017-11-21'.replace(reg, '$<month>/$<day>/$<year>') // => 21/11/2017
表达式中的反向引用
let reg = /\d{4}-(?<month>\d{2})-\k<month>/
reg.test('2017-11-11') // => true
reg.test('2017-11-21') // => false

参考资料

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端专家聊JS语言家族新成员——R&B

    摘要 相信大家对以CoffeeScript、TypeScript为代表的编译到JavaScript的语言已经不陌生。本次分享将介绍 JS 平台语言家族的重要新成...

    IT大咖说
  • 如何方便的搜索JS复杂数组?

    例如下面这个稍微复杂一点的数组 [ { IceCream: ['mint', 'chocolate'], Fruit: 'banana' }, { I...

    dys
  • JavaScript 10分钟入门

    简介 JavaScript是一门面向对象的动态语言,他一般用来处理以下任务: 1、修饰网页 生成HTML和CSS 生成动态HTML内容 生成一些特效 2、提供...

    前朝楚水
  • 使用JS开发桌面应用

    Javascript在web开发中已经稳稳的占据了重要位置,现在已经开始渗透到桌面开发了 Electron 便是用来创建桌面应用的框架 使用 JavaScrip...

    dys
  • 12条专业的JavaScript规则

    习JavaScript是困难的。它发展的如此之快,以至于在任何一个特定的时刻,你都不清楚自己是否“做错了”。有些时候,感觉像是坏的部分超过了好的部分。然而,讨论...

    前朝楚水
  • 手机浏览器中的 DevTools

    ruda 是手机浏览器中的开发者工具,是一个JS插件,在自己的页面中引入即可 Eruda 的由来 Eruda 的作者以前在手机中进行页面开发时,感觉日志输出非...

    dys
  • 如何写出好的 JavaScript —— 浅谈 API 设计

    很多同学觉得写 JavaScript 很简单,只要能写出功能来,效果能实现就好。还有一些培训机构,专门教人写各种“炫酷特效”,以此让许多人觉得这些培训很“牛逼”...

    前朝楚水
  • Twitter是如何部署公共JS组件的?

    Twitter有一个对外开放的JS组件,widgets.js,其他站长可以把这个js嵌入到自己的网页中,就可以有Twitter的一些功能(类似新浪微博开放的JS...

    dys
  • Nginx 的 Javascript 扩展

    去年 Nginx 发布了 nginScript,一个基于 Nginx 的 JavaScript 执行环境 可以通过 nginScript 扩展自己的 Ngin...

    dys
  • Javascript ES6版本的4个基础用法

    JS 的 ES6版本已经被各大浏览器广泛支持,很多前端框架也已经使用 ES6,并且还有 Babel 可以做兼容处理,所以ES6已经进入了应用阶段 如果您对 ES...

    dys

扫码关注云+社区

领取腾讯云代金券