Javascript regular expression to parse path string

Question

I have an application that shows photos and albums to a user. Based on current state of the application I show appropriate view. Everytime view changes I change the url, controller then gets the url value using window.location.hash

It returns the string of this form:

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

My question is how do I parse this using javscript regular expressions to determine which view I should be showing and also to get the parameters (albumId/photoId)

Why not path.split('/') and then path[0] ~ whatnot, and so on? — Jared Farrish
– Jared Farrish, Commented Mar 7, 2013 at 21:19
Have you seen the information on Backbone's Router? This is decent tutorial as well. You're describing essentially a router pattern, so I'd take a look at how Backbone, AngularJS, Knockout, etc., handle it. — Jared Farrish
– Jared Farrish, Commented Mar 7, 2013 at 22:01

Nenad · Accepted Answer · 2013-03-07 21:19:11Z

6

I think you are better off doing this, then regex:

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

Then you get array that you can examine.

answered Mar 7, 2013 at 21:19

Nenad

27k11 gold badges81 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

UKMonkey Over a year ago

Doesn't really work when the path "photos/each\/ photo" is passed in.

Nenad Over a year ago

`\` is escape character. If you have valid backslash, it's represented as "'\\", so "photos/each\\/ photo". Also, this does not look like a valid path.

talemyn · Accepted Answer · 2013-03-07 21:21:49Z

1

Rather than using regex, you should probably simply split the string on "/" and examine each piece of the value for the data that you need.

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] : "";

Then play with your data as you wish. :)

answered Mar 7, 2013 at 21:21

talemyn

8,0004 gold badges33 silver badges52 bronze badges

3 Comments

Jared Farrish Over a year ago

With the example paths, photos/byalbum/albumid, you would start with a 0 index, not 1. That does, however, bring up a good point about whether or not to trim leading and trailing /. To wit: jsfiddle.net/userdude/f36S7

talemyn Over a year ago

I actually left out the "0" on purpose because, since "photos" is standard across the board, it is really irrelevant to check it. The 2nd value (index "1") seems to indicate the "view" and the first piece of data that he seemed interested in.

Jared Farrish Over a year ago

True enough. I think it's a good idea to start at the root of the path, but that's opinion I suppose.

Shackleford · Accepted Answer · 2021-12-06 13:44:39Z

1

If someone is still interesting in this question I used this lib: path-to-regexp to solve that problem.

basically you can convert an url into variables using a pattern. For example:

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

and params will be similar to: { albumid: "10", photoid: "23" }

edited Dec 6, 2021 at 13:44

Shackleford

6201 gold badge7 silver badges19 bronze badges

answered Oct 12, 2021 at 15:58

Antonio Saracino

1411 silver badge5 bronze badges

Collectives™ on Stack Overflow

Javascript regular expression to parse path string

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related