npm 包 @nathanfaucett/path_to_regexp 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

对于前端开发者而言，路径匹配是一项非常重要的技能。在我们开发现代的 SPA 应用时，往往需要用到路径匹配的方法来实现路由系统。而 @nathanfaucett/path_to_regexp，正是在这样一个背景下开发出来的一个 Path to RegExp 包。它是一个基于规则语法生成正则表达式的工具，可以实现将 URL 转换成能够被应用程序解析的正则表达式。

在本文中，我们将重点介绍 @nathanfaucett/path_to_regexp 这个 npm 包的使用方法，不仅仅是为了适应这种 URL 解析的需求，更为了深入理解正则表达式这一重要知识点。

使用方法

安装与引入

首先，我们需要在项目中安装 @nathanfaucett/path_to_regexp：

npm i @nathanfaucett/path_to_regexp

然后，在我们需要使用的模块中引入该模块：

const pathToRegexp = require('@nathanfaucett/path_to_regexp');

或者，在浏览器环境下使用时，我们可以在 HTML 中用script标签引入：

<script src="//unpkg.com/@nathanfaucett/path_to_regexp"></script>

基本用法

在了解该包的基本用法之前，先看一下该包的 API 文档。

pathToRegexp(path, options)

该函数接受两个参数，其中 path 为一个 URL 路径，options 为选项，其中主要包括以下属性：

strict: 当为 true 时，路径末尾的斜线（/）将被忽略。默认值为 false。
sensitive: 当为 true 时，将启用区分大小写的匹配。默认为false。
end: 当为 true 时，输入必须结束定位符（$）完全与路径匹配。默认值为 true。
delimiter: 设置路径中的自定义分隔符，默认为/。

基本用法如下：

var path = '/user/:id',
    keys = [];

var re = pathToRegexp(path, keys);

console.log(re); // => /^\/user\/(?:([^\/]+?))\/?$/i

在上述代码中，path 表示配置的 URL 路径，keys 用于保存解析出的参数参数名，解析结果 re 即表示将该 URL 路径转化为的能够在程序中进行解析的正则表达式。

在这里，我们可以进一步了解到在 keys 中保存了解析出的参数名，同时我们可以看到转化后的正则表达式中的 (?:([^\/]+?))，表示匹配该 URL 路径中的 id 参数，注意其中 ? 的作用是进行非贪婪匹配，遇到第一个 ‘/’ 即停止匹配。

总的来说，我们可以发现该包对于 URL 路径的解析十分方便，只需要根据定义好的规则编写 URL，即可得到可以被程序解析的正则表达式。

常用场景

在实际使用过程中，我们可能需要在 URL 路径上匹配多个参数。这时，@nathanfaucett/path_to_regexp 也可以胜任这个任务：

var path = '/user/:name/:id',
    keys = [];

var re = pathToRegexp(path, keys);

console.log(re); // /^\/user\/(?:([^\/]+?))\/(?:([^\/]+?))\/?$/i

上述代码表示在 URL 路径上匹配 name 和 id 两个参数。

在实际使用过程中，我们可能仅仅需要匹配一部分 URL，例如匹配路径中以 /users/ 开头的部分，可以将路径设置为 /users/*：

var path = '/users/*',
    keys = [];

var re = pathToRegexp(path, keys);

console.log(re); // /^\/users(?:\/(.*))?$/i

这里，我们使用了一个特殊符号 *，该符号表示匹配任意字符。

应用示例

在实际开发中，我们往往需要将 URL 转化为特定格式，例如在我们实现一个简单的路由管理器时，可以将 URL 路径转化为一个函数调用：

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

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

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

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

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

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

通过上述代码，我们可以发现如何使用 @nathanfaucett/path_to_regexp 将 url 路径转化为实际的参数。

结语

以上即为 @nathanfaucett/path_to_regexp 包的基本用法，请读者仔细阅读文档后尝试自行编写代码并逐步掌握该工具的使用。

除此之外，理解语法规则以及如何进行参数的匹配等知识将会对之后在开发中的正则表达式的应用产生很大的帮助。因此，自己亲手实践写过程中有问题还请在评论区提出，我会尽力解答。

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