Pixelmountain

Url parameters uit de query string halen met javascript

Onlangs had ik een scriptje nodig om de parameters (of variabelen) in de Query String van een URL op de pagina te plaatsen. Een zoektocht die na enkele minuten al het gewenste script opleverde. Een script dat ik met plezier met jullie deel.

Wil je meer weten over het script? Even verderop ga ik dieper in op wat het script juist doet.

function get_param( name )
	{
		name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
		var regexS = "[\\?&]"+name+"=([^&#]*)";
		var regex = new RegExp( regexS );
		var results = regex.exec( window.location.href );

			if( results == null )
			return "";
			else
			return results[1];
	}

var param_name = get_param( 'name' );
var param_difficulty = get_param( 'difficulty' );

document.write(param_name);

1. Wat is een Query string?

Een Query string is een deel van de URL dat gebruikt wordt om de inhoud van variabelen door te geven.
Bekijk even onderstaand voorbeeld, waarbij we een pagina ‘tutorial.html’ op Pixelmountain hebben. De inhoud van deze pagina gaat over een tutorial over CSS en heeft een gemiddelde moeilijkheidsgraad:

http://www.pixelmountain.be/demo/tutorial.html?name=css&difficulty=makkelijk

We kunnen deze link opsplitsen in 2 delen:

1. http://www.pixelmountain.be/demo/tutorial.html is de eigenlijke URL van onze pagina

2. ?name=css&difficulty=moderate is onze Query String.

‘tutorial’ en ‘name’ zijn 2 variabelen die elk een waarde hebben: ‘css’ en ‘makkelijk’.

Note: de eerste variabele in de string moet steeds starten met ‘?’. Alle volgende variabelen moeten starten met ‘&’.

2. Het script ontleed

function get_param( name )
function get_param( name )
	{
		name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
		var regexS = "[\\?&]"+name+"=([^&#]*)";
		var regex = new RegExp( regexS );
		var results = regex.exec( window.location.href );

			if( results == null )
			return "";
			else
			return results[1];
	}

Het script gaat op zoek naar variabelen in de string (a.h.v. ‘? en ‘&’) en plaatst de variabelen en hun inhoud in een array.

var param_name = get_param( 'name' );
var param_difficulty = get_param( 'difficulty' );

We declareren de variabele param_name en de inhoud hiervan is de waarde van de parameter ‘name’. De waarde van deze parameter zal verschijnenen als we de variabele in het laatste deeltje oproepen:

document.write(param_name);

Met behulp van bovenstaand script kunnen we de twee waarden op onze pagina tutorial.html weergeven.

Demo