JavaScript: получить и установить параметры хеша URL?

Ответ 1

Если вы хотите проанализировать URL-адрес хэша, это работает:

var hash = window.location.hash.substr(1);

var result = hash.split('&').reduce(function (result, item) {
    var parts = item.split('=');
    result[parts[0]] = parts[1];
    return result;
}, {});

http://example.com/#from=2012-01-05&to=2013-01-01

становится

{'from': '2012-01-05', 'to':'2013-01-01'}

Ответ 2

Вы можете установить хеш с помощью:

window.location.hash = "new value";

и (в новых браузерах) прослушивать изменения с помощью:

window.addEventListener("hashchange", function () {
});

Если вам нужна поддержка браузеров, которые не поддерживают "hashchange" вы захотите использовать код, написанный другими людьми, например, плагин jquery history.

Ответ 3

Другие ответы не решают проблему

У меня есть более простой подход:

Скопируйте текущие хеш-параметры в фиктивный URL как searchParameters. Теперь вы можете обрабатывать хеш-параметры как параметры поиска и затем копировать их обратно:

Простая функция

function setOrUpdateHashParameter( hashParameterName, hashParameterValue ) {
    let theURL              = new URL('https://dummy.com');             // create dummy url
    theURL.search           = window.location.hash.substring(1);        // copy current hash-parameters without the '#' AS search-parameters
    theURL.searchParams.set( hashParameterName, hashParameterValue );   // set or update value with the searchParams-API
    window.location.hash    = theURL.searchParams;                      // Write back as hashparameters
}

Ответ 4

Для нескольких параметров:

const href = window.location.href;
const params = href.split('?')[1];

// Be sure url params exist
if (params && params !== '') {
    const result = params.split('&').reduce(function (res, item) {
        const parts = item.split('=');
        res[parts[0]] = parts[1];
        return res;
    }, {});
}

Поэтому, когда href=https://www.example.net/page.html#/page1?foo=bar&token=123abc result оценивается как {foo: "bar", token: "123abc"}.

Эта структура требует, чтобы URL имел знак вопроса ? перед параметрами, знак равенства = между ключом и значением переменной и символ & между каждой парой ключ/значение.

Ответ 5

На основе ответа Maart здесь приведена версия, которая возвращает отредактированный URL-адрес, а не применяет изменение к текущему окну.

function setHashParam(url, name, value) {

    // Create URL objects for the url we want to change and a dummy url (requires a polyfill for IE)
    var urlObj = new URL(url);
    var dummyObj = new URL('https://dummy.com');

    // Copy current hash-parameters without the '#' as search-parameters
    dummyObj.search = urlObj.hash.substring(1);

    // Set or update value with the searchParams-API (requires a polyfill for IE)
    dummyObj.searchParams.set(name, value);

    // Write back as hashparameters
    urlObj.hash = dummyObj.searchParams;

    return urlObj.href;
}

Обратите внимание, что для того, чтобы этот ответ (и ответ Маарта) работали в IE, им необходимы полизаполнения для конструктора URL и API параметров поиска.

Ответ 6

Это моё решение

arr = location.search.replace('?', '').split('&').map(x => x.split('=')).map(x => {
    let keyName = x[0];
    let val = x[1];
    let object = {};
    object[keyName] = val;
    return object;
});

obj = {}

arr.forEach(function(x) {
    let key = Object.keys(x)[0];
    obj[key] = x[key];
});

console.log(obj);

В основном с помощью location.search мы получаем правую часть URL-адреса после пути (запрос соответствует параметру).

location.search также возвращает '?' символ, замените его пробелом, затем разделите символом '& amp;', отобразите и разделите символом '=', чтобы получить массив un наподобие

[['term', 'hello'], ['lang', 'es']]

Затем соберите объект так, как вы хотели

arr = "?safe=active&source=hp&ei=c4Q8XcOPFd3F5OUP7e242Ag&q=hola&oq=hola&gs_l=psy-ab.3..0l5j0i131j0l2j0i131j0.1324.1667..1798...1.0..0.264.744.1j3j1......0....1..gws-wiz.....10..35i39.-_FkFlX_Muw&ved=0ahUKEwiDlaTgytXjAhXdIrkGHe02DosQ4dUDCAU&uact=5".replace('?', '').split('&').map(x => x.split('=')).map(x => {
    let keyName = x[0];
    let val = x[1];
    let object = {};
    object[keyName] = val;
    return object;
});

obj = {}

arr.forEach(function(x) {
    let key = Object.keys(x)[0];
    obj[key] = x[key];
});

console.log(obj);