url 的正則表達式:path-to-regexp

概述

該工具庫用來處理 url 中地址與參數(shù),能夠很方便得到我們想要的數(shù)據(jù)。

js 中有 RegExp 方法做正則表達式校驗,而 path-to-regexp 可以看成是 url 字符串的正則表達式。

使用

第三方庫,使用前先進行安裝:

$ npm install path-to-regexp

在 js 中使用:

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

API 介紹

1. pathToRegexp()

作用:這里這個方法可以類比于 js 中 new RegExp('xxx')

var pathToRegexp = require('path-to-regexp')

var re = pathToRegexp('/foo/:bar')
console.log(re);    

打印結(jié)果如下:

/^\/foo\/((?:[^\/]+?))(?:\/(?=$))?$/i

要注意兩點,一點是我們自己的 url 地址,一條是匹配規(guī)則。

2. exec()

作用:匹配 url 地址與規(guī)則是否相符。

var pathToRegexp = require('path-to-regexp')

var re = pathToRegexp('/foo/:bar');     // 匹配規(guī)則
var match1 = re.exec('/test/route');    // url 路徑
var match2 = re.exec('/foo/route');     // url 路徑

console.log(match1);
console.log(match2);

打印結(jié)果如下:

null
[ '/foo/route', 'route', index: 0, input: '/foo/route' ]

說明:

上述代碼中,第一個 url 路徑與匹配規(guī)則不相符返回 null,第二個 url 路徑與匹配規(guī)則相符,返回一個數(shù)組。

3. parse()

作用:解析 url 字符串中的參數(shù)部分(:id)。

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

var url = '/user/:id';
console.log(pathToRegexp.parse(url));

打印結(jié)果如下:

[ '/user',
  { name: 'id',
    prefix: '/',
    delimiter: '/',
    optional: false,
    repeat: false,
    partial: false,
    pattern: '[^\\/]+?' } ]

說明:返回一個數(shù)組,從第二個數(shù)據(jù)可以就可以得到 url 地址攜帶參數(shù)的屬性名稱(item.name)。

當然,url 中攜帶參數(shù)出了 :id 這種形式,還有 /user?id=11 這種,使用 parse() 方法解析自行查看結(jié)果。

4. compile()

作用:快速填充 url 字符串的參數(shù)值。

var pathToRegexp = require('path-to-regexp')

var url = '/user/:id/:name'
var data = {id: 10001, name: 'bob'}
console.log(pathToRegexp.compile(url)(data))

打印結(jié)果:

/user/10001/bob
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容