Извлечение параметра из URL с помощью JavaScript

Оффтоп javascript
1

Нужна помощь с получением значения параметра из адресной строки

У меня есть страница с курсами, где размещены метки и разделы. При клике на метку URL меняется примерно так:

localhost:3000/courses/international-exams/toefl?label_id=5&path=%2Flabel_filter%2F5%3Fsection%3Dtoefl

Мне нужно получить значение label_id из адреса, чтобы изменить цвет выбранной метки.

Проверил наличие строки label_id в URL таким способом:

$(document).ready(function(){
    var currentUrl = window.location.href;
    var searchString = "label_id";
    if(currentUrl.indexOf(searchString) > -1){
          // здесь нужно получить значение label_id
    }
});

Но теперь застрял на том, как именно извлечь это значение. Подскажите, как это сделать правильно?

2

URLSearchParams отлично подходит для этого! Вот как:

const urlParams = new URLSearchParams(window.location.search);
const labelId = urlParams.get('label_id');
console.log(labelId); // выведет 5

Гораздо проще, чем парсить вручную. URLSearchParams сам разбирает параметры, а ты просто используешь get(). Нет параметра - вернет null, удобно для проверки.

3

Можешь еще через регулярки сделать, если нужно универсальное решение:

const match = window.location.search.match(/[?&]label_id=([^&]+)/);
const labelId = match ? match[1] : null;

Работает везде, даже в древних браузерах. Регулярка найдет параметр где бы он ни стоял в строке запроса.

4

Можно через split() решить. Берешь window.location.search, делаешь split(‘&’), ищешь нужный параметр. Но URLSearchParams намного удобнее, как выше написали. Какой браузер поддерживать нужно? Для старых - тогда split пригодится.