0

I'm trying to build a bookmarklet that preforms a service client side, but I'm not really fluent in Javascript. In my code below I want to take the current page url and first verify that it's a url following a specific format after the domain, which is...

/photos/[any alphanumeric string]/[any numeric string]

after that 3rd "/" should always be the numeric string that I need to extract into a var. Also, I can't just start from the end and work backwards because there will be times that there is another "/" after the numeric string followed by other things I don't need.

  1. Is indexOf() the right function to verify if the url is the specific format and how would I write that expression? I've tried several things related to indexOf() and Regex(), but had no success. I seem to always end up with an unexpected character or it just doesn't work.

  2. And of course the second part of my question is once I know the url is the right format, how do I extract the numeric string into a variable?

Thank you for any help!

javascript:(function(){

// Retrieve the url of the current page
var photoUrl = window.location.pathname;

if(photoUrl.indexOf(/photos/[any alphanumeric string]/[any numeric string]) == true) {
    // Extract the numeric substring into a var and do something with it
} else {
    // Do something else
}

})();
Kevin Hamil
  • 81
  • 1
  • 1
  • 8

2 Answers2

0
var id = window.location.pathname.match(/\/photos\/(\w+)\/(\d+)/i); 
if (id) alert(id[1]); // use 1 or 2 depending on what you want 
else alert('url did not fit expected format');

(EDIT: changed first \d* to \w+ and second \d* to \d+ and dig to id.)

DG.
  • 3,417
  • 2
  • 23
  • 28
  • 1
    The first captured value should actually be (\w+) – Christophe Aug 29 '13 at 02:19
  • Thank you DG for the quick response and MUCH more simplified method. And thanks @Christophe that was a necessary adjustment. Works perfectly! – Kevin Hamil Aug 29 '13 at 02:28
  • I overlooked that there are occasional situations where the first match \w section may included the @ character. Since @ is not part of \w how would I include the @ character to match if it is in the string of the first one? – Kevin Hamil Aug 29 '13 at 16:22
  • @Christophe I meant to mention you in my previous comment to get your feedback, but just realized I never did. Thanks. – Kevin Hamil Aug 29 '13 at 23:55
  • @KevinHamil [\w@]+ should work. You could also use [^/]+ which means any character but a forward slash – Christophe Aug 29 '13 at 23:59
  • @Christophe ahh, that's smart. I've been looking through selector and short hand selectors documentation, but just couldn't seem to get the right combination for some reason. Thanks again. – Kevin Hamil Aug 30 '13 at 00:46
0

To test strings for patterns and get their parts, you can use regular expressions. Exression for your criteria would be like this:

/^\/photos\/\w+\/(\d+)\/?$/

It will match any string starting with /photos/, followed by any alphanumeric character (and underscore), followed by any number and optional / at the end of string, wrapped in a capture group.

So, if we do this:

"/photos/abc123/123".match(/^\/photos\/\w+\/(\d+)\/?$/)

the result will be ["/photos/abc123/123", "123"]. As you might have noticed, capture group is the second array element.

Ready to use function:

var extractNumeric = function (string) {
    var exp = /^\/photos\/\w+\/(\d+)\/?$/,
        out = string.match(exp);

    return out ? out[1] : false;
};

You can find more detailed example here.

So, the answers:

Is indexOf() the right function to verify if the url is the specific format and how would I write that expression? I've tried several things related to indexOf() and Regex(), but had no success. I seem to always end up with an unexpected character or it just doesn't work.

indexOf isn't the best choice for the job, you were right about using regular expression, but lacked experience to do so.

And of course the second part of my question is once I know the url is the right format, how do I extract the numeric string into a variable?

Regular expression together with match function will allow to test string for desired format and get it's portions at the same time.

  • Thank you for the education tips! It's great to have direct answers, but I also appreciate being explained the how and why. Thanks again! – Kevin Hamil Aug 29 '13 at 02:36