EN
JavaScript - get, set, and remove URL hash parameters
16 points
In this article, we would like to show you how to get, set and remove URL hash parameters in JavaScript using custom logic.
Note: to understand how the below example works, copy the code into your project.
Example index.htm file:
xxxxxxxxxx1
2
<html>3
<head>4
<script src="hash-parameters.js"></script>5
</head>6
<body>7
<script>8
9
function doLogic() {10
console.log('------- by getParameters() -------');11
12
var parameters = HashParameters.getParameters();13
14
for (var i = 0; i < parameters.length; ++i) {15
var parameter = parameters[i];16
console.log(parameter.name + ': ' + parameter.value);17
}18
19
console.log('------- by getParameter() --------');20
21
var pageNumber = HashParameters.getParameter('page-number', '1');22
var pageSize = HashParameters.getParameter('page-size', '20');23
var dataOrder = HashParameters.getParameter('data-order', 'A-Z');24
25
console.log('page-number: ' + pageNumber);26
console.log('page-size: ' + pageSize);27
console.log('data-order: ' + dataOrder);28
}29
30
HashParameters.addListener(doLogic); // fired when hash changed31
32
doLogic();33
34
35
/*36
// additional operations37
38
HashParameters.setParameter('page-number', '5');39
HashParameters.setParameter('page-size', '50');40
41
HashParameters.removeParameter('page-number');42
HashParameters.removeParameter('page-size');43
HashParameters.removeParameter('data-order');44
45
HashParameters.clearParameters();46
*/47
</script>48
</body>49
</html>Example result:
Example hash-parameters.js file:
xxxxxxxxxx1
// 'use strict';2
3
(function (window) {4
var PARAMETER_EXPRESSION = /^([^=]+)(?:=(.*))?$/g;5
6
function removeItem(array, item) {7
var index = array.indexOf(item);8
if (index == -1) {9
return;10
}11
array.splice(index, 1);12
}13
14
function matchParameter(text) {15
PARAMETER_EXPRESSION.lastIndex = 0;16
return PARAMETER_EXPRESSION.exec(text);17
}18
19
function decodeComponent(part) {20
if (part) {21
return decodeURIComponent(part);22
}23
return null;24
}25
26
function parseParameters(request) {27
var parameters = { };28
var postfix = request.substring(1);29
if (postfix) {30
var parts = postfix.split('&');31
for (var i = 0; i < parts.length; ++i) {32
var part = parts[i];33
if (part) {34
var match = matchParameter(part);35
if (match) {36
var name = decodeComponent(match[1]);37
parameters[name] = decodeComponent(match[2]);38
}39
}40
}41
}42
return parameters;43
}44
45
function renderHash(parameters) {46
var postfix = '';47
for (var el in parameters) {48
var parameter = parameters[el];49
if (postfix) {50
postfix += '&';51
}52
postfix += encodeURIComponent(el);53
if (parameter) {54
postfix += '=' + encodeURIComponent(parameter);55
}56
}57
return '#' + postfix;58
}59
60
window.HashParameters = new function() {61
var cache = null; // current hash for changes detection62
63
var parameters = { }; // parsed and decoded parameters64
var listeners = [ ]; // hash initialized or typed event methods65
66
function updateParameters() {67
var hash = location.hash;68
if (hash == cache) {69
return false;70
}71
parameters = parseParameters(cache = hash);72
return true;73
}74
75
function updateHash() {76
var hash = renderHash(parameters);77
if (hash == cache) {78
return false;79
}80
location.hash = cache = hash;81
return true;82
}83
84
function fireListeners() {85
for (var i = 0; i < listeners.length; ++i) {86
var listener = listeners[i];87
listener.call(window);88
}89
}90
91
window.addEventListener('hashchange', function () {92
if (updateParameters()) {93
fireListeners();94
}95
});96
97
updateParameters();98
99
// public methods100
101
this.addListener = function(action) {102
if (action instanceof Function) {103
listeners.push(action);104
var result = function() {105
if (action) {106
removeItem(listeners, action);107
action = null;108
}109
};110
return result;111
}112
throw new Error('Indicated listener action is not function type.');113
};114
115
this.removeListener = function(action) {116
removeItem(listeners, action);117
};118
119
this.getParameters = function() {120
var result = [ ];121
for (var key in parameters) {122
result.push({name: key, value: parameters[key]});123
}124
return result;125
};126
127
this.getParameter = function(name, defaultValue) {128
return parameters[name] || defaultValue;129
};130
131
this.setParameter = function(name, value) {132
parameters[name] = value;133
updateHash();134
};135
136
this.removeParameter = function(name) {137
delete parameters[name];138
updateHash();139
};140
141
this.clearParameters = function() {142
parameters = { };143
updateHash();144
};145
};146
})(window);
