Javascript string manipulation url

Question

My problem is I am trying to extract certain things from the url. I am currently using

window.location.href.substr()

to grab something like "/localhost:123/list/chart=2/view=1"

What i have now, is using the index positioning to grab the chart and view value.

var chart = window.location.href.substr(-8);
var view = window.location.href.substr(-1);

But the problem comes in with I have 10 or more charts. The positioning is messed up. Is there a way where you can ask the code to get the string between "chart=" and the closest "/"?

Another option is to use a library like sammy which makes this template-able and event driven. Also, may want to use location.pathname instead of href — Brad Christie
– Brad Christie, Commented Jul 23, 2013 at 13:56
@user2539797 yes, RegEx is the common abbreviation, but in JavaScript and some other languages it is called RegExp. Both mean "regular expression/s". — Paul S.
– Paul S., Commented Jul 23, 2013 at 14:06

MDEV · Accepted Answer · 2013-07-23 14:10:29Z

3

var str = "/localhost:123/list/chart=2/view=1";
var data = str.match(/\/chart=([0-9]+)\/view=([0-9]+)/);
var chart = data[1];
var view = data[2];

Of course you may want to add in some validation checks before using the outcome of the match.

Inspired by Paul S. I have written a function version of my answer:

function getPathVal(name)
{
    var path = window.location.pathname;
    var regx = new RegExp('(?:/|&|\\?)'+name+'='+'([^/&,]+)');
    var data = path.match(regx);
    return data[1] || null;
}
getPathVal('chart');//2

Function should work for fetching params from standard get parameter syntax in a URI, or the syntax in your example URI

edited Jul 23, 2013 at 14:10

answered Jul 23, 2013 at 13:59

MDEV

10.9k2 gold badges35 silver badges50 bronze badges

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

2 Comments

user2539797 Over a year ago

If its possible, can you explain how the str.match(/\/chart=([0-9]+)\/view=([0-9]+)/) works?

MDEV Over a year ago

@user2539797 Sure, the / at either end is the delimeter (contains the expression). \/ matches a forward slash, it then looks for the word chart and an = followed by 1 or more numbers (0-9) - then another forward slash (\/) the word view followed by a = and 1 or more numbers again ([0-9]+). The segments surround by parenthesis () are stored for retrieval in order (first set of brackets is data[1], second is data[2] etc... FYI the reason / has to be \/ is because the parser stops at the second / thinking that it's the end of the expression, hence the escaping (backslash)

Paul S. · Accepted Answer · 2013-07-23 14:00:54Z

2

Here's a way using String.prototype.indexOf

function getPathVar(key) {
    var str = window.location.pathname,
        i = str.indexOf('/' + key + '=') + key.length + 2,
        j = str.indexOf('/', i);
    if (i === key.length + 1) return '';
    return str.slice(i, j);
}
// assuming current path as described in question
getPathVar('chart');

answered Jul 23, 2013 at 14:00

Paul S.

66.6k9 gold badges129 silver badges143 bronze badges

Comments

basilikum · Accepted Answer · 2013-07-23 14:25:29Z

1

You could split your string up, with "/" as delimiter and then loop through the resulting array to find the desired parameters. That way you can easily extract all parameters automatically:

var x =  "/localhost:123/list/chart=2/view=1";

var res = {};
var spl = x.split("/");
for (var i = 0; i < spl.length; i++) {
    var part = spl[i];
    var index = part.indexOf("=");
    if (index > 0) {
        res[part.substring(0, index)] = part.substring(index + 1);
    }
}

console.log(res);
// res = { chart: 2, view: 1}

FIDDLE

edited Jul 23, 2013 at 14:25

answered Jul 23, 2013 at 14:11

basilikum

10.5k5 gold badges49 silver badges58 bronze badges

Collectives™ on Stack Overflow

Javascript string manipulation url

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related