Xử lý query string bằng JavaScript

Đoạn code snippet sau sử dụng JavaScript để đọc các parameter truyền vào query string trên URL.

Cách 1: Dùng Vanilla JavaScript

Ưu điểm của cách này là “portable”, tương thích hầu như với tất cả trình duyệt. Đoạn mã sau của tôi còn xử lý cả array lẫn object parameter.

var queryString = window.location.search
             .substring(1) // strip the leading '?'
             .split('#')[0], // remove the part after hash
    params = queryString.split('&'),
    searchParams = {}; // output

for (var i = 0; i < params.length; i++) {
    var pair = params[i].split('='),
        name = pair[0],
        value = typeof (pair[1]) === 'undefined' ?
                true : decodeURIComponent(pair[1]);

    if (name.match(/\[.*\]$/)) { // array type parameter
        var key = name.replace(/\[.*\]/, ''),
            index = /\[(.*)\]/.exec(name)[1];

        // convert index to integer if possible
        if ( /^[0-9]+$/.test(index) )
            index = parseInt(index);

        // add a new key if it does not exist
        if (!searchParams[key]) {
            if ( isNaN(index) )
                searchParams[key] = {};
            else
                searchParams[key] = {};
        }
        if ( index === '' )
            searchParams[key].push(value);
        else
            searchParams[key][index] = value;
    } else {
        if (!searchParams[name])
            searchParams[name] = value;
        // duplicated key found? turn it into array
        else if ('string' === typeof searchParams[name])
            searchParams[name] = [searchParams[name], value];
        else
            searchParams[name].push(value);
    }
}

// ?topic=test%20query%20string&version=1.0
console.log( searchParams["topic"] ); // "test query string"
console.log( searchParams["version"] ); // "1.0"

Hoặc nếu không muốn quá phức tạp như trên (không có array hay object) thì hãy dùng phiên bản rút gọn như sau cho nhanh.

var queryString = window.location.search.substring(1),
    params = queryString.split('&'),
    searchParams = {};

for (var i = 0; i < params.length; i++) {
    var pair = params[i].split('=');
    searchParams[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
}

Cách 2: Sử dụng URLSearchParams

URLSearchParams là built-in interface để xử lý query string trên URL, có nhiều tính năng đáng chú ý. Tuy nhiên đây là interface tương đối mới và không tương thích với Microsoft Internet Explorer và Microsoft Edge (…cho đến khi Edge dùng WebKit).

var queryString = window.location.search;
var searchParams = new URLSearchParams(queryString);

// ?topic=test%20query%20string&version=1.0
console.log( searchParams.get("topic") ); // "test query string"
console.log( searchParams.get("version") ); // "1.0"