JavaScript - создаем динамический поиск (используем события js, fetch, map, filter, forEach, regex)

В этом видео мы создадим форму динамического поиска станций московского метро, используя "ванильный" JavaScript.

Мы будем работать с DOM элементами на странице, получать данные из удаленного API с помощью fetch, а также фильтровать данные с помощью regex.

В рамках проекта мы также будем использовать различные методы JS, включая: map, filter, forEach.

Мои Курсы:

Подписывайся на соц сети:

[sno-oze]

Как говорят: если пытаетесь решить проблему регуляркой, значит у вас теперь 2 проблемы - это регулярка и ваша проблема.
По сути, можно и обычными includes и toLowerCase() решить, НО, в рамках обучения, можно и regex.
Like!

[nbiswck]

Классный формат: не слишком долгий и полезный.

Было бы здорово увидеть в подобном формате какой-то не слишком сложный проект с ООП. Эта тема редко встречается, хочется понять как это делать правильно.

P.s. Всем советчикам в комментариях, которые "знают как лучше было сделать" большой привет и пожелания крепкого здоровья!

[mikhail_one]

Что бы стразу же получать данные из поля ввода можно повесить на него input.addEventListener('input', (e)=>{
//ваш код
})

[mike-aaa]

Хм.... странно... проделать ВСЮ работу в функции и потом проверить на нужность!
А еще в подмене нужно использовать $&, а не введеное значание, иначе регистры сломаются
text.replace(regExp, '<mark>$&</mark>')

[nhrafun]

Странно, что преподаёте фетч, но ловить ошибки не учите. По вашей ссылке на json - 404. Странно, что еще нет вопросов, типа "все как в видео делаю, а станции не получаю". Всегда нужно проверять респонс (if(!response.ok)). И естественно .catch((error) => )...

[ndsllpb]

А можно ли добится подобного функционала если писать в старом стандарте es5?

[Expertdog]

Интересное и полезное видео. Благодарю за труд! Только вопрос: api со станциями метро сами делали или есть готовое решение? Like!!!

[zfcdyvg]

Здравствуйте, подскажите почему при замене в 39строке стрелочной функции station => на обычную -function(station) код падает? (перестает корректно выделять буквы). Как вообще правильно здесь будет заменить стрелочную на function?

[qlxuquu]

А зачем фраг g? Если есть одно совпадение в названии, то этого уже достаточно

[qlxuquu]

Ахахах, почему match, если совпадение затем нигде не используется? Тогда test() достаточно, match очень сильно грузит проц на нормальном объеме (не учебном)