logo
Все курсыВсе курсы
ВебинарыРазобраться в ITРеферальная программаПолучить профессию в SkyproПолучить профессию в Skypro

Проверка наличия строки в URL с JavaScript и jQuery

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

Чтобы проверить, содержится ли определённая строка в URL, воспользуйтесь методом includes() из JavaScript:

JS
Скопировать код
let containsString = window.location.href.includes("franky"); // true говорит о том, что URL содержит 'franky'
console.log(containsString);
Кинга Идем в IT: пошаговый план для смены профессии

Когда достаточно простого true или false

Попробуем найти строку "franky" в адресе:

JS
Скопировать код
if (window.location.href.includes("franky")) {
    console.log("URL содержит 'franky'. Может, тут что-то неладно?"); // CSI: URL
}

jQuery – для ценителей эстетики

jQuery поможет вам с этим:

JS
Скопировать код
$(document).ready(function() {
    if(window.location.href.indexOf("franky") != -1) { // -1 означает, что 'franky' не обнаружен
        alert("'Franky' найден в URL");
    }
});

Не забудьте подключить jQuery к вашему HTML-файлу для работы с jQuery:

HTML
Скопировать код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Регулярные выражения – проще, чем выглядит

Обратимся к "franky" с помощью регулярных выражений:

JS
Скопировать код
if (/franky/.test(window.location.href)) {
    console.log("Обнаружен 'Franky' в URL!");
}

Когда ваш браузер — археологическая находка

Используйте indexOf() для поддержки устаревших браузеров:

JS
Скопировать код
let urlString = window.location.toString(); // Приводим URL к строковому формату
let containsString = urlString.indexOf("franky") != -1; // если 'franky' отсутствует, возвращается -1
console.log(containsString);

Таинство параметров запроса с URLSearchParams

Разбор параметров запроса

Проверим наличие параметра "search" в строке запроса:

JS
Скопировать код
let params = new URLSearchParams(window.location.search);
let hasSearch = params.has("search"); // 'search' обнаружен в URL
console.log(hasSearch);
Подробнее об этом расскажет наш спикер на видео
skypro youtube speaker

Мониторинг значений параметров

Теперь определим значение параметра "search":

JS
Скопировать код
let value = params.get("search");
console.log(value); // Вау! 'search' заметили в URL

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

У нас есть цель: выяснить, содержит ли URL нашу заданную строку:

Markdown
Скопировать код
Цель – URL: "http://example.com/page?search=query"
Ищем слово: "search"

Проанализируем URL:

Markdown
Скопировать код
Содержит ли URL "search"?
- "http://example.com/page?search=query": ✅
- "http://example.com/page?find=query": ❌

Вот и всё, что стоит знать о поиске "search" в URL!

Преодоление возможных трудностей

Гонка с временем (репетиция)

Убедитесь, что ваш код не запустится до полной загрузки страницы:

JS
Скопировать код
window.onload = function() {
    if(window.location.href.includes("franky")) {
        alert("'Franky', тебя не спрятать в URL.");
    }
};

includes(), чувствительный к регистру

Метод includes() чувствителен к регистру. Поэтому используйте toLowerCase():

JS
Скопировать код
let lowerCaseUrl = window.location.href.toLowerCase();
console.log(lowerCaseUrl.includes("franky".toLowerCase())); // теперь 'Franky' не уйдет, изменяя регистр

Работа с хеш-значениями

Если вы ищете хеш в URL:

JS
Скопировать код
console.log(window.location.hash.includes("#franky")); // true, если "#franky" является частью хеша URL
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какой метод используется для проверки наличия строки в URL в JavaScript?
1 / 5
Свежие материалы
Лучшие каналы для изучения JavaScript
6 сентября 2024
Видео уроки по мобильной разработке
6 сентября 2024
Как найти код безопасности в Epic Games
6 сентября 2024