用于解析路径字符串的 Javascript 正则表达式

Posted 2023-02-22

【中文标题】用于解析路径字符串的 Javascript 正则表达式

【英文标题】：Javascript regular expression to parse path string

【发布时间】：2013-02-23 06:45:50

【问题描述】：

我有一个向用户显示照片和相册的应用程序。根据应用程序的当前状态，我显示适当的视图。每次视图更改时，我都会更改 url，然后控制器使用 window.location.hash 获取 url 值

它返回这种形式的字符串：

"photos/byalbum/albumid"
"photos/allphotos"
"photos/eachphoto/albumid/photoid"

我的问题是如何使用 javscript 正则表达式解析它以确定我应该显示哪个视图并获取参数（albumId/photoId）

【问题讨论】：

为什么不是path.split('/')，然后是path[0] ~ whatnot，等等？

你看到Backbone's Router的信息了吗？ This is decent tutorial 也是如此。您本质上是在描述一种路由器模式，所以我将看看 Backbone、AngularJS、Knockout 等如何处理它。

【参考方案1】：

我认为你最好这样做，然后是正则表达式：

"photos/eachphoto/albumid/photoid".split("/")

然后你得到你可以检查的数组。

【讨论】：

路径“photos/each\/ photo”传入的时候真的不行。

`\` 是转义字符。如果您有有效的反斜杠，则它表示为“'\\”，即“photos/each\\/ photo”。此外，这看起来不像是一个有效的路径。

【参考方案2】：

而不是使用正则表达式，您可能应该简单地将字符串拆分为“/”并检查您需要的数据的每个值。

var urlString = <your returned value here>;
var urlPieces = urlString.split("/");

var view = urlPieces[1];
var album = (urlPieces[2]) ? urlPieces[2] : "";
var photo = (urlPieces[3]) ? urlPieces[3] : "";

然后随心所欲地使用您的数据。 :)

【讨论】：

对于示例路径photos/byalbum/albumid，您将从0 索引开始，而不是1。然而，这确实为是否修剪前导和尾随/ 提出了一个很好的观点。也就是说：jsfiddle.net/userdude/f36S7

我实际上故意省略了“0”，因为“照片”是标准的，所以检查它真的无关紧要。第二个值（索引“1”）似乎表示“视图”和他似乎感兴趣的第一条数据。

确实如此。我认为从路径的根开始是个好主意，但我认为这是我的看法。

【参考方案3】：

如果有人对这个问题仍然感兴趣，我使用这个库：path-to-regexp 来解决这个问题。

基本上，您可以使用模式将 url 转换为变量。 例如：

const pattern = 'photos/eachphoto/:albumid/:photoid'
const path = 'photos/eachphoto/10/23'
const converter = pathToRegex.match(pattern,  decode: decodeURIComponent ) 
const params = converter(path)?.params || 

参数类似于： albumid: "10", photoid: "23"