Не могу получить параметр из текущего URL

Question

Нужно получить параметр из текущего адреса (из адресной строки), изменить его и перейти по полученной ссылке.

В тестовом варианте, если вбить url руками, то всё работает.

var url = new URL('https://www.example.com/params?isItem=true&paramId=123');

var u = url.searchParams.get('paramId');  // тут всё ок, u = 123 и дальше его можно изменить и подставить через url.searchParams.set . Но мне нужно не один раз изменить 'paramId', а постоянно менять его и переходить по новым ссылкам.

Перехожу к проблеме. Если вбивать начальный URL не руками, а попытаться подхватить значение параметра из текущего url в браузерной строке, то получить значение параметра уже не получается. Выскакивает ошибка "Uncaught TypeError: Cannot read properties of undefined (reading 'get')"

var url = window.location.href;
alert(url); //тут видно, что url абсолютно такой же, как примере выше (https://www.example.com/params?isItem=true&paramId=123), но при этом url.searchParams.get не может подцепить значение 123, а выдаёт ошибку. Почему? И как можно исправить?
var u = url.searchParams.get('paramId');  // Uncaught TypeError: Cannot read properties of undefined (reading 'get')

Answer 1

У вас записи не идентичны. У location.href нет метода searchParams, т.к. он возвращает строку, а не объект.

Вместо url = window.location.href; пишите как выше url = new URL(window.location.href);

Однако помните, что если нет гет параметра с нужным ключом url.searchParams.get('paramId'); всё равно вернёт null

Answer 2

Дело window.location.href возвращает строку у которой нет такого метода, чтобы получить нужный гет параметр можете воспользоваться window.location.search

const params = window
    .location
    .search
    .replace('?','')
    .split('&')
    .reduce((p,e) =>{
            const a = e.split('=');
            p[ decodeURIComponent(a[0])] = decodeURIComponent(a[1]);
            return p;
        },
        {}
    );

console.log( params['paramId']); // Нужный вам параметр

БЛОГ НА HUSL

Не могу получить параметр из текущего URL

Ответы (2 шт):