Домашняя работа №2 - регулярные выражения

[redexp]

Видео: https://youtu.be/PvIsxMTRz04

Задача:

1. В тот же свой приватный репозиторий скопировать папку regexp и index.html. По этому файлу как обычно бот будет проверять вашу домашку.
2. В index.html вы увидите форму с четырьмя полями: П.І.Б., Email, Пароль и Опис. Первые три по событию submit должны проверяться по следующим правилам:
   • П.І.Б. - прізвище, імʼя та по батькові. Обязательно три слова которые состоят только из букв украинского алфавита
   • Email - электронный почтовый адрес. Адрес должен содержать только один символ "собачки" - @. До символа "собачки" разрешены только символы английского алфавита, числа, тире и точки. После символа "собачки" разрешены все те же символы, но точка обязательно должна быть. Запрещено начинать или заканчивать email символом точки и запрещено чтобы точки находились рядом с символом @
   • Пароль - должен быть не менее 8 символов. Состоять должен обязательно из больших и маленьких символов английского алфавита и чисел.
3. Поля которые прошли проверку должны поменять свой background-color на #C2E0C6, если не прошли то на #F9D0C4.

Усложнённая необязательная задача:

Как вы заметили осталось ещё поле Опис, над ним есть две кнопки: Опис и Перегляд (по аналогии как здесь на гитхабе когда вы пишете коментарий Write | Preview). Ваша задача:

1. При клике на Перегляд брать значение поля [name="description"] и заменить слова по следующим правилам:

   • ++слово++ заменяем на <strong>слово</strong>
   • --слово-- заменяем на <i>слово</i>
   • (https://some-site.com/image.jpg) заменяем на <img src="https://some-site.com/image.jpg"/>, т.е. условие, что строка начинается с круглой скобки, после которой идёт https:// и строка заканчивается расширением .jpg или .png и круглой скобкой. В остальных случаях замена произойти не должна.
   • https://some-site.com/anything/else заменяем на <a href="https://some-site.com/anything/else">https://some-site.com/anything/else</a>
   • использовать исключительно эти теги для замены

2. этот текст вставляем в #preview с помощью свойства innerHTML

3. Необязательно, но желательно, сделать чтобы класс active перепрыгивал на ту кнопку на которую только что нажали. Сейчас этот класс застрял на кнопке Опис

[RomanTaran]

В необязательном задании первые два условия: это любые слова (и на каком языке)? Или нужно именно в тексте искать "слово"?

[Daniel-developer5]

В необязательном задании первые два условия: это любые слова (и на каком языке)? Или нужно именно в тексте искать "слово"?

@RomanTaran Шукаємо будь який текст)

[RomanTaran]

уточняю: любые слова, на любом языке, обрамленные или двумя плюсами или двумя минусами?

[Daniel-developer5]

уточняю: любые слова, на любом языке, обрамленные или двумя плюсами или двумя минусами?

@RomanTaran Та просто все, хоть --πππ$°$°°|°=×ππ--

[redexp]

@RomanTaran ты серьёзно? задание со звёздочкой - это просто найти текст ++слово++? Ответ: любые слова, на любом языке

[andrewvitrenko]

уточняющие вопросы: в первом инпуте делать же проверку на то, чтобы каждое слово начиналось с большой буквы? и делать поддержку бесконечного количества пробелов между этими словами или разрешать только один?

[redexp]

@AndriiVitrenko регистр букв не важен, человек сам решает насколько уважительно относиться к своему имени )) Количество пробелов между словами - сколько угодно

[andrewvitrenko]

понял. спасибо

[redexp]

Проверять начну с завтрашнего утра

[Daniel-developer5]

Добрий день! Чи можна використовувати _ в полі email?

[SerhiiYahodzynskyi]

@Daniel-developer5 а почему нет? если такие символы могут быть в имейлах

[Daniel-developer5]

@Daniel-developer5 а почему нет? если такие символы могут быть в имейлах

Просто їх в умові немає, тому і не впевнений.

[redexp]

@Daniel-developer5 вообще можно, но просто если начинать перечислять всё что можно, а что нет, то регулярка будет супер сложно, по этому я сократил до простых правил. Для нашей домашки нельзя использовать символ _ просто чтобы не усложнять.

[Daniel-developer5]

@Daniel-developer5 вообще можно, но просто если начинать перечислять всё что можно, а что нет, то регулярка будет супер сложно, по этому я сократил до простых правил. Для нашей домашки нельзя использовать символ _ просто чтобы не усложнять.

@redexp Але так навпаки легше) Для email я можу використати символьний клас \w, який включає англійські букви, цифри та _, а без нього доведеться писати більшу регулярку.

[redexp]

@Daniel-developer5 мне проще с описанием )) Нельзя, закрыли тему

[Daniel-developer5]

@Daniel-developer5 мне проще с описанием )) Нельзя, закрыли тему

@redexp Все, дякую, зрозумів)

[nedopaka]

@redexp вопрос по п.2 основной задачи

Email - электронный почтовый адрес. Адрес должен содержать только один символ "собачки" - @. До символа "собачки" разрешены только символы английского алфавита, числа, тире и точки. После символа "собачки" разрешены все те же символы, но точка обязательно должна быть. Запрещено начинать или заканчивать email символом точки и запрещено чтобы точки находились рядом с символом @

1. Тире и точек может быть сколько угодно как до @, так и после?
2. Допускается ли использовать - в начале строки, рядом с @ и после .?

[redexp]

@ANScorp

1. сколько угодно до и после
2. Вообще не допускается, но чтобы не усложнять задание я не буду проверять правильность расположения -, только правильность расположения . как описано в задаче

[nedopaka]

@redexp а допускается . после . и - после -?

[redexp]

@ANScorp я буду проверять только те правила которые описал в задаче, все остальные ситуации считаются правильными. Закрыли тему.

[oleksandr2004lataniuk]

Таке питання: Чи можна використовувати апостроф? (Наприклад прізвище Дерев'янко) (стосується обов'язкового завдання)

[redexp]

@oleksandr2004lataniuk вообще можно, но в этой домашке - нельзя

[oleksandr2004lataniuk]

@oleksandr2004lataniuk вообще можно, но в этой домашке - нельзя

добре, дякую

[Daniel-developer5]

@redexp А якщо я завтра виконаю обов'язкове завдання, а потім до кінця неділі додаткове, то ви потім перевірите його? Чи пушити всю домашку одним разом?

[redexp]

@Daniel-developer5 бот будет проверять домашку полностью и писать ошибки по основному заданию и дополнительному отдельно. Можешь делать по частям.

[redexp]

• 89 репозиториев
• Пустых репозиториев: 61
• Основная задача: 3
• Усложнённая задача: 0
• Класс active: 6

[nedopaka]

@redexp по

Необязательно, но желательно, сделать чтобы класс active перепрыгивал на ту кнопку на которую только что нажали. Сейчас этот класс застрял на кнопке Опис

проверку на класс active реализовывать с помощью регулярок?

[redexp]

@ANScorp не важно как, я просто проверяю наличие класса на кнопках

[nedopaka]

@redexp сделал все задания с применением наиболее строгих правил в прикладном смысле. Что можно еще попробовать сделать в качестве доп. задания? И есть еще один прикладной вопрос. Для п.3 доп. задания я создал свою ф-цию удаления/добавления класса с использованием регулярки. В этой регулярке я использую негативную ретроспективную проверку для отсечения вхождений, которые начинаются на -. Насколько безопасно использование такого подхода? Ресурс для проверки регулярки выдает следующее:

The "negative lookbehind" feature may not be supported in all browsers.

[redexp]

@ANScorp если тебе не приходят идеи как можно улучшить валидацию формы, то ничего и не делай... По поводу классов - не нужно придумывать велосипед, для работы с классами уже есть свойство classList. В остальном, у меня не будет времени каждому помогать с задачами которые он сам себе придумал, вас слишком много.

[andrewvitrenko]

при валидации имени нужно ведь учитывать что в украинском языке имена не могут начинатся с "ь" и "и"?

[redexp]

@AndriiVitrenko бот этого не проверяет, потому что такого условия не было в задаче

[mAndrushchenko]

Добрый вечер. Сразу к делу: если вписывать что либо в input, то по клику на submit значение backgroundColor меняется: Если же выбрать значение которое предлагает браузер: backgroundColor остается прежним: буду очень благодарен, если кто-то подскажет в чем причина.

[Daniel-developer5]

@mAndrushchenko бот, думаю, проігнорує. А так можеш заборонити автокомпліт. Пограйся з атрибутом autocomplete

[redexp]

• 89 репозиториев
• Пустых репозиториев: 36
• Основная задача: 8
• Усложнённая задача: 2
• Класс active: 17

[nedopaka]

@redexp большая просьба добавлять в комментарий по работе скрин сделанный ботом с тестовыми данными. Это исключит лишние вопросы и намного прояснит ситуацию с ошибками как в этой работе, так и в дальнейшем!

[redexp]

@ANScorp я не буду этого делать, иначе ученики видя какие значения я ввожу смогут просто написать if (email.value === '[email protected]') {email.style....

[nedopaka]

@redexp тогда скажите, пожалуйста, как мне воспроизвести следующие ошибки:

Усложнённая задача:

• ++слово++ не заменило на <strong>слово</strong>
• --слово-- не заменило на <i>слово</i>
• (https://some-site.com/image.jpg) не заменило на <img src="https://some-site.com/image.jpg"/>
• https://some-site.com/anything/else не заменило на <a href="https://some-site.com/anything/else">https://some-site.com/anything/else</a>

Я проверил - у меня ВСЕ работает.

[Daniel-developer5]

@redexp тогда скажите, пожалуйста, как мне воспроизвести следующие ошибки:

Усложнённая задача:

• ++слово++ не заменило на <strong>слово</strong>
• --слово-- не заменило на <i>слово</i>
• (https://some-site.com/image.jpg) не заменило на <img src="https://some-site.com/image.jpg"/>
• https://some-site.com/anything/else не заменило на <a href="https://some-site.com/anything/else">https://some-site.com/anything/else</a>

Я проверил - у меня ВСЕ работает.

Схожа ситуація, тільки з посиланнями

[redexp]

@ANScorp @Daniel-developer5 у вас есть ещё несколько дней - ищите, работайте.

[vitaliy-polishchuk]

И так у всех все работает. Но бот выдает ошибки...

[redexp]

пока что самая частая ошибка, что не учитывают весь украинский алфавит

[andrewvitrenko]

по поводу усложненной задачи. div#preview изначально имеет стилефое свойство display:none. бот это учитывает или нужно убирать?

[Daniel-developer5]

по поводу усложненной задачи. div#preview изначально имеет стилефое свойство display:none. бот это учитывает или нужно убирать?

@AndriiVitrenko бот враховує

[redexp]

• 89 репозиториев
• Пустых репозиториев: 24
• Основная задача: 16
• Усложнённая задача: 8
• Класс active: 25

[VyacheslavHutoryansky]

Неправильный background-color (#F9D0C4) поля input[name="full_name"]. После ввода правильного украинского имени должно быть #C2E0C6 Неправильный background-color (#F9D0C4) поля input[name="email"]. После ввода правильного email должно быть #C2E0C6

Які дані перевіряє бот? Букви і,ї,є, апостроф, перевірка 3 слів, вкрючені в регулярку, що не так?

[Daniel-developer5]

Неправильный background-color (#F9D0C4) поля input[name="full_name"]. После ввода правильного украинского имени должно быть #C2E0C6 Неправильный background-color (#F9D0C4) поля input[name="email"]. После ввода правильного email должно быть #C2E0C6

Які дані перевіряє бот? Букви і,ї,є, апостроф, перевірка 3 слів, вкрючені в регулярку, що не так?

@VyacheslavHutoryansky Не знаю чи це впливає, але в українському алфавіті ще є літера ґ. Далі можливо ви не включили можливість вводити літери великого регістру

[volus1986]

Подскажите пожалуйста На емейл приходит сообщение: "Неправильный background-color (#F9D0C4) поля input[name="email"]. После ввода правильного email должно быть #C2E0C6" Можно как-то узнать, при каких именно параметрах у меня фейлиться email, или может можно бота еще раз запустить, а то 1 попытка в сутки без видения источника ошибки немного неудобно. Я внес правки, и надеюсь что будет работать, но все-же

[redexp]

Сделаю уточнение. Ваша задача - выполнить домашнее задание. Вы не обязаны написать на каждый пункт исключительно одну регулярку которая будет удовлетворять всем условиям. Что-то вы можете проверить просто кодом, можете написать несколько регулярок для проверки одной строки и т.п.

[Daniel-developer5]

Подскажите пожалуйста На емейл приходит сообщение: "Неправильный background-color (#F9D0C4) поля input[name="email"]. После ввода правильного email должно быть #C2E0C6" Можно как-то узнать, при каких именно параметрах у меня фейлиться email, или может можно бота еще раз запустить, а то 1 попытка в сутки без видения источника ошибки немного неудобно. Я внес правки, и надеюсь что будет работать, но все-же

@volus1986 Перевірьте уважно всі вимоги до валідності імейлу та зробіть декілька тестів кожної з вимог/комбінації з вимог і тп. Головна причина, чому дз не виконується з першого разу - неуважність. Мені, дії, які я описав вище допомогли з першого разу виконати основну частину дз

[redexp]

@volus1986 представте что эта форма - реальный продукт, а бот - тупой пользователь, который просто присылает имейлы с фразой "у меня нихрена не работает, почините пожалуйста". И это реально, пользователи именно так и делают, только они не пишут "пожалуйста"

[redexp]

Напишите максимально короткую версию строки, напишите максимально длинную, со всеми возможными символами. Не придумывайте свои собственные правила, у вас есть дз, ему следуйте в первую очередь.

[Daniel-developer5]

Вже писав це у телеграммі, але продублюю тут, можливо хтось не бачив)

Вичерпна відповідь на ваші запитання щодо другої частини дз. Проведіть ось такий тест, коли все спрацює - дз виконано.

Тест:

Cтрока для тесту: ++lorem++ ipsum--dolor-- sit https://google.com img: (https://static01.nyt.com/images/2018/10/04/magazine/04blackhole1/04blackhole1-articleLarge-v3.jpg) ++againbold++ --linklist-- https://google.com, https://google.com and the last link https://blablabla.ugu.

[redexp]

бот, естественно, будет вставлять другую строку

[redexp]

• 89 репозиториев
• Пустых репозиториев: 17
• Основная задача: 33
• Усложнённая задача: 12
• Класс active: 32

[AlexPazenko]

А будуть ще перевірки домашнього завдання (regex)? Чи це була остання?

[AleksandraLyashchenco]

Почему может не быть ответа по домашке?

[LaTherapist]

А будуть ще перевірки домашнього завдання (regex)? Чи це була остання?

Будет завтра с утра. Ответа не будет, если вашего репозитория нет в списке из 89 участников.

[VyacheslavHutoryansky]

Неправильный background-color (#F9D0C4) поля input[name="full_name"]. После ввода правильного украинского имени должно быть #C2E0C6 Неправильный background-color (#F9D0C4) поля input[name="email"]. После ввода правильного email должно быть #C2E0C6 Які дані перевіряє бот? Букви і,ї,є, апостроф, перевірка 3 слів, вкрючені в регулярку, що не так?

@VyacheslavHutoryansky Не знаю чи це впливає, але в українському алфавіті ще є літера ґ. Далі можливо ви не включили можливість вводити літери великого регістру

Дійсно забув за "ґҐ". Дякую.

[redexp]

@AlexPazenko проверять буду до утра воскресенья @AleksandraLyashchenco всё у вас есть, смотрите в своём репозитории

[andrewvoinarovskyi]

Нічого якщо так? Тобто в кінці не "/>", a просто ">", в браузері виправляє

[K0marovNazar]

привет у меня есть вопрос. єто нормально что мне прислало что оснавная задача выполнена успешно но done не было прикрепрено ко второму дз, и щитается ли єто дз выполненым?

[redexp]

@AndrewVoinarovskyi бот это учитывает @K0marovNazar done поставит только если все три задачи будут выполнены. Но достаточно только выполненной основной задачи

[redexp]

• 89 репозиториев
• Пустых репозиториев: 7
• Основная задача: 62
• Усложнённая задача: 31
• Класс active: 44

[redexp]

Я подумал, что не у всех есть возможность делать домашки в будни, по этому я сделаю правило, что бот домашки будет проверять до утра понедельника включительно.

[oleksandr2004lataniuk]

Таке питання: Поле Email може мати букви верхнього регістру?

[redexp]

@oleksandr2004lataniuk может

[redexp]

• 89 репозиториев
• Пустых репозиториев: 7
• Основная задача: 71
• Усложнённая задача: 32
• Класс active: 46

[redexp]

Все у кого меньше трёх ошибок в основном задании - попадают в список проверки третьего домашнего задания. Количество студентов у которых от 1 до 3 ошибок в основном задании всего 6, я решил сделать поблажку. Я буду следить за этими студентами, если третья домашка будет такая же недоделанная, то поблажек уже не будет.

Домашки в основном у всех одинаковые. Я думаю, что убил ваше желание к творчеству из-за того что сразу натянул на форму bootstrap и она в принципе выглядела уже неплохо. @TaurusPlatinum добавил ещё один инпут "Повторіть пароль", @ANScorp добавил анимацию на инпуты, если они не проходили валидацию. Но эта анимация по итогу мешала боту вставлять новые значения, её пришлось убрать.

[redexp]

Ещё одно, не закрывайте свои issue с домашками