Проверка наличия #хэша в URL с помощью JavaScript

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

Для обнаружения хэша URL в JavaScript применяется свойство window.location.hash. Это свойство возвращает строку с хэшем, которая начинается с #, либо же возвращает пустую строку, если хэш отстутствует. Для того чтобы получить значение хэша без символа #, можно использовать следующий код:

let hash = window.location.hash;
console.log(hash ? `Хэш: ${hash.slice(1)}` : 'Хэш не обнаружен'); // Ведем поиски сокровищ, оказывается?

Разбираемся с основами

Проверка наличия хэша и использование условных конструкций

Применение условных операторов if/else позволяет выполнять разные действия в зависимости от того, присутствует ли хэш или нет:

if(window.location.hash) {
    // Хэш обнаружен! Поместите свой код здесь.
} else {
    // Хэш не обнаружен. Выполните альтернативные действия.
}

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

Получение хэша без символа '#'

Для получения значения хэша без учета символа #, используется метод substring(1):

let hashValue = window.location.hash.substring(1); // Готовы пройтись по указателям?

Размываем границы мифов

Проверка наличие хэша в строке URL

Проверить наличие хэша можно также при помощи метода location.href.indexOf("#"):

let hasHash = location.href.indexOf("#") !== -1; // Немного ностальгии по старым добрым временам

Перехват полного хэша

Для того чтобы получить весь хэш после символа '#', вам поможет:

let fullHash = location.href.substr(location.href.indexOf("#")); // Когда в последний раз занимались поиском подстроки? Пора вспомнить!

Разделение URL

Хэш можно определить также при помощи разделения URL на части:

let parts = window.location.href.split('#');
let hash = parts.length > 1 ? parts[1] : null; // Мы разделяем URL на части, выделяя каждый из хэшей

Профессиональный подход

Отслеживание перемены хэша

Изменение hash не вызывает перезагрузку страницы, но возможно отслеживание изменений хэша с помощью события hashchange:

window.addEventListener('hashchange', () => {
    console.log("Хэш изменился на:", window.location.hash); // Мы следим за изменением хэша!
});

Учет старых браузеров

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

Учет кодировки URL

Необходимо принимать во внимание кодировку URL: хэши могут содержать кодированные символы, которые необходимо раскодировать с помощью функций decodeURI() или decodeURIComponent().

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

Информацию лучше всего воспринимаем на вид.Давайте визуализируем процесс проверки наличия хэша в URL:

Пример URL: 'https://example.com/page#section2'

🔍🕵️‍♂️ Метод проверки URL: window.location.hash

На проверке выявляется хэш, если он присутствует:

window.location.hash == '#section2'

🔍👉 Извлечённый хэш: #section2

Результат проверки хэша:
Хэш отсутствует? [🚫🔍] => Результат: ''
Хэш обнаружен? [✅🔍] => Результат: '#section2'

Динамический контент и навигация по хэшам

Веб-страницах обычно используются хэши для навигации, чтобы сохранить позицию прокрутки или загрузить динамический контент без обновления страницы.

SEO и использование хэша

Использование хэша в URL может повлиять на SEO. Поисковые системы, как правило, не учитывают фрагменты URL, что может влиять на индексацию сайта.

Анализ сложных хэш-строк

Сложные хэш-строки, которые содержат несколько параметров, могут потребовать дополнительной функции или библиотеки для их обработки.

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

1. Window: location property – Web APIs | MDN — Подробное описание свойства location в JavaScript.
2. Retrieve specific hash tag's value from url – Stack Overflow — Трюки и лайфхаки по работе с хэшами URL.
3. Get URL and URL Parts in JavaScript | CSS-Tricks — Исчерпывающий гид по работе с URL и его составляющими в JavaScript.
4. How To Get The Current URL With JavaScript — Практическое руководство по получению текущего URL.
5. URL objects — Знакомство с URL-объектами и использованием их для анализа и формирования URL.
6. Selectors | jQuery API Documentation — Самое полное руководство по селекторам jQuery, включая работу с хэшами.