JavaScript: Get query string from URL with routing that uses # sign

Question

I'm using Ext JS's routing in my app, but this is a more fundamental question... just know that routing in Ext JS is set up like http://url/#area1/subarea1, where #area1 will take me to the parent level area, and subarea1 will take me to area1's 1st child item.

Anyway, what I'm trying to accomplish is adding query params to my URL... so it would be something like http://url/#area1/subarea1?startDate=03/03/2014&isDraft=true, but it looks like location.search is an empty string, in both FF and Chrome, so I'm assuming that's by design. I know I can parse location.href, but that seems silly. I'm basically wondering if I'm doing something wrong, or if there's some other property I can use?

The [ExtJS Routing Guide](https://docs.sencha.com/extjs/6.0/application_architecture/router.html) demonstrates how parameterized URLs can be handled by the framework. — Emissary, Apr 23 '16 at 08:55
Not really what I'm looking for... doesn't look like they deal with query strings at all, but thanks anyway. — incutonez, Apr 26 '16 at 14:57
Query strings belong **before** the fragment as per the spec. You can define whatever scheme you want for managing data after the hash but why re-invent the wheel? The question was tagged `extjs` and the framework has a good API for working with fragment URI / routing. It's not clear what you're trying to achieve that can't be accomplished by following the examples in the link? — Emissary, Apr 26 '16 at 16:14
@Emissary because there's not a clear way of doing it... in your link, I didn't see a mention of a query string, and yes, you're right, the spec says to have it before the hash, but it doesn't seem relatively straightforward on how to put it before the hash without doing some URL massaging. I have a fairly quick solution that I came up with, and I'll eventually get around to posting it. — incutonez, Apr 26 '16 at 22:13

score 1 · Answer 1 · answered Apr 22 '16 at 16:32

1

A location URL always has the following order: protocol hostname pathname search hash. In your case, search is empty because the # is before the first ?.

So, in http://url/#area1/subarea1?startDate=03/03/2014&isDraft=true,

location.protocol is http:
location.hostname is url
location.pathname is /
location.search is empty
location.hash is #area1/subarea1?startDate=03/03/2014&isDraft=true

So location.hash.split('?')[1] should contain the "query params" you want, or if you want them as an object, Ext.Object.fromQueryString(location.hash.split('?')[1] || {}).

answered Apr 22 '16 at 16:32

Alexander

19,906
19
75
162

Is there an RFC or some sort of documentation on the URL order you specified? I'd be interested to read that. – incutonez Apr 22 '16 at 16:43
This faster and uses less memory: `Ext.Object.fromQueryString(location.hash.replace(/^.+\?/, ''))`. See benchmark: https://jsperf.com/hash-replace-vs-split#area1/subarea1?startDate=03/03/2014&isDraft=true – Nux Sep 28 '17 at 14:14

score 0 · Answer 2 · answered Apr 22 '16 at 16:19

I just came across the same issue in Angular. Here was my solution:

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    url = url.toLowerCase(); 
    name = name.replace(/[\[\]]/g, "\\$&").toLowerCase();
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

JavaScript: Get query string from URL with routing that uses # sign

2 Answers2