Get id from url

Question

I have the following example url: #/reports/12/expense/11 .

I need to get the id just after the reports -> 12. What I am asking here is the most suitable way to do this. I can search for reports in the url and get the content just after that ... but what if in some moment I decide to change the url, I will have to change my algorythm.

What do You think is the best way here. Some code examples will be also very helpfull.

Answer 1

var text = "#/reports/12/expense/11";
var id = text.match("#/[a-zA-Z]*/([0-9]*)/[a-zA-Z]*/")
console.log(id[1])

Regex explanation:

• #/ matches the characters #/ literally
• [a-zA-Z]* - matches a word
• / matches the character / literally
• 1st Capturing group - ([0-9]*) - this matches a number.
• [a-zA-Z]* - matches a word
• / matches the character / literally

Answer 2

You should use a regular expression to find the number inside the string. Passing the regular expression to the string's .match() method will return an array containing the matches based on the regular expression. In this case, the item of the returned array that you're interested in will be at the index of 1 , assuming that the number will always be after reports/ :

var text = "#/reports/12/expense/11";
var id = text.match(/reports\/(\d+)/);
alert(id[1]);

\\d+ here means that you're looking for at least one number followed by zero to an infinite amount of numbers.

Answer 3

It's hard to write code that is future-proof since it's hard to predict the crazy things we might do in the future!

However, if we assume that the id will always be the string of consecutive digits in the URL then you could simply look for that:

function getReportId(url) {
  var match = url.match(/\d+/);
  return (match) ? Number(match[0]) : null;
}

getReportId('#/reports/12/expense/11'); // => 12
getReportId('/some/new/url/report/12'); // => 12

Answer 4

Regular expressions can be tricky (add expensive). So usually if you can efficiently do the same thing without them you should. Looking at your URL format you would probably want to put at least a few constraints on it otherwise the problem will be very complex. For instance, you probably want to assume the value will always appear directly after the key so in your sample report=12 and expense=11, but report and expense could be switched (ex. expense/11/report/12) and you would get the same result.

I would just use string split :

var parts = url.split("/");
for(var i = 0; i < parts.length; i++) {
  if(parts[i] === "report"){
    this.reportValue = parts[i+1];
    i+=2;
  }
  if(parts[i] === "expense"){
    this.expenseValue = parts[i+1];
    i+=2;
  }
}

So this way your key/value parts can appear anywhere in the array

Note: you will also want to check that i+1 is in the range of the parts array. But that would just make this sample code ugly and it is pretty easy to add in. Depending on what values you are expecting (or not expecting) you might also want to check that values are numbers using isNaN