路径转换插件path-to-regexp

一个用于将路由路径转为正则表达式/解析参数/生成路径的插件工具。

npm-path-to-regexp、github-path-to-regexp

安装

1	npm i --save-dev path-to-regexp

使用

import pathToRegexp from 'path-to-regexp'

// pathToRegexp(path, keys?, options?)	//返回正则表达式
// pathToRegexp.parse(path)
// pathToRegexp.compile(path)

其中

path: String | Array | regexp
keys: Array, path中的数组标识
options: Object
- sensitive: Boolean, 正则是否区分大小写，默认false。
- strict: Boolean, 正则是否允许可选的尾随分隔符进行匹配，默认false。
- end: Boolean, 正则是否将与字符串的结尾匹配，默认true。
- start: Boolean, 正则是否将与字符串的开头匹配，默认true。
- delimiter: String, 默认路径分段的分隔符，默认”/“
- endsWith: 可选字符或字符列表，作为“结束”字符处理。
- whitelist: 解析时要考虑分隔符的字符列表，默认undefined（任何字符）

exec()方法

exec()方法用来匹配 url 地址与规则是否相符。
如：

import pathToRegexp from 'path-to-regexp'

let regexp_1 = pathToRegexp('/foo/:bar')// /^\/foo\/([^\/]+?)(?:\/)?$/i
regexp_1.exec('/foo/barrrr')//匹配成功 =>RegExpExecArray [ '/foo/barrrr', 'barrrr', index: 0, input: '/foo/barrrr' ]
regexp_1.exec('/bazzzz')//匹配失败 => null

parse()方法

parse()方法用来解析 url 字符串中的参数部分（:id）。

如：

import pathToRegexp from 'path-to-regexp'

pathToRegexp.parse('/foo/:bar');
/*
	[ 
	  '/foo',
	  { name: 'bar',
		prefix: '/',
		delimiter: '/',
		optional: false,
		repeat: false,
		pattern: '[^\\/]+?' 
	  } 
	]
*/

compile()方法

compile()方法用来快速填充 url 字符串的参数值。

如：

import pathToRegexp from 'path-to-regexp'

pathToRegexp.compile('/foo/:bar/:test')({
	bar: 10009,
	test: 'way'
});		// /foo/10009/way

路由中的”:”、”?”、”+”、”*”

路径参数”:”

一个“路径参数”使用冒号 “:” 标记，可以传递任何请求路径字串给它。

如

/foo/:bar

参数可选”?”

用”*”结合路径参数表示此参数可有可无

如

1
2
3

let regexp_3 = pathToRegexp('/foo/:bar?')
regexp_3.exec('/foo/a')// [ '/foo/a', 'a', index: 0, input: '/foo/a' ]
regexp_3.exec('/foo')// [ '/foo', undefined, index: 0, input: '/foo' ]

任意匹配”*”

用”*”结合路径参数表示此参数可以接收随意个匹配模式（>=0）

如

1
2
3

let regexp_3 = pathToRegexp('/foo/:bar*')
regexp_3.exec('/foo/a/b/c')// [ '/foo/a/b/c', 'a/b/c', index: 0, input: '/foo/a/b/c' ]
regexp_3.exec('/foo')// [ '/foo', undefined, index: 0, input: '/foo' ]

至少一个”+”

用”*”结合路径参数表示此参数可以接收至少一个匹配模式（>=1）

如

1
2
3

let regexp_3 = pathToRegexp('/foo/:bar+')
regexp_3.exec('/foo/a/b/c')// [ '/foo/a/b/c', 'a/b/c', index: 0, input: '/foo/a/b/c' ]
regexp_3.exec('/foo')// null

用处

校验路径

不用说，可见上面的描述

校验路由文件格式

var regexp_4 = pathToRegexp('/icon-:foo(\\d+).png')
regexp_4.exec('/icon-123.png')// => [ '/icon-123.png', '123', index: 0, input: '/icon-123.png' ]
regexp_4.exec('/icon-abc.png')// null

var regexp_5 = pathToRegexp('/icon-(\\d+).png')
regexp_5.exec('/icon-123.png')// => [ '/icon-123.png', '123', index: 0, input: '/icon-123.png' ]
regexp_5.exec('/icon-abc.png')// null

生成根据数据路径

见上述compile()方法

【工具】路径转换插件path-to-regexp