Reading a variable stored in a URL

Question

i wanted to use a variable that i manualy inserted in my url

for example the url test.coaching.com?c=1

then i wanted to check if the var c had any value attached to it, if it had i would show a label and a textbox if it hadnt i would hide it

Here is my code so far:

function getUrlVars() {
        var vars = {};
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
        });
        return vars;
        }

         function start()
         {
            var first = getUrlVars()["c"];

            if ( first == "")
            {
                document.getElementById("labeler").style.display = "none";
                document.getElementById("emailcoacher").style.display = "none";
            }
            else
            {
                document.getElementById("labeler").style.display = "block";
                document.getElementById("emailcoacher").style.display = "block";
            }

         }

The problem is i cant get it to read the variable, is there someting im doing wrong?

URL parsing is actually not a trivial task, yes you could get something working with regex etc, but using a battle tested library would make more sense, .. eg. https://www.npmjs.com/package/url-parse — Keith, Jun 28 '18 at 11:09
Refer to this working example: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript — joknawe, Jun 28 '18 at 11:11
@Keith Modern browsers actually make this very easy. `new URL('https://test.coaching.com?c=1').searchParams.get('c');` You can check browser compatibility [here.](https://caniuse.com/#search=URLSearchParams) — Ben Fortune, Jun 28 '18 at 11:14
I completely vouch with @Keith here, by creating your own URL Parser, you are open to more than a dozen security and performance issues. Using a supported library at the least guarantees that these flaws were tested and are safe. The link added has `2 dependencies` so be aware of that. — Alex, Jun 28 '18 at 11:15
@BenFortune Yes, modern browsers make this a lot easier,. Personally I try and find solutions that work Client & Server side. In a way URL is also a library function, and my point about parsing not been trivial of course still applies. — Keith, Jun 28 '18 at 12:13

Mario · Accepted Answer · 2018-06-28T11:18:23.090

0

Update: It's URL param not a hash, so updated answer below.

You could use the URL object.

var url_string = window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);

answer from here

Ignore: If you want to get the hash from an url, try to use.

window.location.hash

and then just deconstruct the hash to your needs.

edited Jun 28 '18 at 11:18

answered Jun 28 '18 at 11:12

Mario

870
9
20

It's not a hash. It's a query parameter. – Ben Fortune Jun 28 '18 at 11:13
well, true in the context. thanks @BenFortune will update answer – Mario Jun 28 '18 at 11:16

score 0 · Answer 2 · answered Jun 28 '18 at 11:19

I am basically repeating what Ben Fortune mentioned.

Most browsers support URL Interface which allows you to cleanly parse parameters out of the URL using .searchParams.get(args)

let url = new URL('https://test.website.com?c=1&b=2');

let b = url.searchParams.get('b');
let c = url.searchParams.get('c');

console.log(`B: ${b}\nC: ${c}`);

score -1 · Answer 3 · answered Jun 28 '18 at 11:18

Use this function :

function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

Reading a variable stored in a URL

3 Answers3