Извлечение идентификатора фрагмента из URL в jQuery

Быстрый ответ

Чтобы извлечь идентификатор фрагмента из URL на JavaScript, есть простое решение: использовать свойство window.location.hash и затем отбросить символ #, применив метод .slice(1):

let fragment = window.location.hash.slice(1);

Теперь у вас есть строка с идентификатором фрагмента, которую можно использовать в дальнейшем.

За пределами основ

Существуют ситуации, когда требуются более продвинутые решения, например: извлечение фрагмента из строки URL или обеспечение совместимости в различных условиях.

Работа со строками

Если вам необходимо извлечь фрагмент не непосредственно из window.location, а из строки URL, можно сделать это следующим образом:

let url = "https://example.com/page#gold";
let fragment = url.substring(url.indexOf('#') + 1);

Мы находим позицию символа решётки и выбираем всё, что находится после него. Всё просто и понятно!

Подробнее об этом расскажет наш спикер на видео

Безопасность в приоритете

Если в URL отсутствует символ решётки, стоит предусмотреть проверку:

if(window.location.hash) {
    let fragment = window.location.hash.slice(1);
    // Выполните действия с полученным фрагментом
} else {
    // Решётки нет, значит и фрагмента тоже нет
}

Работа с закодированными символами

Иногда в URL могут встречаться специальные закодированные символы. window.location.hash автоматически их декодирует, но если требуется получить хеш в исходном виде, следует использовать такой подход:

let fullURL = window.location.href;
let rawFragment = fullURL.includes('#') ? fullURL.split('#')[1] : '';
// Получаем хеш в "сыром", исходном виде

Игра с хеш-маршрутами

При разработке одностраничных приложений (SPA) важно уметь отслеживать изменения хеша:

window.addEventListener('hashchange', function() {
    let currentHash = window.location.hash.slice(1);
    // Хеш поменялся, нужно обновить контент!
});

Этот сценарий обеспечит вам актуальность состояния хеша.

Визуализация

Представляем вашему вниманию визуализацию всего процесса.

URL — это ваш картографический свиток (🗺️):

Ваш Свиток (🗺️): https://example.com/page#treasure

Идентификатор фрагмента охраняется защитником в виде решётки (#):

Защитник решётка (#): #

Обойдём защитника, чтобы добраться до сокровища (💎):

// Мы идём за сокровищами
const treasure = window.location.hash.slice(1); // 💎 'treasure'

Таким образом, метод .hash помогает вам "добыть" нужное вам «сокровище» из хеша.

Уверенность в чистом JavaScript

jQuery может быть соблазнительным, но зачем усложнять задачу, когда можно обойтись чистым JavaScript:

let fragment = window.location.hash.slice(1);
// И всё, без использования сторонних библиотек!

Практические испытания

Онлайн-среды разработки вроде jsfiddle или CodePen являются идеальными для тестирования работы с URL. Тестируйте ваш код, обнаруживайте и исправляйте ошибки, экспериментируйте — и всё это сделано так, чтобы избежать хаоса!

Полезные материалы

1. Свойство Location: hash – Веб-API | MDN — Официальная документация по работе с фрагментом URL.
2. JavaScript Window Location — Руководство W3Schools по использованию объекта Window Location в JavaScript.
3. Получение экранированного URL параметра – Stack Overflow — Обсуждение методов получения параметров URL на Stack Overflow.
4. Получение URL и его частей в JavaScript | CSS-Tricks — Советы и хитрости по работе с URL от CSS-Tricks.
5. URI.js – Управление URL в JavaScript — Библиотека для упрощения операций с URL.
6. jQuery.get() | Документация jQuery API — Инструкция по использованию метода .get() в jQuery для извлечения значений из GET-параметров.
7. HTML-стандарт — HTML спецификация, описывающая location.hash.