番外篇一--整理一个路由正则配的库

这一篇我闲来无事给大家介绍一个路由正则匹配的库-- path-to-regexp

• 在用之前我先来补几个不常用的正则的知识点：

/**
(?=pattern)	正向肯定查找(前瞻),后面必须跟着什么
(?!pattern)	正向否定查找(前瞻)，后面不能跟着什么
(?<=pattern)	反向肯定条件查找(后顾),不捕获
(?<!pattern)	反向否定条件查找（后顾）
 */
/* console.log('1a'.match(/\d(?=[a-z])/)); // [ '1', index: 0, input: '1a', groups: undefined ]
console.log('1@'.match(/\d(?![a-z])/)); // [ '1', index: 0, input: '1@', groups: undefined ]
console.log('a1'.match(/(?<=[a-z])\d/)); // [ '1', index: 1, input: 'a1', groups: undefined ]
console.log('$1'.match(/(?<![a-z])\d/)); // [ '1', index: 1, input: '$1', groups: undefined ] */

• 首先我们来看一下他是怎么用的：

let { pathToRegexp } = require('path-to-regexp');
// 参数说明：
// 第一个参数是需要匹配的地址
// 第二个参数是匹配到的地址后面的冒号传参的key
// 第三个参数则是是否精确匹配
1、将`end`属性设置为`true`精确匹配
let regexp = pathToRegexp('/user', [], {end: false});
console.log(regexp) //  /^\/user[\/#\?]?$/ 转化的正则是以`/user开头结尾是/、#、？中的一个出现一次或者不出现`
console.log(regexp.test('/user')); // true
console.log(regexp.test('/user/')); // true
console.log(regexp.test('/user/1')); // false

2、将`end`属性设置为`false`非精确匹配
let regexp = pathToRegexp('/user', [], { end: false });
console.log(regexp); // /^\/user(?:[\/#\?](?=[]|$))?(?=[\/#\?]|[]|$)/i
console.log(regexp.test('/user')); // true
console.log(regexp.test('/user/'));
// true
console.log(regexp.test('/users'));
// false
console.log(regexp.test('/user/add'));
// true

console.log(('/user//////'.match(regexp); // [ '/user', index: 0, input: '/user//////', groups: undefined ]
console.log(regexp.test('/users//////')); // true

• 在上最后一个和react-router有关的例子(重点)

let { pathToRegexp } = require('path-to-regexp');
let paramArr = []
let regexp = pathToRegexp('/user/:id/:age', paramArr, { end: true });
let paramsNames = paramArr.map(item => item.name);// [ 'id', 'age' ]
let matched = '/user/1/100'.match(regexp);
// console.log('matched', matched); 
// [
  '/user/1/100',
  '1',
  '100',
  index: 0,   // 这个是数组的属性不是其中元素
  input: '/user/1/100', // 这个是数组的属性不是其中元素
  groups: undefined // 这个是数组的属性不是其中元素
]
let [url, ...values] = matched;
let params = values.reduce((memo, value, index) => {
    memo[paramsNames[index]] = value;
    return memo;
}, {});// {id:'myid',age:10}
// console.log(params);
// params = {id:100,age:100}

这路是在路由处理中应用很广泛的，所以务必要会用。