Извлечение базового URL без параметров в JavaScript

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

Если вам необходимо извлечь URL без параметров строки запроса, вы можете воспользоваться свойствами location.protocol, location.host и location.pathname:

let freshURL = `${location.protocol}//${location.host}${location.pathname}`;

Данный метод вернёт базовую часть URL, исключая ? и всё, что идёт после него.

Удаление якорей

Если в URL присутствует якорь #, его можно удалить следующим образом:

const hashFreeURL = window.location.href.split(/[?#]/)[0];

Этот код удаляет всё, что находится за ? или #, что находит применение при работе с одностраничными приложениями, использующими якорную маршрутизацию.

Решение в одну строку

Бывают случаи, когда хватает и одной строчки кода:

const rawURL = location.toString().replace(location.search, "");

Здесь мы заменяем location.search, содержащий строку запроса, на пустую строку и таким образом очищаем URL.

Динамические URL: под контролем!

URL могут строиться со множеством дополнительных элементов, включая:

• Параметры (&key=value)
• Якоря (#section)
• Закрывающие слеши

Но наши методы вполне справляются с этим:

const sanitizedURL = window.location.href.split('?')[0].split('#')[0];

Лучшие практики, советы и хитрости

Пора перестать использовать document.location.href. Для надежности лучше выбирать window.location, который стабильно работает в разных браузерах и средах.

Для более тонкой работы с URL рекомендуется использовать API URL и URLSearchParams.

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

Рассмотрим URL как путешественника, переполненного багажом:

Полный URL: https://example.com/page?query=123&sort=asc

Путешественник (🚶‍♂️), несущий на себе много избыточного багажа (🎒👜💼🌂):

🚶‍♂️+🎒+👜+💼+🌂 = Полный URL с параметрами
🚶‍♂️   = Базовый URL без параметров

Облегчим жизнь нашему путешественнику:

const url = new URL('https://example.com/page?query=123&sort=asc');
// И избавляемся от багажа!
const baseUrl = url.origin + url.pathname;

В итоге наш путешественник чувствует себя гораздо спокойнее:

BaseUrl: https://example.com/page

Теперь мы готовы к более легкому путешествию! 🛤️

Разгадка сложных случаев

Некоторые URL бывают сложными и запутанными. Будьте внимательны к:

• Интернационализированным доменам
• URL-кодированным параметрам
• JavaScript в нестандартных средах, например, в Node.js

Используйте encodeURI() и decodeURI() для работы с интернационализированными доменами. Будьте осторожны с URL-кодированными параметрами и не декодируйте их случайно. Для Node.js рекомендуется использовать пакет url-parse для имитации работы с URL в браузере.

Работайте безопасно и правильно

Качество кода не менее важно, чем безопасность. Всегда используйте стандартные API и осуществляйте тщательное тестирование своего кода.

Если вы придерживаетесь Политики Безопасности Содержимого (CSP), убедитесь, что ваше взаимодействие с URL не нарушает её принципов.

Вспомогательные функции к вашим услугам

Создадим небольшую вспомогательную функцию:

function getBaseURL(urlString) {
    const url = new URL(urlString);
    // И вот мы получаем простой и понятный URL
    return `${url.origin}${url.pathname}`;
}

Это делает наш код более аккуратным и чистым, а также улучшает его читаемость!

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

1. Свойство Window: location – Веб API | MDN — полная информация о объекте window.location в JavaScript.
2. Как получить текущий URL в JavaScript? – Stack Overflow — вопросы и ответы о том, как извлечь текущий URL без параметров.
3. JavaScript Window Location — урок о работе с URL в JavaScript.
4. Учебник | DigitalOcean — пошаговый гайд по работе с объектом URL в JavaScript.
5. Объекты URL — детальный разбор объектов URL, их свойств и методов.
6. Получение URL и его частей в JavaScript | CSS-Tricks — разбор URL с использованием объекта URL() от CSS-Tricks.
7. URLSearchParams – Веб API | MDN — руководство по работе со строками запроса через URLSearchParams.