Как стать автором
Обновить

Манипулирование URL'ами в JavaScript

Время на прочтение2 мин
Количество просмотров71K
Из года в год, сталкиваюсь с одной и той же проблемой. Как добавить, изменить или удалить параметр к некоторому адресу в строковом виде. Быстро и грязно это можно делать с помощью, например, регулярных выражений или найти каке-то готовое решение. Зачастую также может потребоваться, к примеру, подменить путь в адресе или изменить протокол с HTTP на HTTPS и т.д.

В целом, это хочется делать просто и понятно. При этом хочется разумного компромиса. Я встречал некоторые библиотеки, которые дают мощный функционал, но при этом по объему — десятки килобайт JavaScript кода. Несколько десятков килобайт, чтобы, например, подменить параметр в QueryString? Эх…


В общем, написал свое решение, которое нашел удобным, в первую очередь, для себя. При решении также позаимствовал накопленный опыт товарища Jan Wolter по поводу парсинга QueryString в JavaScript (осторожно — английский). Это хоть несколько и увеличило объем кода, зато способно избавить от некоторых проблем.

Итак, мое решение можно забирать отсюда — github.com/Mikhus/jsurl. Лицензия — MIT, так что делайте все, что захотите. Минифицированный и пожатый gzip'ом код получился менее килобайта, что должно быть приемлимым. Зависимостей от каких-либо других библиотек не наблюдается. API — простой: сначала превращаем строку с адресом в объект Url и далее обращаемся с ним в зависимости от ситуации — либо как со строкой, либо как с объектом. Например, так:

var u = new Url('http://user:pass@example.com:8080/some/path?foo=bar#anchor');
// На заметку: если в конструктор не передавать параметр - будет использован текущий адрес документа

// глянем, что у нас есть:
alert( 'Исходный URL: ' + u);

// теперь поменяем что-нибудь:
u.hash = 'new-anchor';  // заменим в исходном адресе анкор на новый
u.protocol = 'https';   // изменим протокол
u.pass = '';            // уберем пароль
u.query.foo = 'baz';    // изменим значение параметра foo в QueryString
u.query.bar = [1,2,3];  // добавим новые параметры bar в QueryString со значениями 1, 2 и 3, т.е. bar=1&bar=2&bar=3

// посмотрим, что получилось:
alert( 'Измененный URL: ' + u);


Любые замечания, доработки, найденные баги, форки и другие кошерные вещи — приветствуются и благодарятся.
Теги:
Хабы:
Всего голосов 70: ↑67 и ↓3+64
Комментарии50

Публикации

Истории

Работа

Ближайшие события

19 августа – 20 октября
RuCode.Финал. Чемпионат по алгоритмическому программированию и ИИ
МоскваНижний НовгородЕкатеринбургСтавропольНовосибрискКалининградПермьВладивостокЧитаКраснорскТомскИжевскПетрозаводскКазаньКурскТюменьВолгоградУфаМурманскБишкекСочиУльяновскСаратовИркутскДолгопрудныйОнлайн
3 – 18 октября
Kokoc Hackathon 2024
Онлайн
24 – 25 октября
One Day Offer для AQA Engineer и Developers
Онлайн
25 октября
Конференция по росту продуктов EGC’24
МоскваОнлайн
7 – 8 ноября
Конференция byteoilgas_conf 2024
МоскваОнлайн
7 – 8 ноября
Конференция «Матемаркетинг»
МоскваОнлайн
15 – 16 ноября
IT-конференция Merge Skolkovo
Москва
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань