npm 包 path-to-regexp 使用教程

在前端开发中，我们经常需要处理 URL 地址和路由匹配。path-to-regexp 是一个非常有用的 npm 包，它可以帮助我们将 URL 转换为正则表达式，并且支持参数匹配，让我们可以轻松地进行路由匹配。

安装

安装 path-to-regexp 的命令如下：

npm install path-to-regexp --save

基本用法

将 URL 转换为正则表达式的方法如下：

const pathToRegexp = require('path-to-regexp');

const keys = [];
const regexp = pathToRegexp('/user/:id', keys);
console.log(regexp); // 输出: /^\/user\/([^\/]+?)\/?$/i
console.log(keys); // 输出: [ { name: 'id', prefix: '/', delimiter: '/', optional: false, repeat: false, pattern: '[^\\/]+?' } ]

上面的代码将 /user/:id 转换为了正则表达式，并且使用了 keys 数组来存储参数信息。其中 :id 表示该位置可以匹配任何字符串，同时也会将该参数保存到 keys 数组中。

而实际使用时，我们通常会先编译出正则表达式，然后再通过正则表达式进行匹配：

-- -------------------- ---- -------
----- ------------ - --------------------------

----- ---- - ---
----- ------ - ------------------------- ------

----- ----- - -------------------------
-- ------- -
  ----- ------ - ---
  --- ---- - - -- - - ------------ ---- -
    -------------------- - ------- - ---
  -
  -------------------- -- --- - --- ----- -
-

上面的代码将 /user/123 与正则表达式进行匹配，并且通过 keys 数组获取了参数信息。最终输出了参数对象 { id: '123' }。

高级用法

除了基本用法之外，path-to-regexp 还支持一些高级功能，比如可选参数、重复参数等。

可选参数

在路由中，我们有时需要使用可选参数，这时可以在参数后加上 ? 字符表示该参数为可选。例如：

const pathToRegexp = require('path-to-regexp');

const keys = [];
const regexp = pathToRegexp('/user/:id/:action?', keys);
console.log(regexp); // 输出: /^\/user\/([^\/]+?)\/?(?:([^\/]+?))\/?$/i
console.log(keys); // 输出: [ { name: 'id', prefix: '/', delimiter: '/', optional: false, repeat: false, pattern: '[^\\/]+?' }, { name: 'action', prefix: '/', delimiter: '/', optional: true, repeat: false, pattern: '[^\\/]+?' } ]

在上面的例子中，:action? 表示该参数为可选参数。在正则表达式中，该参数会被转换为 (?:([^\/]+?))?，表示该参数可以匹配 0 或 1 次。

重复参数

有时我们需要使用重复参数，这时可以在参数后加上 + 或 * 字符表示该参数可以重复出现。例如：

const pathToRegexp = require('path-to-regexp');

const keys = [];
const regexp = pathToRegexp('/user/:id/:action+', keys);
console.log(regexp); // 输出: /^\/user\/([^\/]+?)\/((?:[^\/]+?)(?:\/(?:[^\/]+?))*)\/?$/i
console.log(keys); // 输出: [ { name: 'id', prefix: '/', delimiter: '/', optional: false, repeat: false, pattern: '[^\\/]+?' }, { name: 'action', prefix: '/', delimiter: '/', optional: false, repeat: true, pattern: '(?:[^\\/]+?)(?:\\/[^\\/]+?)*' } ]

在上面的例子中，:action+ 表示该参数为必须重复出现的参数。在正则表

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/50724