Query strings

by trolleymusic

HTML

<input id="url" placeholder="URL">
<button id="getQS">Get QueryString</button>
<button id="getQSC">Get QueryString components</button>
<input id="find" placeholder="Find what? (Key)">
<button id="getPQSC">Find particular value</button>

CSS

input, button { display: block; margin: 10px 5px; width: 90%; height: 20px; }

JavaScript

var getQueryString = function(s) {   
    var a = s.match(/\?([\w\&\=]+)/g)
    return !a ? '' : a[0];
}
    
var getQueryStringComponents = function(s) {
    var r = /(\w+)\=([\w\%]+)+/g;
    var a;
    var result = [];
    while ((a = r.exec(s)) != null) {
        result.push(a);
    }
    return result;
}
    
var getParticularQueryStringComponents = function(s, searchString) {
    var r = new RegExp(searchString + '\\=([\\w\\%]+)+','g');
    var a = r.exec(s);
    return !a ? '' : a[1];
}

var s = window.location.href;
if (!getQueryString(s).length) { s += '?example=QueryString&In=Here&WhichMay=NeedSomeWorkFor%20Encoding' }

var inputURL = document.getElementById('url');
inputURL.value = s;                        document.getElementById('getQS').addEventListener('click', function() { alert(getQueryString(inputURL.value)); });
document.getElementById('getQSC').addEventListener('click', function() {
    var a = getQueryStringComponents(inputURL.value);
    alert(a.length + ' components');
    for (var i = 0; i < a.length; i++) {
        alert(a[i].join('\n'));
    }
});
                                 
var find = document.getElementById('find');
document.getElementById('getPQSC').addEventListener('click', function() {
    if (!find.value) { return; }
    var s = getParticularQueryStringComponents(inputURL.value, find.value);
    alert('Value = ' + s)
});