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