I need to get values from a url after (#) with jquery

Question

I have this url:

http://test.words.aspx#word_id=1034374#lang_code=en

I need to get the values of word_id and Language code and assign them to variables.

var word_id = 1034374;
var lang_kod = en;

Answer 1

Here is the code you need:

var link = window.location;

var data = link.split("#");

var word_id = data[1].split("=")[1];
var lang_code = data[2].split("=")[1];

With window.location you get the url that you currently are (an alternative is document.location.

Then you split it by the hash symbol (link.split("#")) and the result is stored as an array of strings (data) which now contains http://test.words.aspx at index 0, word_id=1034374 at index 1 and lang_code=en at index 2;

What you have to do now is split the string at index 1 by the equals symbol (data[1].split("=")). This also is an array of string which has the word_id at index 0 and 1034374 at index 1 which is what you need (data[1].split("=")[1]).

Following the same logic you also get the lang_code variable.

Test it here:

var link = "http://test.words.aspx#word_id=1034374#lang_code=en"

var data = link.split("#");

var word_id = data[1].split("=")[1];
var lang_code = data[2].split("=")[1];

console.log("Word ID = " + word_id);
console.log("Lang Code = " + lang_code);

Hope this was helpful :)

Answer 2

You should really only have one URL fragment. But in your case you could do the following to achieve this.

var url = "http://test.words.aspx#word_id=1034374#lang_code=en"; // or use window.location;
var url_splitted = url.split('#');

alert((url_splitted[1]).split('=')[1]); // showing you the values
alert((url_splitted[2]).split('=')[1]); // showing you the values

var work_id = (url_splitted[1]).split('=')[1];
var lang_code = (url_splitted[2]).split('=')[1];

Working JSFiddle: https://jsfiddle.net/o0nwyvfz/

Note:

If you are about to use multiple URL fragments, I'd suggest you to use URL parameters e.g.: http://test.words.aspx?word_id=1034374&lang_code=en

Which you could retrieve by:

A solution provided by: http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html

var getUrlParameter = 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];
        }
    }
};

And this is how you can use this function assuming the URL is, http://test.words.aspx?word_id=1034374&lang_code=en

var tech = getUrlParameter('word_id');
var blog = getUrlParameter('lang_code');