В этом теоретическом уроке мы с вами изучим регулярные выражения, самозапускающиеся функции и что такое BOM. Начнем с регулярных выражений.
Регулярные выражения (или как их еще называют RegExp. Regex переводится как Regular Expressions, т.е. регулярные выражения) — это мощный инструмент для поиска текста и работы с ним. Регулярные выражения позволяют находить, проверять и заменять части строки по заданному шаблону.
И давайте сразу же попрактикуемся.
Давайте создадим константу в которой будет просто текст “Привет мир”. Теперь допустим наша задача проверить, есть ли в это строке слово мир. Как это сделать. Для этого создадим еще одну константу, и в значении этой константы нам необходимо написать регулярное выражение. Если для строк мы используем кавычки, то для регулярных выражений мы используем косую черту. Давайте укажем открывающую и закрывающую косую черту, а между ними мы можем написать любое слово, которое необходимо найти. Это слово будет мир.
Теперь, чтобы проверить есть ли слово мир в строке примет мир, мы можем воспользоваться методом test нашего регулярного выражения. Метод test вернет true строка соответствует определенному регулярному выражению.
Метод тест один и самых используемых методов для регулярных выражений. Давайте рассмотрим следующий часто используемый метод – это exec. Данный метод возвращает массив, содержащий информацию о совпадениях, если они найдены.
Вот как видите мы получили массив, который в нулевой позиции содержит совпадение, т.е. в нашем случае это слово мир. Далее, идут как ни странно ключи. НО как я говорил в уроке про массивы, что массивы тоже могут содержать ключи. Первый ключ – это groups, о нем мы позже поговорим. Далее идет индекс позиции совпадения. Т.е. у нас совпадение в строке начинается с 8-ой позиции, затем идет само поисковое слово и длина массива.
Когда мы вводим обычные слова, словосочетания или просто буквы вежду косыми чертами, то так мы используем так называемые литеральные символы. Но есть еще метасимволы – это символы имеющие специальное назначение. Их можно воспринимать как фильтры для поиска необходимого текста.
Метасимволы подразделяются на:
├── Якоря (^, $, \b)
├── Квантификаторы (*, +, ?, { })
├── Группировка и ссылки (( ), (?: ), \1)
├── Классы символов ([ ], \w, \d)
├── Экранирование (\)
└── Альтернация (|)
Давайте начнем их изучение с классов символов. Классы символов в регулярных выражениях позволяют указать, какие именно символы (т.е. буквы, числа и т.д.) должны в тексте. Эти символы мы должны написать внутри квадратных скобок. Например, если мы напишем так: [abc], это означает, что мы ищем либо букву a, либо b, либо c. Если в строке будет находиться любой из этих символов, регулярное выражение его найдёт.
Также мы можем также указать диапазон символов. Например, [a-z] означает, что мы ищем любую строчную букву от a до z. А Если мы напишем [0-9], это будет означать, что мы ищем любую цифру от 0 до 9.
Можно комбинировать несколько символов и диапазонов. Например, выражение [a-zA-Z0-9] будет находить любую букву или цифру, то есть все строчные и прописные буквы латинского алфавита и цифры.
Как видите метод exec вернул нам букву р так как это первая строчная буква в слове. А если мы напишем так:
То метод вернет там букву П заглавную, так как мы ищем также все заглавные буквы.
У классов символов также есть сокращенные классы для поиска любых букв, цифр или пробелов.
Например, давайте проверим, есть ли в нашем тексте привет мир пробел.
А теперь давайте проверим есть ли в нашем тексте любая буква.
И как не странно, метод возвращает false. Дело в том, что этот сокращенный класс пока еще плохо работает с кириллицей. Если мы перепишем наш текст латинскими буквами:
То метод текст вернет тру.
А что если мы хотим выбрать не первую букву, а первое слово в тексте. Для этого нам помогут Квантификаторы. Квантификаторы в регулярных выражениях — это специальные символы, которые отвечают за повторение. Самый популярный квантификатор – это знак +. Давайте напишем такой пример:
Знак плюс означает, что в нашем случае класс символов должен повторяться до тех пор, пока следующий символ в тексте не будет буквой. Т.е. пока он не дойдёт до запятой в нашем тексте. И как видите наше регулярное выражение вернуло слово привет.
А если мы хотим получить слово мир, как нам это сделать. Перед словом мир идет пробел, значит делаем так:
Знак плюс действует только на предыдущий символ, т.е. в нашем случае на класс символов от а до я. Получается сперва регулярное выражение найдет пробел, а сразу после него должны идти буквы пока они не закончатся. Помимо плюса есть и другие квантификаторы.
Например, мы можем задать точное количество повторений, например 2 раза с помощью фигурных скобок.
В этих фигурных скобках мы также можем написать, например, не точно 2 повторения, а не менее 2 повторений, с помощью добавления запятой.
Или можно указать от двух до, допустим 10 повторений таким образом
Кстати, знак + это сокращенное свойство такой записи {1,}, т.е. не менее одного повторения. Также есть знак *, который является аналогом записи {0,}. Т.е. можно и так написать, чтобы необходимые символы или цифры или знаки препинания повторялись от 0 до n-го количество раз. Например, мы можем написать так.
Укажем, что нам нужна любая цифра и поставим знак звездочка. И метод exec, если в тексте нет цифр, просто вернет пустую строку.
И среди квантификаторов есть еще вопросительный знак, который является аналогом такой записи {0,1}, т.е. искать необходимый символ, знак препинания или цифру от 0 до одного раза.
Кстати, забыл еще рассказать про еще один класс символов – это любой знак кроме. Пишется он так. Допустим мы хотим получить адрес имейл адреса без знака собачки и последующих символов типа mail ру яндекс ру и т.д. Можно написать так:
На самом деле это еще есть еще классы символов о которых я не рассказал, но я просто приведу их в этой таблицы, чтобы не тратить на них время. Там нет ничего сложного, если возникнут вопросы, то пишите.
А что если мы хотим выбрать последнее слово в тексте “привет мир” без пробела впереди. Мы можем воспользоваться якорями. Якоря – это специальные символы в регулярных выражениях, которые указывают на позицию в строке
Есть символ начала строки. Он указывается перед классом символов. Например, напишем так:
И метод выведет первое слово в строке.
Дальше у нас есть символ конца строки. Он ищет уже не слева направо как символ начало строкой и справочник на лево. И если мы на пишем так
То можно подумать что метод exec вернет нам последнее слово мир. Но нет, так как последним идет восклицательный знак, что не является буквой. Если мы уберем восклицательный знак, то все сработает так как иы хотим.
Также среди якорей есть символ граница слова, которая пишется так. Если вы его ставите перед , например, литеральными символами, то граница слова ищет допустим нужное литеральные символы перед которым идёт любой символ который является не буквой или отсутствие символа (например, это начало строки). Если вы ставить символ границы слова после литерального выражения, то он работает также просто ищет литеральные символы после которых идёт любой символ который является не буквой или отсутствие символа (например, это конец строки).
И можно подумать, что это для нас лучший вариант чтобы получить последнее слово в тексте если написать так.
То метод exec не вернет null, так как символ границы слова по крайней мере на моей браузере не работает с кириллицей, даже если мы используем класс символов. Но переписав предложение латиницей.
Все будет работать корректно.
Нам осталось рассмотреть 3 типа метасимволов, и один из них – это знаки альтернации, точнее знак альтернации, так как он такой один. Символы альтернации в регулярных выражениях создает условие, при которых строка может соответствовать нескольким вариантам.
Например напишем такой вариант.
Т.е. в этом регулярном выражении либо слово привет, либо слово пока.
Переходим к предпоследнему типу метасимволов – это экранирование. Здесь тоже только отдин символ как и с альтерацией. Символ экранирования используются для указания, что следующий за ними символ следует интерпретировать буквально, а не как метасимвол. Например, квадратные скобки мы используем, чтобы указать класс символов в регулярных выражениях, но я если мы просто ищем в тексте квадратные скобки, то необходимо применить символ экранирования.
Осталось рассмотреть последний тип метасимволов – это группировка. С помощью группировки мы можем находить несколько последовательностей символов и затем обработать их отдельно. Например, давайте а тексте привет мир отдельно захватим первое слово и отдельно второе. С помощью группировки это можно сделать так.
И вот мы получили массив, где в нулевой позиции у нас полное совпадение с нашим регулярным выражением. В первой позиции находится первая группа, во второй вторая.
А если мы напишем так, т.е. разместим знак плюс за скобкой, то этот знак плюс будет действовать не на класс символов а на саму группу
Может возникнуть вопрос, а почему в первой группе мы получили букву Т. Дело в том, что когда квантификатор + применяется к группе, то эта группа будет постоянно перезаписываться пока в тексте не встретится символ, который не является кириллической буквой. В нашем случае это будет запятая, а перед запятой у нас идет буква т. Вот почему она отобразилась в первой группе. Со второй группой всё тоже самое.
Если вы не хотите чтобы метод exec выводил отдельно результат первой группы, то можете поставит знак вопроса и двоеточие в самом начале группы. Двоеточие, означает что эту группу не надо отдельно выводить в массиве.
И вот результата первой группы к нас нет в массиве. Помимо двоеточия мы можем применять вот сколько знаков. Но я бы хотел рассмотреть из всего этого именование группы.
Теперь наши группы отображаются здесь и здесь в месте где располагаются именованные группы.
И нам осталось рассмотреть последний тип метасимволов – это флаги. Флаги необходимы чтобы изменить поведение поиска. Пишутся они в самом конце регулярного выражения. Их в JavaScript всего 7 штук. И первым мы рассмотрим флаг i – данный флаг сообщает, что необходимо искать необходимые символы в независимости от из регистра. Например давайте в тексте привет мир с помощью флага найдем выберем первое слово.
Т.е. в классе символов нам больше не надо указывать отдельно заглавные буквы.
Следующий флаг – это глобал. Он ищет все повторения регулярного выражения в целом в тексте. И для метода exec он практически бесполезен, так как метод exec возвращает только одно совпадение регулярного выражения в целом. Но для подсчета всех совпадений есть метод match. Давайте например посчитаем сколько всего символов в тексте привет мир.
Далее я в кратце расскажу об остальных флагах.
m – это многострочный поиск. Т.е. можно искать определенные символы, например в начале каждой строки.
d – нужна чтобы точка также считала за символ перенос строки
u – поддержка уникода. С помощью этого флага можно корректно обрабатывать всякие символы, например, эмодзи в тексте.
На этом с регулярными выражениями всё. Нам осталось рассмотреть еще 2 небольшие темы. И начнем с BOM. BOM расшифровывается как Browser Object Model, т.е. Браузерная модель документа. И по сути это тоже самое что и DOM, который предоставляет методы и свойства для взаимодействия с веб страницей, только BOM предоставляет нам свойства и методы для взаимодействия с браузером.
Часть методов для взаимодействия с браузером есть у объекта window. Например такой метод как alert для показа модального окна или как его еще называют – окна предупреждения.
Или мы можем вывести окно для того чтобы пользователь ввел какой-нибудь текст
Но это еще не все методы объекта window для взаимодействия с браузером. Вот их краткий список.
Также у нас есть объект навигатор, который содержит информацию о браузере и операционной системе пользователя.
И как видите в этом объекте перечислены различная информация о моем браузере и операционной системе. Вы можете спросить а почему в свойствах appCodeName и appName Указаны Mozzila и Netscape, ведь мф пользуюмся браузером Microsoft Edge а не Mozzila Firefox.
Значение “Mozilla” и “Netscape” в браузере Edge (а также и в других современных браузерах. У них тоже такое значение в свойствах appCodeName и appName). Так вот эти значения имеют исторические корни. В 1990-х годах браузер Netscape Navigator, который был одним из первых популярных веб-браузеров, использовал значение “Mozilla” в своем свойстве аppCodeName. Позже, когда другие браузеры начали развиваться, они также начали добавлять этот идентификатор к своим строкам аppCodeName, чтобы поддерживать совместимость с сайтами, которые проверяют и адаптируются под конкретные браузеры на основе их идентификаторов. Сейчас этим свойством уже практически не пользуются и его оставили просто как дань традиции.
Следующий объект для работы с браузером который мы рассмотрим – это location. Данный объект позволяет работать с URL текущей страницы и перенаправлять пользователя. Давайте посмотрим какие свойства и методы у него есть. И самое часто используемое свойство – это href, благодаря которой мы можем получить адрес текущего сайта или изменить его.
Далее у нас еще ест объект history. который предоставляет доступ к истории посещений в рамках текущей сессии. Например если мы используем метод back то мы вернемся на предыдущую страницу, а это у нас будет пустая страница. А если воспользуемся методом forward то снова окажемся на странице с яндексом. (Показать).
И последний объект, о котором я расскажу для взаимодействия с браузером – это screen. Данный метод предоставляет информацию об экране пользователя.
Вот здесь отображается текущая ширина и высота экрана, также есть глубина цвета и тд.
И нам осталось рассмотреть последнюю тему – это самозапускающиеся функции.
Самозапускающиеся функции — это функции в JavaScript, которые запускаются сразу после того, как они были определены. Они позволяют вам создавать изолированные области видимости и вы часто будите с ними сталкиваться когда вам надо буде вставить чужой код в ваш, например, вам надо будет добавить счетчик от Яндекса или гугл. Этот код от например Яндекса будет иметь примерно такой вид, где эти скобки сообщают, что данная функция является самозапускающейся. Делается это для того, чтобы не произошло конфликта имен у функции от Яндекса с вашим кодом. Данная функция как бы невидима для вашего кода и работает сама по себе.
Давайте напишем пример самозапускающиеся функции.
Итак для начала нам надо написать круглые скобки и внутри них создать функцию. Далее чтобы запустить данную функцию, нам надо поставить круглые скобки сразу после этих.
И вот Функция запустилась. Если сы хотим передать какой-нибудь параметр, то надо написать так:
На этом урок заканчивается. До встречи на следующем уроке.
Домашнее задание. Напишите приложение куда можно будет вставить текст, и ваше приложение посчитает, сколько в тексте всего знаков и сколько из этих знаков являются буквами.
