Get escaped URL parameter

JavascriptUrlQuery StringUrl Parameters

Javascript Problem Overview


I'm looking for a jQuery plugin that can get URL parameters, and support this search string without outputting the JavaScript error: "malformed URI sequence". If there isn't a jQuery plugin that supports this, I need to know how to modify it to support this.

?search=%E6%F8%E5

The value of the URL parameter, when decoded, should be:

æøå

(the characters are Norwegian).

I don't have access to the server, so I can't modify anything on it.

Javascript Solutions


Solution 1 - Javascript

function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}

Solution 2 - Javascript

Below is what I have created from the comments here, as well as fixing bugs not mentioned (such as actually returning null, and not 'null'):

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

Solution 3 - Javascript

What you really want is the jQuery URL Parser plugin. With this plugin, getting the value of a specific URL parameter (for the current URL) looks like this:

$.url().param('foo');

If you want an object with parameter names as keys and parameter values as values, you'd just call param() without an argument, like this:

$.url().param();

This library also works with other urls, not just the current one:

$.url('http://allmarkedup.com?sky=blue&grass=green').param();
$('#myElement').url().param(); // works with elements that have 'src', 'href' or 'action' attributes

Since this is an entire URL parsing library, you can also get other information from the URL, like the port specified, or the path, protocol etc:

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value');
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

It has other features as well, check out its homepage for more docs and examples.

Instead of writing your own URI parser for this specific purpose that kinda works in most cases, use an actual URI parser. Depending on the answer, code from other answers can return 'null' instead of null, doesn't work with empty parameters (?foo=&bar=x), can't parse and return all parameters at once, repeats the work if you repeatedly query the URL for parameters etc.

Use an actual URI parser, don't invent your own.

For those averse to jQuery, there's a version of the plugin that's pure JS.

Solution 4 - Javascript

If you don't know what the URL parameters will be and want to get an object with the keys and values that are in the parameters, you can use this:

function getParameters() {
  var searchString = window.location.search.substring(1),
      params = searchString.split("&"),
      hash = {};

  if (searchString == "") return {};
  for (var i = 0; i < params.length; i++) {
    var val = params[i].split("=");
    hash[unescape(val[0])] = unescape(val[1]);
  }
  return hash;
}

Calling getParameters() with a url like /posts?date=9/10/11&author=nilbus would return:

{
  date:   '9/10/11',
  author: 'nilbus'
}

I won't include the code here since it's even farther away from the question, but weareon.net posted a library that allows manipulation of the parameters in the URL too:

Solution 5 - Javascript

You can use the browser native location.search property:

function getParameter(paramName) {
  var searchString = window.location.search.substring(1),
      i, val, params = searchString.split("&");

  for (i=0;i<params.length;i++) {
    val = params[i].split("=");
    if (val[0] == paramName) {
      return unescape(val[1]);
    }
  }
  return null;
}

But there are some jQuery plugins that can help you:

Solution 6 - Javascript

Based on the 999's answer:

function getURLParameter(name) {
    return decodeURIComponent(
        (location.search.match(RegExp("[?|&]"+name+'=(.+?)(&|$)'))||[,null])[1]
    );  
}

Changes:

  • decodeURI() is replaced with decodeURIComponent()
  • [?|&] is added at the beginning of the regexp

Solution 7 - Javascript

Need to add the i parameter to make it case insensitive:

  function getURLParameter(name) {
    return decodeURIComponent(
      (RegExp(name + '=' + '(.+?)(&|$)', 'i').exec(location.search) || [, ""])[1]
    );
  }

Solution 8 - Javascript

After reading all of the answers I ended up with this version with + a second function to use parameters as flags

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)','i').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

function isSetURLParameter(name) {
    return (new RegExp('[?|&]' + name + '(?:[=|&|#|;|]|$)','i').exec(location.search) !== null)
}

Solution 9 - Javascript

$.urlParam = function(name){
  var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(top.window.location.href); 
  return (results !== null) ? results[1] : 0;
}

$.urlParam("key");

Solution 10 - Javascript

For example , a function which returns value of any parameters variable.

function GetURLParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}​

And this is how you can use this function assuming the URL is,

"http://example.com/?technology=jquery&blog=jquerybyexample";.

var tech = GetURLParameter('technology');
var blog = GetURLParameter('blog');

So in above code variable "tech" will have "jQuery" as value and "blog" variable's will be "jquerybyexample".

Solution 11 - Javascript

You should not use jQuery for something like this!
The modern way is to use small reusable modules through a package-manager like Bower.

I've created a tiny module that can parse the query string into an object. Use it like this:

// parse the query string into an object and get the property
queryString.parse(unescape(location.search)).search;
//=> æøå

Solution 12 - Javascript

There's a lot of buggy code here and regex solutions are very slow. I found a solution that works up to 20x faster than the regex counterpart and is elegantly simple:

    /*
    *	@param		string		parameter to return the value of.
    *	@return		string		value of chosen parameter, if found.
    */
    function get_param(return_this)
    {
    	return_this = return_this.replace(/\?/ig, "").replace(/=/ig, ""); // Globally replace illegal chars.
            
    	var url = window.location.href;                                   // Get the URL.
    	var parameters = url.substring(url.indexOf("?") + 1).split("&");  // Split by "param=value".
    	var params = [];                                                  // Array to store individual values.
    	
    	for(var i = 0; i < parameters.length; i++)
    	    if(parameters[i].search(return_this + "=") != -1)
    	        return parameters[i].substring(parameters[i].indexOf("=") + 1).split("+");
    
    	return "Parameter not found";
    }

console.log(get_param("parameterName"));

Regex is not the be-all and end-all solution, for this type of problem simple string manipulation can work a huge amount more efficiently. Code source.

Solution 13 - Javascript

<script type="text/javascript">
function getURLParameter(name) {
        return decodeURIComponent(
            (location.search.toLowerCase().match(RegExp("[?|&]" + name + '=(.+?)(&|$)')) || [, null])[1]
        );
    }

</script>

getURLParameter(id) or getURLParameter(Id) Works the same : )

Solution 14 - Javascript

jQuery code snippet to get the dynamic variables stored in the url as parameters and store them as JavaScript variables ready for use with your scripts:

$.urlParam = function(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return results[1] || 0;
    }
}

example.com?param1=name&param2=&id=6

$.urlParam('param1'); // name
$.urlParam('id');        // 6
$.urlParam('param2');   // null

//example params with spaces
http://www.jquery4u.com?city=Gold Coast
console.log($.urlParam('city'));  
//output: Gold%20Coast

console.log(decodeURIComponent($.urlParam('city'))); 
//output: Gold Coast

Solution 15 - Javascript

function getURLParameters(paramName) 
{
        var sURL = window.document.URL.toString();	
    if (sURL.indexOf("?") > 0)
    {
	   var arrParams = sURL.split("?");			
	   var arrURLParams = arrParams[1].split("&");		
	   var arrParamNames = new Array(arrURLParams.length);
	   var arrParamValues = new Array(arrURLParams.length);		
	   var i = 0;
	   for (i=0;i<arrURLParams.length;i++)
	   {
		var sParam =  arrURLParams[i].split("=");
		arrParamNames[i] = sParam[0];
		if (sParam[1] != "")
			arrParamValues[i] = unescape(sParam[1]);
		else
			arrParamValues[i] = "No Value";
	   }
	
	   for (i=0;i<arrURLParams.length;i++)
	   {
	            if(arrParamNames[i] == paramName){
			//alert("Param:"+arrParamValues[i]);
			    return arrParamValues[i];
		     }
	   }
	   return "No Parameters Found";
    }

}

Solution 16 - Javascript

I created a simple function to get URL parameter in JavaScript from a URL like this:

.....58e/web/viewer.html?page=*17*&getinfo=33


function buildLinkb(param) {
    var val = document.URL;
    var url = val.substr(val.indexOf(param))  
    var n=parseInt(url.replace(param+"=",""));
    alert(n+1); 
}
buildLinkb("page");

OUTPUT: 18

Solution 17 - Javascript

Just in case you guys have the url like localhost/index.xsp?a=1#something and you need to get the param not the hash.

var vars = [], hash, anchor;
var q = document.URL.split('?')[1];
if(q != undefined){
    q = q.split('&');
    for(var i = 0; i < q.length; i++){
        hash = q[i].split('=');
		anchor = hash[1].split('#');
        vars.push(anchor[0]);
        vars[hash[0]] = anchor[0];
    }
}

Solution 18 - Javascript

Slight modification to the answer by @pauloppenheim , as it will not properly handle parameter names which can be a part of other parameter names.

Eg: If you have "appenv" & "env" parameters, redeaing the value for "env" can pick-up "appenv" value.

Fix:

var urlParamVal = function (name) {
    var result = RegExp("(&|\\?)" + name + "=(.+?)(&|$)").exec(location.search);
    return result ? decodeURIComponent(result[2]) : "";
};

Solution 19 - Javascript

This may help.

<script type="text/javascript">
	$(document).ready(function(){
		alert(getParameterByName("third"));
	});
	function getParameterByName(name){
		var url 	= document.URL,
			count   = url.indexOf(name);
			sub 	= url.substring(count);
			amper   = sub.indexOf("&"); 

		if(amper == "-1"){
			var param = sub.split("=");
			return param[1];
		}else{
			var param =	sub.substr(0,amper).split("=");
			return param[1];
		}

	}
</script>

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSindre SorhusView Question on Stackoverflow
Solution 1 - JavascriptJamesView Answer on Stackoverflow
Solution 2 - JavascriptradicandView Answer on Stackoverflow
Solution 3 - JavascriptLucasView Answer on Stackoverflow
Solution 4 - JavascriptEdward AndersonView Answer on Stackoverflow
Solution 5 - JavascriptChristian C. SalvadóView Answer on Stackoverflow
Solution 6 - JavascriptEugene YarmashView Answer on Stackoverflow
Solution 7 - JavascriptScott WojanView Answer on Stackoverflow
Solution 8 - JavascriptNeonView Answer on Stackoverflow
Solution 9 - JavascriptYoshiView Answer on Stackoverflow
Solution 10 - JavascriptRubyistView Answer on Stackoverflow
Solution 11 - JavascriptSindre SorhusView Answer on Stackoverflow
Solution 12 - JavascriptGeorge AnthonyView Answer on Stackoverflow
Solution 13 - Javascriptuser2310887View Answer on Stackoverflow
Solution 14 - JavascriptReza Baradaran GazorisangiView Answer on Stackoverflow
Solution 15 - JavascriptDhiral PandyaView Answer on Stackoverflow
Solution 16 - JavascriptCode SpyView Answer on Stackoverflow
Solution 17 - JavascriptAncyentView Answer on Stackoverflow
Solution 18 - JavascriptlasanthaView Answer on Stackoverflow
Solution 19 - JavascriptRam GuiaoView Answer on Stackoverflow