VillainHR

Path-to-RegExp 使用

正则 前端通信 2017-05-13

下载

直接通过 github 下载:

npm install path-to-regexp --save

使用

直接引入:

var pathToRegexp = require('path-to-regexp')

该对象上挂载了 3 个方法:

pathToRegexp(path, keys, options)
pathToRegexp.parse(path)
pathToRegexp.compile(path)

常用的还是:pathToRegexp(path, keys, options)

基本参数为:

  • path: 自定义的匹配路由
  • keys: 通过分组获得的相关值
  • options: 基本匹配选项
    • sensitive: 大小写精确匹配(default: false,不是
    • strict: 末尾斜杠是否精确匹配(default: false,不是
    • end: 是否是全局匹配,相当于,带不带 /g 标识符。(defualt: true,带 /g),
    • delimiter: 设置重复参数的分割符,默认为 /。对于 pathname 匹配时,使用默认就好。

例如:

var keys = []
var re = pathToRegexp('/foo/:bar', keys)
// re = /^\/foo\/([^\/]+?)\/?$/i
// keys = [{ name: 'bar', prefix: '/', delimiter: '/', optional: false, repeat: false, pattern: '[^\\/]+?' }]

匹配参数

分组名

这可以通过它自定义的相关匹配语法来完成。

var re = pathToRegexp('/:foo/:bar', keys)
// keys = [{ name: 'foo', prefix: '/', ... }, { name: 'bar', prefix: '/', ... }]

re.exec('/test/route')
//=> ['/test/route', 'test', 'route']

那么 keys 中的 foo 就是一个分组名的匹配值。

量词字符

这其实就是正则里面的内容。

可选参数 ?

var re = pathToRegexp('/:foo/:bar?', keys)
// keys = [{ name: 'foo', ... }, { name: 'bar', delimiter: '/', optional: true, repeat: false }]

re.exec('/test')
//=> ['/test', 'test', undefined]

re.exec('/test/route')
//=> ['/test', 'test', 'route']

>=0 *

var re = pathToRegexp('/:foo*', keys)
// keys = [{ name: 'foo', delimiter: '/', optional: true, repeat: true }]

re.exec('/')
//=> ['/', undefined]

re.exec('/bar/baz')
//=> ['/bar/baz', 'bar/baz']

>=1 +

var re = pathToRegexp('/:foo+', keys)
// keys = [{ name: 'foo', delimiter: '/', optional: false, repeat: true }]

re.exec('/')
//=> null

re.exec('/bar/baz')
//=> ['/bar/baz', 'bar/baz']

路径匹配

如果想匹配多个路径,可以使用 * 进行匹配:

var re = pathToRegexp('/foo/*', keys)
// keys = [{ name: '0', ... }]

re.exec('/foo/bar/baz')
//=> ['/foo/bar/baz', 'bar/baz']

不过注意,*>=0 效果的区别:

var re = pathToRegexp('/:foo/(.*)', keys)
// keys = [{ name: 'foo', ... }, { name: 0, ... }]

re.exec('/test/route')
//=> ['/test/route', 'test', 'route']

原文链接: https://www.villianhr.com/2017/05/13/Path-to-RegExp 使用