在前端技术中，我们经常需要对于 URL 进行一些规则匹配和解析，以便正确地处理、展示或者过滤相应的内容。而针对这一需求，现在可以通过 npm 包 url-match-patterns 来进行便捷的实现。
安装和引入
使用 npm 包安装：
npm install url-match-patterns
在代码中引入：
const URLPattern = require('url-match-patterns');基本匹配规则
url-match-patterns 支持一系列语法规则进行 URL 匹配，包括：
*：匹配 URL 中的任意部分；.：匹配 URL 中的一个点；+：匹配 URL 中的一个或者多个部分；:：匹配 URL 中的任意一个部分；?：匹配 URL 中的一个可能出现的参数；#：匹配 URL 中的一个可能出现的 hash。
以 https://*.google.com/*/search?q=*&oe=utf-8 为例，其中匹配规则的意思为：
https://：匹配以 https:// 开头的 URL；*.google.com：匹配以 .google.com 结尾的子域名，* 表示任意字符，如 mail.google.com；/*/：匹配 https://mail.google.com/ 中的 mail 和 https://www.google.com.hk/webhp 中的 www.google.com.hk；search：匹配 URL 中的 search 前缀；?q=*&oe=utf-8：匹配 URL 中的可能存在的 q 参数和在 q 参数后面的可能存在的 oe 参数。
匹配实例
在实际应用中，常常需要使用到 URL 的匹配功能。下面我们演示一些匹配实例以便理解。
const pattern = new URLPattern('https://*.google.com/*/*/?q=*');
const url1 = 'https://www.google.com.hk/webhp?hl=en&noj=1&ie=UTF-8&q=node.js';
const url2 = 'https://mail.google.com/mail/u/0/#inbox';
console.log(pattern.test(url1)); // true
console.log(pattern.test(url2)); // false参数解析
在 URL 中，我们经常需要解析出携带的参数，并作为后续处理的输入。例如，对于 https://www.google.com.hk/search?q=node.js&oq=node.js&aqs=chrome.0.35i39l2j0l4j46j0l2.2684j0j4&sourceid=chrome&ie=UTF-8，我们需要提取出其中 q 参数中的 node.js。
const pattern = new URLPattern('https://www.google.com.hk/search?q=*');
const url = 'https://www.google.com.hk/search?q=node.js&oq=node.js&aqs=chrome.0.35i39l2j0l4j46j0l2.2684j0j4&sourceid=chrome&ie=UTF-8';
const result = pattern.exec(url);
console.log(result.query.q); // node.js综合示例
下面是一些综合应用示例，展示 URL 匹配和参数解析。
-- -------------------- ---- ------- -- -------- ----- -------- - --- -------------------------------- ----------------------------------------------------------------------------- -- -------- ----- -------- - --- ---------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------- -- ---- ----- -------- - --- --------------------------------------------------- ----- --- - -------------------------------------------------------------------------------------------------------------------------- ----- ------ - ------------------- ---------------------------- -- -------
总结
通过本文的讲解，我们了解了 npm 包 url-match-patterns 的基本使用方法和语法规则。在实际前端工程中，我们经常需要对于 URL 进行规则匹配以及参数解析。url-match-patterns 作为一款简单且易用的 npm 包，提供了适合各类需求的 URL 匹配解决方案。在今后的前端工作中，可以考虑将其用于实际项目开发中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a6f81e8991b448d7fbb