Регулярное выражение javascript: Регулярные выражения — JavaScript | MDN

Документация  >  Javascript  >  Регулярные выражения в Javascript ч. 2

Введение

Регулярные выражения — это мощное средство для обработки входящих данных. Задача, требующая замены или поиска текста, может быть красиво решена с помощью этого «языка внутри языка». И хотя максимальный эффект от регулярных выражений можно добиться при использования серверных языков, всё же не стоит недооценивать возможности этого приложения и на стороне клиента.

Основные понятия

Регулярное выражение (regular expression) — средство для обработки строк или последовательность символов, определяющая шаблон текста.

Модификатор — предназначен для «инструктирования» регулярного выражения.

Метасимволы — специальные символы, которые служат командами языка регулярных выражений.

Регулярное выражение задаётся как обычная переменная, только вместо кавычек используется слеш, например: var reg=/рег_выражение/

Под простейшими шаблонами будем понимать такие шаблоны, которые не нуждаются в каких-либо специальных символах.

Допустим, нашей задачей является замена всех букв «р» (малых и заглавных) на латинскую большую букву «R» в словосочетании Регулярные выражения.

Создаём шаблон var reg=/р/ и воспользуясь методом replace осуществляем задуманное

<script language="JavaScript">
var str="Регулярные выражения"
var reg=/р/
var result=str.replace(reg, "R")
document.write(result)
</script>

В результате получим строку «РегуляRные выражения», замена произошла только на первом вхождении буквы «р» с учётом регистра.

Но под условия нашей задачи этот результат не подходит… Тут нам понадобятся модификаторы «g» и «i», которые могут использоваться как отдельно, так и совместно. Эти модификаторы ставятся в конце шаблона регулярного выражения, после слэша, и имеют следующие значения:

модификатор «g» — задаёт поиск в строке как «глобальный», т.е. в нашем случае замена произойдет для всех вхождений буквы «р». Теперь шаблон выглядит так: var reg=/р/g, подставив его в наш код

<script language="JavaScript">
var str="Регулярные выражения"
var reg=/р/g
var result=str.replace(reg, "R")
document.write(result)
</script>

получим строку «РегуляRные выRажения».

модификатор «i» — задаёт поиск в строке без учёта регистра, добавив этот модификатор в наш шаблон var reg=/р/gi, после выполнения скрипта получим искомый результат нашей задачи — «RегуляRные выRажения».

Специальные символы (метасимволы)

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

• Метасимволы поиска совпадений.
• Количественные метасимволы.
• Метасимволы позиционирования.

Метасимволы поиска совпадений

\b
граница слова, задаёт условие, при котором шаблон должен выполняться в начале или конце слов.
в начале строки.

$
в конце строки.

Некоторые методы для работы с шаблонами

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

test — данный метод проверяет, есть ли совпадения в строке относительно шаблона и возвращает false, если сопоставление с образцом закончилось неудачей, в противном случае true.

например:

<script language="JavaScript">
var str="JavaScript"
var reg=/PHP/
var result=reg.test(str)
document.write(result)
</script>

выведет в качестве результата false, т.к. строка «JavaScript» не равна строке «PHP».

Также метод test может возвращать вместо true или false любую другую строку заданную программистом.

например:

<script language="JavaScript">
var str="JavaScript"
var reg=/PHP/
var result=reg.test(str) ? "Строка совпала" : "Строка не совпала"
document. write(result)
</script>

в этом случае в качестве результата будет строка «Строка не совпала».

exec — данный метод выполняет сопоставление строки с образцом, заданным шаблоном. Если сопоставление с образцом закончилось неудачей, то возвращается значение null. В противном случае результатом является массив подстрок, соответствующих заданному образцу. /*Первый элемент массива будет равен исходной строке удовлетворяющее заданному шаблону*/

например:

<script language="JavaScript">
var reg=/(\d+).(\d+).(\d+)/
var arr=reg.exec("Я родился 15.09.1980")
document.write("Дата рождения: ", arr[0], "< br>")
document.write("День рождения: ", arr[1], "< br>")
document.write("Месяц рождения: ", arr[2], "< br>")
document.write("Год рождения: ", arr[3], "< br>")
</script>

в результате получим четыре строки:
Дата рождения: 15.09.1980
День рождения: 15
Месяц рождения: 09
Год рождения: 1980
Заключение

В статье отображено далеко не все возможности и прелести регулярных выражений, для более глубокого изучения этого вопроса посоветую изучить объект RegExp. .]+.[a-z]{2,3}/i.

Выскорко М. С.,
14.07.2006.

← Вернуться к списку

JavaScript для профессионалов. Объект window. Регулярные выражения

Добрый день! Я рад приветствовать вас на курсе JavaScript для профессионалов. Тема урока: свойства объекта window. Работа со строками и регулярными выражениями. В первой части сегодняшнего урока мы рассмотрим несколько объектов, которые доступны через свойства глобального объекта window. Мы рассмотрим объекты location, navigator. Рассмотрим функции позволяющие создавать таймеры и планировать запуск определенного функционала через определенный интервал времени. Во второй части урока мы детальнее рассмотрим методы, которые есть у строковых объектов. Рассмотрим как можно с помощью этих методов манипулировать значениями строковых переменных. И в конце урока мы рассмотри регулярные выражения, рассмотрим как с помощью регулярных выражений можно валидировать строковые данные, как можно производить поиск в строковых значениях и т. д. Начнем урок с таймеров. Мы с вами сейчас рассмотрим способы планирования запуска своих функций. В языке JavaScript есть две возможности запланировать запуск: однократно, через определенный таймаут. Это делается с помощью функции setTimeout() и мы можем запланировать запуск функции многократно через определенный интервал времени. Например, чтобы функция стартовала каждую секунду, вот так делала бесконечно долго. С помощью setInterval() мы можем сделать планирование ежесекундного запуска определенной функции, а с помощью setTimeout() можем запланировать один запуск функции через определенный таймаут. Давайте посмотрим первые примеры работы с таймерами. Для того, чтобы создать таймер мы можем воспользоваться глобальной функцией setTimeout(). На 11 строке запуская функцию setTimeout() мы этой функции должны передать как минимум два параметра: Первый параметр – это то, что мы хотим запустить, то есть та функция, которую мы хотим выполнить через определенный отрезок времени. Второй параметр – это количество миллисекунд, которые должны пройти перед тем, как функция будет запущена. По сути на этой строке мы указываем, что функцию showMessage() нужно запустить через 5 секунд По завершению вызова на 11 строчке. Вы знаете, что в одной секунде 1000 миллисекунд. По этому значение, которое мы указываем вторым параметром – это количество миллисекунд. На 11 строке эта строчка выполнится и браузер продолжит дальнейшую работу и начнет выполнять код, который находится ниже. В нашем случае этого кода нету. Но когда пройдет 5 секунд у браузера сработает таймер и браузер запустит функцию, которая находится на 13 строке. То есть после загрузки документа по истечению 5 секунд у нас отобразится сообщение Hello world. Давайте проверим. Прошло 5 секунд и сообщение отобразилось. Вот это и есть задача функции setTimeout() – запланировать запуск нашей функции через определенный промежуток времени. Эту функцию можно также использовать в другом ключе, мы можем использовать вот такую более короткую запись. Используя setTimeout() первым параметром мы сразу же передаем анонимную функцию, а вторым параметром передаём интервал времени. Вот, код будет работать абсолютно одинаково. Давайте мы сейчас сделаем, что бы запуск произошел через пол секунды, и через пол секунды тоже запустился alert(). По этом у в зависимости от ситуации выбирайте тот способ запуска функции, который наиболее подходящий, наиболее удобный в вашем приложении. Следующая функция, которую мы можем использовать – это setInterval() с ее помощью мы планируем неоднократный запуск функции. Когда загружается текущий документ, мы создаем счетчик, переменную counter со значением 0. Далее определяем функцию с именем count и в эту функцию помещаем код, который увеличивает счетчик, а потом находит в теле документа элемент с id output, то есть вот этот элемент и в innerHTML этого элемента записывает значение переменной counter. То есть вызвали функцию count – счетчик увеличился, увеличенное значение вывелось в документ. Вызвали еще раз функцию count, вызвали счетчик и уже новое значение вывелось в документ. Мы хотим сделать так, чтобы эта функция count у нас бесконечно долго запускалась с определенным интервалом. Для этого на 17 строке мы вызываем функцию setInterval(). В предыдущем примере был setTimeout(), а здесь setInterval() и это означает, что при вызове жатой функции мы передаем такие же параметры: функцию и время, через которое нужно запустить функцию. Но теперь JavaScript будет планировать запуск этой функции не один раз, а неоднократно, много раз. Запустили функцию count, подождали секунду, запустили еще раз, подождали секунду, запустили еще раз и так бесконечно. Давайте проверим. Видите, вот у нас тикает счетчик. Каждую секунду вызывается функция count, увеличивает счетчик, и его новое значение отображает в документе. Но что делать, если мы не хотим, чтобы счетчик тикал вечно. Если мы хотим контролировать этот счетчик в нужный момент времени. В следующих примерах показано, как это можно сделать.

В примере номер три в документе сообщение будет размещено через 5 секунд, а на 25 строке находится ссылка, в которой с помощью псевдопротокола JavaScript мы запускаем функцию cancel(), если мы делаем нажатие. В начале давайте посмотрим, что произойдет, когда документ у нас загрузится. На 8 строке мы обрабатываем событие загрузки окна и при этом, при загрузке окна мы вызываем на объекте window функцию setTimeout(). Вот на самом деле функцию setTimeout() можно вызывать как в предыдущих примерах вот таким способом, так и через глобальный объект window, потому что все функции и все переменные, которые мы создаем, они превращаются в свойства и методы глобального объекта window. По этому мы можем и такой способ использовать с явным указанием, что вызываем функцию на объекте, либо использовать вот такой вот синтаксис. Разницы при этом никакой не будет. Вызывая метод setTimeout() мы указываем, что showMessage() мы хотим запустить через 5 секунд. Любая функция, которая создает таймер, и setTimeout() и setInterval() возвращает нам переменную, возвращает нам объект, который мы записываем в переменную. Вот объект, который находится в этой переменной timer, с его помощью мы можем контролировать этот таймаут, который мы установили на 9 строке. Вот если мы ничего не будем делать, то по прохождении 5 секунд у нас таймаут запустится и сработает showMessage(). Но если мы в течении этих 5 секунд, пока ожидается запуск функции. Если мы нажмем на ссылку отмена и запустим JavaScript функцию cancel(), то в таком случае на строке 18 запускается функция clearTimeout(), которая в качестве параметра принимает объект, полученный при запуске setTimeout(). Вот если в течении 5 секунд выполнить clearTimeout() то браузер отменит работу этого таймера и не будет запускать функцию show message через 5 секунд. Давайте проверим, что будет если мы ничего не делаем. Запускаем пример, ждем 5 секунд и видим, то браузер отображает нам сообщение. Но если мы обновляем страницу и нажимаем на ссылку Отмена. То сколько бы мы уже не ждали, setTimeout() не сработает и отображать сообщение уже не будет. В этом примере мы увидели противоположный метод setTimeout() – метод clearTimeout(), который удаляет запланированный вызов функции. И точно так же у на сеть функция, которая позволяет остановить интервал, остановить бесконечный запуск определенной функции. Давайте мы в начале посмотрим как работает этот пример. Нажав на кнопку Start мы видим, как у нас увеличивается счетчик, нажав на кнопку Stop, счетчик останавливается. Продолжает увеличиваться, останавливается. В этом примере в разметке у нас есть параграф, в котором будет выводится значение счетчика и две кнопки: кнопка startButton и stopButton. Обратите внимание, что здесь мы используем не навязчивый JavaScript код. Если посмотреть на HTML разметку, то мы не может сказать, что где-то существует JavaScript. У нас есть просто элементы с уникальными идентификаторами, а отдельно есть JavaScript код, который находит элементы по идентификатору и начинает выполнять какие-то операции с этими элементами. Давайте посмотрим как у нас работает наш пример. Ну, во-первых, как всегда мы делаем обработчик на загрузку документа, но дополнительно, чтобы было удобней работать с этим документом на строке 26 мы создаем переменную get, в которую записываем функцию, и задача этой функции – принимать идентификатор и возвращать объект, который найден в DOM дереве страницы с помощью document. getElementById() с параметром, который попал сюда в качестве аргумента. То есть получается вот на 27 строке мы извлекаем значение из документа. Но в нашем примере, нам намного проще будет обращаться к документу, нам не нужно будет писать длинную эту фразу document.getElementById(). Мы можем пользоваться просто методом get() для того, чтобы получить значение со страницы. Значит это всего лишь вспомогательная функция. Вот на 7, 8 строчке, когда запускается станица, создается счетчик, далее создается переменная, в которой будет хранится таймер. И на строке 10 создается функция count(). Задача этой функции – найти в документе элемент с id output и в innerHTML этого элемента перезаписать counter. То есть, по сути эта строчка находит параграф на 32 строке и вместо этой черточки подставляет сюда значение счетчика. Изначально значение 0. Далее счетчик увеличивается. Мы хотим сделать так, чтобы эта функция запускалась неоднократно, по этому на 15 строке находим на странице элемент с id startButton, указываем, что добавляем обработчик на нажатие, на событие onClick() и в этом обработчике у нас выполняется вот такая операция. То есть, запускать функцию count() с интервалом в 5 миллисекунд. Нам возвращается объект intervalHandler, записывается в переменную intervalHandler. Объект, который возвращается setInterval() – это таймер, который контролирует запуск функции count, вот получается, что после 16 строки функция count() начинает быстро запускаться, вот и когда мы нажимаем на кнопку Stop – срабатывает обработчик onClick(), в этом обработчике вызывается clearInterval(). Вот для Timeout у нас есть clearTimeout(), а для интервала у нас есть функция clearInterval(), которая тоже принимает в качестве параметра объект, который из себя представляет timer, и заставляет этот объект прекратить неоднократный запуск определенной функции. Вот такой пример, в котором мы увидели, что не только таймауты можно останавливать но и интервалы, они тоже поддерживают остановку. В следующих уроках мы разберём как с помощью функций setTimeout() и setInterval() можно создавать различные интересные эффекты, например, бегущую строку. Также в следующих уроках мы посмотрим как создавать анимацию на основе этих функций. Теперь давайте перейдем ко второй части урока, к объекту location.

Объект location доступен на свойстве document и предоставляет нам информацию о текущем расположении браузера. То есть с помощью location мы можем узнать где мы сейчас находимся, какой адрес текущей страницы и дополнительные сведения об адресе страницы. Если мы сейчас запустим этот пример, то увидим, что у нас браузер отображает много различных значений. Location, protocol, host, pathname, search. Сейчас мы разберемся с вами, что означают вот эти записи в документе. Когда выполняется сценарий текущей страницы, то на 7 строчке не дожидаясь загрузки документа мы в тело документа отображаем document.location. document.location – это весь URL адрес. Вот представьте, что если мы заходим по вот такому адресу, то document.location – это весь текст, который сейчас выделен. Если на интересует протокол, чем мы пользовались http, https, то в таком случае мы можем воспользоваться свойством protocol объекта location. Вот protocol – это будет вот данное значение, которое сейчас выделено в тексте. Если мы хотим узнать доменное имя адреса страницы, то мы можем воспользоваться document.location.host. В host будет находится значение, которое сейчас выделено. edu.cbsystematics.com. Если нас интересует файл, к которому в данный момент времени идет запрос, мы можем воспользоваться свойством pathname. В свойстве pathname будет находится вот это значение. И последнее, то что нас может интересовать – это строке запроса или querry string, то есть параметры, которые передаются на страницу при запросе. Параметры передаются через вот такой код, через знак вопроса и далее уже идут параметры непосредственно с их значениями. Вот сейчас в строке, которую мы выделили находится параметр с именем id и значением 10. Таких параметров может быть достаточно много для одной страницы. Я думаю, что все из вас замечали такие адреса в веб-приложениях. Сейчас мы с вами посмотрим как можно пользоваться этими свойствами, как можно читать их и применять для каких-то своих задач.

Первое, что мы разберем – это способ, как можно парсить те значения, которые передаются через адресную строку. Для чего нужны те значения, которые идут вот после знака вопроса. Какая задача у этих параметров. Представьте, что эта страница info.aspx, задача этой страницы идти в базу данных, брать информацию о определенном пользователе и показывать эту информацию в документе. Вот нам нужно чтобы одна и та же страница показывала информацию о разных пользователях. Как можно сделать чтобы тот же код брал информацию о разных пользователях. Мы должны передать этому коду параметр, подсказать, какой именно пользователь нас интересует. Вот с помощью вот такого синтаксиса мы можем сказать, что если мы заходим вот по такому адресу – это означает, что страница info.aspx должна найти переменную id, взять значение этой переменной – 10 и использовать эту 10 в своих каких-то задачах. Например 10 – это id пользователя, которого нужно вытащить из базы и показать о нем информацию. Вот мы заходим по такому адресу и видим информацию о 10 пользователе. Вписываем информацию, значение 20, видим информацию, которая у нас в таблице находится на 20 строке, и т. д. Получается, что с помощью get параметра мы можем в страницу передать какую-то информацию, чтобы страница могла эту информацию обработать и выдать какой-то интересный нам контент, тот контент, который нас интересует. Давайте посмотрим, как в JavaScript коде можно легко работать с этими параметрами. Дело в том, что этих параметров может быть не одно, а их может быть очень много. Через амперсанд они могут быть перечислены, то есть на страницу может приходить одновременно три, четыре, 10, 15 параметров. Вот как мы можем упростить себе жизнь и сделать легким чтение всех этих параметров, передаваемых при запросе. Во втором примере у нас есть простая функция, задача которой вернуть объект связанный с всеми get параметрами, или параметрами запроса, которые пришли на текущую страницу. Давайте в начале мы запустим пример, чтобы мы видели, как это у нас сработает. Вот сейчас мы зайдем на страницу и передадим два дополнительных параметра. Страница urlParsing ждет от браузера параметр с именем login и параметр с именем password. Вот странице передадим два параметра. Параметр login, параметр password. Сейчас мы в login передадим имя admin, а в password передадим имя qwerty. Ну представьте, что якобы так у нас происходит авторизация в документе. Если от пользователя приходит правильно значение, то страница показывает какой-то контент. Если login и password неправильные, то страница ничего не показывает. Конечно так никто не делает, но просто для примера, для каких-то параметров. Если мы сейчас перейдем по этому адресу, браузер загрузил страницу, он знает о наших get параметрах и мы хотим сейчас JavaScript кодом посмотреть на эти параметры и что-то с ними сделать. В нашем случаем мы просто параметры отобразим в документе. Нажимаем кнопку и видим что login – admin и password qwerty. Получается страница получила доступ к строке запроса, распарсила эту строку запроса и вытащила значение только тех параметров, которые мы передавали. Если мы сейчас здесь поменяем, admin заменим на 1, qwerty заменим на 2, нажмем Перейти и нажмем на кнопку Прочитать, то теперь страница видит другие значения, которые передавались в адресной строке. Вот сейчас во втором примере мы увидим как можно парсить адресную строку и получать get параметры. На строке 46 кнопка, которую мы создали использует в качестве обработчика на нажатие функцию print(). Эта функция выполняет очень простую операцию. Первое, 34 строчка, создается переменная с именем args и в эту переменную записывается возвращаемое значение функции getQuerryString(). Эту функцию мы сейчас разберем, это наша функция. Задача нашей функции создать пустой объект и заполнить этот объект свойствами, которые есть переменными в строке запроса. То есть если мы заходим на текущую страницу с вот таким вот набором get параметров, то это означает, что объект, который создается querryString должен в себе содержать два свойства: свойство login и свойство password. При этом в каждом свойстве будет находится значение, которое соответствует значению параметра. Если мы будем заходить на страницу используя например 4 get параметра, login, password, a, b, то в таком случае в объекте, который нам возвращает функция getQuerryString() будет находится 4 свойства. По свойству на каждый get параметр. Далее на 35 строке мы создаем параграф, новый параграф, который собираемся вывести в документ. 37 строчка – добавляем в innerHTML этого параграфа текст и значение свойства login. Почему мы добавили свойство login? Потому что так работает функция getQuerryString(). Функция назовет свойство в соответствии с именем параметра. И на строке 38 мы точно также считываем значение свойства password. А точнее считываем значение параметра считываемого в запросе. Когда мы настраиваем значение, вложенное в параграф, параграф мы добавляем как дочерний элемент в документ. Берем document.body и как последний элемент у нас параграф добавляется в body после элементы input. Давайте посмотрим что делает функция getQuerryString(), как она работает. Первое что мы делаем при запуске этой функции, создаем пустой объект. То есть в объекте нет никаких наших свойств, никаких наших методов. Теперь строка 12. Мы подготавливаем строку, которую будем парсить. Мы сейчас отдельно разберем все методы, которые есть в строковых переменных, а вот сейчас, то что мы видим на 12 строчке location. search.substring(1). Мы знаем сейчас, что в строке запроса у нас находится вот такой адрес. Вот с помощью substring и параметра 1 мы указываем, что начиная с первого символа и до последнего символа мы возвращаем строку, то есть вырезаем из search строку от первого до последнего. Получается, что после операции на 12 строчке у нас search превращается вот в такое значение, потому что изначально search начинается со знака вопроса. После выполнения substring знак вопроса исчезает. Далее строка 13. Мы строке querry, на этой полученной строке вызываем функцию split и передаем в качестве параметра амперсанд. Задача split – разбить строку на массив, и разбить ее по определенному разделителю. В нашем случае по разделителю амперсанд. После вызова функции split() у нас значение получается вот таким: отдельный элемент массива login=admin, второй элемент password=123. Вот эти элементы массива находятся в массиве pairs. Теперь наша задача каждый из этих элементов превратить в свойство пустого объекта args. Login мы должны использовать как имя свойства, а admin как значение свойства для этого объекта. На 15 строке запускается цикл, который переберет значения массива pairs. На каждой итерации на 17 строке вызывается метод indexOf(“=”). Получается мы получаем индекс вот этого вот знака из элемента массива. Если мы индекс находим, то в переменную pos записывается порядковый номер этого символа в строке. Если символ не существует в строке, то тогда возвращается значение -1, и вот если мы не нашли знак равно, если pos равен -1 мы вызываем continue для того, чтобы перейти к следующему параметру, который передается в адресной строке. Если же pos существует, если мы нашли знак равно, то строка 22 – мы создаем переменную argName. Эта переменная будет содержать то что находится до знака равно, а потом создаем переменную value, которая будет содержать в себе значение, которое находится после знака равно. Чтобы из строки вырезать вот эти значения мы полузуемся функцией substring(). В функцию substring передаем начальный индекс и индекс, на котором мы хотим произвести вырезку, до которого мы хотим произвести вырезку. То есть от нуля до позиции мы извлекаем данные и получаем вот это значение и записываем в argname. А потом на следующей строке мы вызываем substring() и указываем, что мы от позиции +1 хотим вырезать текст до конца строки. То есть позиция – это знак равно, +1 – это следующий символ. Вот от следующего символа и до конца строки вырезаем значение и помещаем его в переменную value. То есть после выполнения двух этих строчек у нас будет известно имя одного параметра, и значение этого параметра. Что нам остается сделать? Это вставить свойство в объект и это свойство инициализировать. Вот на 25 строчке мы обращаемся к пустому объекту args. Обращаемся по индексу с тем значением, которое находится в argname. Вот представьте, что мы делаем такое обращение. Args[“login”], то есть получается мы хотим в свойство login записать значение. Если свойства login у нас нету, оно добавится, если есть – мы его просто поменяем. В нашем случае у нас никакого свойства argname нету, поэтому на строке 25 то имя, которое находится в этой переменной используется для того, чтобы создать свойство, а значение, которое находится в переменной value используется как значение для свойства. И вот здесь мы добавляем одно свойство для объекта args. Переходим на следующую итерацию, берем следующий параметр, точно также его анализируем, берем его имя, берем его значение и добавляем в объект args новое свойство с новым значением. И по завершению этого цикла мы возвращаем объект args, который заполнен свойствами. Давайте еще раз проверим как это будет выглядеть, только попробуем это проверить с помощью отладчика. Откроем debugger, откроем ту строчку, где мы обращаемся к свойству password, поставим здесь breakpoint, немножко поменяем querry string, добавим еще один параметр, или два параметра а и b. Вот мы нажали на Enter для того, чтобы эти параметры загрузил браузер, прочитал их. Теперь если мы нажимаем на Read Querry Parameters… У нас слетел обработчик, еще раз обновляем, нажимаем… И вот мы видим, что обработчик, breakpoint остановил выполнение нашего кода. Мы видим, что сейчас в локальной области видимости доступно несколько переменных. Вот есть переменная args в которой находится объект. Этот объект как раз и заполнялся функцией getQuerryString(). Если мы посмотрим на содержимое этого объекта, то увидим, что в этом объекте есть четыре свойства: а, b, login, password. Свойства в соответствии с значениями параметров, которые попали на страницу. То есть мы вызываем querry string, а дальше нам остается работать с теми свойствами, которые нас интересуют, работать с темы get параметрами, которые попали в документ.

В третьем примере мы посмотрим как можно с помощью свойства locatin заставить браузер перейти по новому адресу. На 8 строчке, после загрузки документа, мы выполняем поиск элемента с id go и вешаем обработчик на событие click. В обработчике у нас будет находится простая функция, которая в document.location записываем адрес того документа, на который мы хотим перенаправить браузер и получается, что если мы запускаем страницу, то видим просто кнопку. Т.к. страница уде загружена, к этой кнопке привязан обработчик. Если мы сейчас кликаем по кнопке, выполняется строка 11, в location записывается новый адрес. Как только браузер видит, что location был изменен, браузер выполняет redirect и переходит по этому новому адресу. Кликнули, видите мы перешли на другую страницу.

Если мы хотим получить информацию о текущем браузере, который загрузил документ и начинает интерпретировать JavaScript код, мы можем воспользоваться свойством navigator. Это свойство называется navigator, потому что изначально создавалось для браузера Netskape Navigator. Но хоть этого браузера уже давно нет, свойство для получения информации о браузере все равно осталось с тем же именем. Для того, чтобы получить все сведения, которое дает это свойство на строке 15 мы запускаем цикл for-in. Мы хотим получить доступ ко всем свойствам, которые есть в объекте navigator. Вы помните, что запуская цикл for-in после ключевого слова in мы указываем объект, свойства которого хотим извлечь. Перед ключевым словом указываем имя, которое на каждой итерации будет содержать имя текущего свойства. На 16 строке мы внутри самого цикла будем инициализировать и конкатенировать в переменную browserInfo значение. Мы на каждой итерации будем брать имя свойства propname, а потом после двоеточия добавлять значения свойства propname. Получается, что свойство, имя свойства мы будем помещать в квадратные скобочки, то есть обращаться к индексу со строковым значением и объект navigator по этому строковому значению будет выдавать нам данные. Вот получается, что по завершению цикла for-in в переменной browserInfo будут находится все свойства и все ихние значения. Давайте посмотрим как это будет выглядеть. Вот у нас отобразился перечень все свойств объекта navigator, например appCodeName – кодовое имя приложения. Например, userAgent – строчка, которую браузер отправляет на сервер, для того, чтобы представится серверу кто он такой. Платформа, на которой выполняется данное приложение. Операционная система и разрядность процессора. Например ниже можно увидеть вот такое свойство как geolocation. C его помощью мы можем получить доступ к глобальному объекту, который выдает информацию о расположении пользователя: широту, долготу и прочие сведения. Вот navigator – это набор свойств и методов, которые позволяют нам из JavaScript кода взаимодействовать с браузером и брать информацию о текущем браузере и возможно как-то управлять поведением самого браузера.

Мы подошли к четвертой части урока, в которой рассмотрим как с помощью JavaScript кода можно создать новые окна и как получить сведения о текущем окне, в котором выполняется сценарий. В первом примере мы рассмотрим как получать информацию о данном окне. В документе на 36 строке в момент, когда документ грузится мы выполняем несколько операций и отображаем информацию о результатах в документ. Используем объект Geometry и вызываем на этом объекте метод getWindowX(), потом getWindowY(), далее getViewportHeight() и getWiewportWidth(). Выполняем вот такие 4 операции и показываем результат в документе. Ну вот посмотрите, что мы видим. Мы видим координату Х и У текущего окна, и видим высоту и ширину вот этой вот видимой области. Если мы сейчас уменьшим документ и обновим страницу, то здесь поменялись значения. Если мы передвинем окно опустим ближе к левому верхнему окну и обновим документ – у нас тоже поменяются координаты. Давайте посмотрим как в коде выглядит добавление сведений о текущем окне. Дело в том, что информация о расположении окна, о высоте и ширине области окна в различных браузерах получается различными способами. По этому, чтобы сделать код более кроссбраузерным мы пользуемся вот таким подходом. Мы создаем вначале пустой объект, а потом в этот объект будем записывать методы в соответствии с функциональностью, которую поддерживает браузер. Вот например на 16 строчке мы проверяем, если у объекта window есть свойство screenLeft, то тогда мы в объект window добавляем getWindowX() и getWindowY() методы. Эти методы будут обращаться к window.screenLeft и window.screenTop. То есть это и есть те свойства, которые дают нам информацию о координате левого верхнего угла окна. Но если screenLeft не существует в объекте window, если браузер не поддерживает такое свойство, то тогда мы проверяем наличие свойства screenX. Если это свойство есть, то тогда 21, 22 строчка в те же самые методы getWindowX() и getWindowY() мы добавляем в объект Geometry, но у них уже по другому реализовано получение координат. Мы берем свойства screenX и screenY. В итоге, после выполнения этих условий у нас в объекте будет метод getWindowX() и getWindowY(), но при этом методы будут по разному работать в соответствии с возможностями текущего браузера. То же самое мы делаем на 25 строчке для свойства innerWidth. C помощью этого свойства мы можем узнать ширину, а с помощью метода innerHeight можем узнать высоту той видимой области, которая сейчас отображается пользователю. Вот если эти свойства есть, то мы используем эти свойства для того, чтобы реализовать функцию помещенную в свойство getViewportWidth(). И в метод getViewportHeight() мы записываем вот такую операцию. Но если innerWidth не поддерживается браузером, то в таком случае мы берем другой подод. Мы обращаемся к документу, documentElement, если это свойство есть, то тогда мы проверяем clientWidth и используем эти операции для того, чтобы реализовать методы getViewportWidth() и getWiewportHeight(). На самом деле здесь не до конца дописанный пример, потому что браузеров намного больше, различных свойств мы тоже можем найти различные вариации для разных браузеров. Получается, что здесь мы должны понять сам подход, что если мы хотим сделать кроссбраузерное приложение, мы можем создать объект и в этот объект добавлять одноименные методы и свойства, но при этом делать так, чтобы те методы работали в соответствии с возможностями текущего браузера. Вот как здесь на строке 17 getWindowWidth() который пользуется screenLeft, а на строке 21 он пользуется свойством screenX. Получается, что здесь у нас код сложный, неудобный, но в итоге там, где мы начнем использовать этот код, код будет достаточно простым и понятным. Мы вызываем один единственный метод, но он срабатывает так, как этого требует текущий браузер, выполняющий этот код.

Во втором примере мы посмотрим как можно получить информацию о разрешении экрана пользователя. Для этих задач в JavaScript есть объект screen. И у этого объекта есть свойства width и height. Сейчас эти свойства мы используем, чтобы сформировать строку, выводящуюся через alert. Посмотрите, как эти свойства срабатывают. Они показывают высоту и ширину текущего экрана.

В третьем примере мы рассмотрим как можно создавать диалоговые окна и как можно манипулировать этими окнами. Если мы запустим третий пример, то увидим, что на странице отображены кнопки Открыть и Закрыть. Нажав на кнопку Открыть у нас появляется новое окошко. Обратите внимание, что скорее всего в ваших браузерах появится специальное окно, в котором браузер спросит, хотите ли вы разрешить вплывающие окна на текущем сайте. Разрешите всплывающие окна, иначе этот документ у вас отдельно не отобразится. Ну и кроме того, что мы можем открыть этот документ, можем и манипулировать, менять его размеры, ширину, высоту, но в нашем примере просто добавляем функцию закрытия нашего документа. Основная страница может как открывать окна, так и закрывать их. Нажмем по второй кнопке. Видите? Документ у нас исчезает. Давайте посмотрим как это реализовано. В теле страницы находится две кнопки Открыть и Закрыть. У кнопок уникальные идентификаторы, к которым будет привязываться JavaScript код. После загрузки документа, мы находим первую кнопку openButton и при нажатии по кнопке запускаем openButtonHandler. А для кнопки closeButton устанавливаем обработчик closeButtonHandler. Функции у нас находятся ниже. Функция openButtonHandler на строке 18 в переменную w, вот в эту переменную записывает то, что вернет метод open(). На объекте window мы вызываем метод open() для того, чтобы создать новое окно и в это новое окно передаем следующие параметры. Первым аргументом мы указываем ту разметку, которая должна будет загрузится в то окно. Window.html – это HTML страничка, находящаяся в нашем проекте. Второй параметр – это имя окна, которое мы создаем, а третий параметр – это набор значений, которыми мы конфигурируем создаваемое окно. Мы можем отображать ширину, высоту, необходимо ли нам отображать статус внизу окна и можем ли мы окно ресайзить, можем ли мы увеличивать или уменьшать размеры окна. Если мы запустим сейчас приложение и откроем новое окно, то увидим, что status bar у нас нету, то есть не отображается он, хотя мы хотели, чтобы отображался он, потому что status мы установили yes. И resizable=no тоже у нас не срабатывает. Окно может двигаться. Эти параметры resizable и status будут работать в том случае, если мы откроем приложение в Internet Explorer. Вот мы открываем новое окно и в этом окне отображается status bar и при этом resize окна не работает. Мы не можем увеличить и уменьшить размеры окна. Для того чтобы закрыть окно, которое ранее было открыто на 22 строке мы пользуемся уже заполненной переменной w проинициализированной. Но вызываем на этой переменной close(). Это приведет к тому, что отдельное окно закрывается при нажатии по кнопке закрыть. Первые примеры этого урока были посвящены работе с окнами и некоторыми свойствами, которые доступны на объекте окон. Мы увидели как работать с таймерами, как работать с навигатором, свойством location, которое указывает где мы сейчас находимся. Теперь мы подходим к примерам, которые связаны с строковыми значениями. Мы сейчас разберем как можно манипулировать строковыми данными. Как из строки вырезать подстроки, как менять значения строковых переменных. А далее рассмотрим что такое регулярные выражения. Пока сконцентрируем внимания на методах, которые есть у строковых объектов.

Первое – посмотрим как можно создавать строки. Ранее мы смотрели в чем разница в различных способах создания строковых значений. На строке 8 и 9 создаются две переменные а и b. Эти переменные инициализируются с помощью строковых литералов. Первый вариант – мы можем использовать литерал взяв его в одинарные кавычки, второй вариант – в двойные кавычки. При этом нет никакой разницы. Оба способа создания строковой переменной будут работать одинаково. В других языках программирования вы знаете, что одинарная кавычка будет использоваться для того, чтобы создать переменную, в которой находится только один символ. В языке JavaScript нет разницы какие кавычки вы будете применять. Но сейчас переменные а и b хранят в себе просто строки. Не объекты а строковые значения. Если мы хотим сделать так, чтобы в переменной хранился объект, в котором хранится текст и какие-то специальные методы, то мы можем использовать конструктор для строковых типов. На 10 строке мы используем new String() с одним параметром и просто String на строчке 11. Оба варианта срабатывают одинаково и на выходе мы получаем объекты, в которых находятся строковые значения. Также, когда мы создаем строковые переменные мы можем использовать Юникод-символы. Для этого нам нужно использовать вот такой синтаксис /u и далее код символа, который нас интересует. Переменная str, которую мы видим на строке будет содержать в себе какой-то необычный символ, отображаемый пользователю. Когда мы создаем строковые переменные, то обычно мы пользуемся подходом, показанным на первой строке, когда мы используем просто литералы. Этот вариант он наиболее удобный. Во-первых нам необходимо написать меньше кода, чтобы создать строковую переменную, а во вторых нам будет проще использовать вместе с этой переменной ключевое слово typeof. Потому что typeof для переменной a будет указывать, что переменная а – это string. А вот typeof для переменной с, которая была создана на 10 строке, будет указывать, что переменная с – это объект. Давайте запустим и проверим. Действительно переменная а у нас типа string, а переменная с типа object. И обратите внимание на первых символ, который отобразился – это и есть символ /u1234. Вот такой символ вывелся. Старайтесь использовать вот такой синтаксис при создании строковых переменных, потому что это дает ряд преимуществ. Но то что будет невозможно сделать при создании переменной через использование литерала – это добавить в эту переменную какое-либо свойство. Если вы попытаетесь написать а.test = 123, то свойство вы добавите. Но на следующей строчке, когда у переменной а вы попытаетесь прочитать свойство test – его там не будет. Поэтому когда мы создаем переменные не как объекты а как значения, то добавлять в них свойства и методы мы не можем. Но в принципе это и хорошо, потому что считается дурным тоном добавлять в стандартные системные типы свои собственные методы и свойства. Но и теперь мы можем подойти к примерам, в которых показано, как можно работать со строковыми значениями, какие есть дополнительные методы упрощающие написание сложных алгоритмов.

На строке 7 создается переменная str. Эта переменная будет просто сроковым значением. В этой переменной находится строка с несколькими словами. На строке 8 мы на переменной str вызываем метод split. Вот обратите внимание, что сама по себе переменная str не является объектом. Это строковое значение. Мы ведь не вызывали ключевое слово new, мы не создавали объект. Мы создали значение. Но интерпретатор, каждый раз, когда мы работаем с простым строковым значением, это простое строковое значение преобразовывается в объект именно на момент вызова этой операции. То есть временно переменная str превращается в объект строкового типа. Далее на этом объекте вызывается метод split. Этот оператор выполняет операции над значениями находящимися в переменной и мы получаем результат. После этого переменная str тот объект, который был временно создан исчезает и мы остаемся обратно со строковым значением. Значит задача метода split() разбить строку на массив по указанному символу. Мы хотим сейчас разбить эту строку на массив по пробелам и в массиве у нас в итоге окажется один, два, три, четыре. Четыре элемента будет находится в массиве substrs. Этот массив мы отобразим на 9 строке и увидим, что все элементы выведутся через перенос на новую строку. Вот строка для тестирования примера. Давайте теперь посмотрим, что происходит дальше. Следующий метод, который мы используем charAt(). C его помощью мы можем получить информацию о символе, который находится в указанном индексе. По индексу 0 в переменной str находится символ “C”. Вот его мы и выводим. Видите? Отображается символ С. charAt(str.length-1) – это символ А. Потому что последний символ в строке – это действительно символ А. Вы также видите, что у строковых переменных есть свойство length, в котором лежит общее количество символов. По сути строка – это массив символов. У каждого символа есть свой порядковый номер начиная с 0. Мы хотим получить доступ к последнему символу. Последний символ будет это размерность массива -1. По этому на 13 строке мы обращаемся к свойству length и отнимаем единицу. Ну а далее выводим результаты вот на экран с помощью document.write(). Следующий метод, который часто мы будем использовать – это метод indexOf(). C его помощью мы можем найти индекс указанного символа. Вызывая indexOf(‘-‘) мы получаем индекс первого дефиса, который есть в переменной str. И индекс первого дефиса равен 2. Если мы используем метод lastIndexOf() – это означает что мы находим последний индекс указанного символа. То есть вот находим этот дефис. И получается индекс этого дефиса – 11. Также в JavaScript у строковых объектов есть такие методы как toLowerCase() и toUpperCase(). C их помощью мы можем превратить значение строки в верхний регистр или в нижний регистр. Перевести все символы. Давайте посмотрим какой эффект получился после вызова этих методов. При вызове toLowerCase() все символы стали в нижний регистр, при вызове toUpperCase() все символы стали в верхний регистр. Также обратите внимание, что любые методы, которые мы используем при работе со строками не меняют саму строку. Все методы возвращают новую строку, которая была изменена. По этому если мы на 31 строке выполним вот такую операцию str.toUpperCase(), то на самом деле мы не поменяем переменную str. Мы создадим новое значение. В это значение запишется значение с переменной str переведенной в верхний регистр. И это новое значение будет возвращено методом toUpperCase(). По этому учитывайте это. Если вы хотите произвести изменений в переменной str, то вам нужно вызвать метод, а результат записать либо в другую, либо в ту же переменную, тогда вы получите какой-то эффект. Последние два метода, которые рассматриваются в этом примере очень важные. Мы будем часто их использовать. Это методы subString() и subStr(). C помощью метода subString() мы можем извлечь значение строки по индексам. То есть с большой строки вырезать значение начиная с какого-то индекса и заканчивая каким-то индексом. Вызывая subString() сейчас мы передаем два значения 6, 12. Это означает, что между 6 и 12 символом те символы, которые будут находится они будут вырезаны и записаны в переменную str. Давайте посчитаем где у нас 6 символ. Hello – это 1, 2, 3, 4, 5, 6. Вот пробел перед словом world это 6 символ. Вот после 6 символа мы начинаем вырезать тест из строки str. И вырезать мы его будем до 12 символа. Давайте посчитаем где 12 символ. Если это 6, 7, 8, 9, 10, 11 ,12. То есть знак восклицания – это 12 символ. Пробел – это 6 символ. Вот все, что находится между этими символами мы вырезаем, и получается, что в переменную substr записывается значение world. Другой способ работать со строковыми значениями – это использовать subStr. Суть этого метода, что мы указываем символ с которого мы хотим начать вырезать значения, и указываем длину, сколько именно значений мы хотим вырезать. Мы хотим с седьмого символа вырезать 5 символов. Седьмой символ – это w. 5 символов – это слово world. Поэтому вот этим методом мы вырежем слово world из строчки str, но вырежем немножко другим способом. Если мы посмотрим в браузер, то увидим, что две последних операции мы вырезали слова world из более большой строки. Обязательно запомните эти методы. Потренируйтесь использовать эти методы. Потому что они пригодятся при решении задач связанных со строками. На этом мы заканчиваем примеры использования строковых методов. Сейчас мы перейдем к примерам, в которых разберем, что такое регулярные выражения. Вы увидите, что с помощью регулярных выражений можно решать очень сложные задачи связанные с очень сложной валидацией, с поиском текста и другими операциями, которые связанные с текстом.

Регулярные выражения – это формально язык поиска в тексте. С помощью регулярных выражений мы можем проверять правильность ввода текста, информации по шаблону или производить поиск подстрок в больших строковых значениях. Регулярные выражения основаны на метасимволах. Метасимволы – это специальные ключевые слова, которые используются для поиска определенной категории символов. Мы сейчас с вами разберем какие есть метасимволы и как они используются. Для того, чтобы создать регулярное выражение в JavaScript коде мы можем использовать два подхода. Первых подход – это использование литерала. Второй подход – это функция конструктор. Если мы используем литерал – это означает, что мы в коде пишем два //, между ними указываем текст, который и будет являться регулярным выражением. Вот как в первом варианте. /\d\d\d/. \d – это символ, который заменяется на любую цифру. То есть мы хотим найти в коде три подряд идущие цифры. Вот первый способ, как можно создать регулярное выражение. Вот pattern1 – это регулярное выражение. Регулярное выражение можно создать с помощью конструктора. Пишем new RegExp() и в параметрах передаем строку, которая определяет регулярное выражение. Давайте теперь посмотрим. Мы знаем как создавать регулярные выражения, теперь давайте посмотрим как можно запустить в действие регулярное выражение. В JavaScript есть несколько методов, которые в качестве параметров могут принимать регулярные выражения, и большая часть этих методов была рассмотрена в предыдущем примере связанным со строками. Первый метод, который умеет работать с регулярными выражениями – это метод search(). Его задача искать в тексте индекс указанной подстроки. Вот на строке 9 мы сейчас создаем шаблон, который ищет три цифры. На строке 10 мы на переменной text, которая была выше создана и ей было присвоено значение вызываем метод search() и указываем, что хотим искать в тексте вот этот шаблон, хотим найти три цифры и в переменную firstIndex() получить индекс первой цифры, которую мы найдем. То есть по сути firstIndex() это будет порядковых номер этого первого символа, который был найден по шаблону. Запускаем пример и видим, что 123 начинается по 7 индексу. Значит первый метод, который умеет работать с регулярными выражениями – это метод search(). Он изначально может принимать просто текст. То есть мы можем найти фразу «для». Вот начинается фраза по 11 индексу. Если мы не знаем конкретно что мы ищем. Ищем pattern. Просто ищем три цифры. Находим три цифры – получаем индекс. Следующий метод, который понимает регулярные выражения – это метод replace(). Его задача найти определенную строку и заменить эту строку на другую строку. Представьте, что наша задача – найти в тексте подряд три идущие цифры и удалить их. На строке 10 создается регулярное выражение, которое ищет три цифры. Что означает буква g мы сейчас разберем. Далее на 10 строке мы для переменной text вызываем метод replace(), первым параметром бросаем шаблон, а вторым тот текст, которым нужно его заменить. Нашли три цифры, заменили на ничего. Получается, все цифры будут удалены из текста. Далее метод replace(), когда он произведет изменение значение в этой строковой переменной, он вернет новую измененную переменную. Это значение мы запишем в переменную и выведем на 12 строке. В исходной строке, вы видите, встречаются цифры три раза. Запускаем пример. Видим, что цифр нету. Они были удалены. Если мы возьмём и уберем букву g на строке 10, то в таком случае будет удалена только первая группа цифр 123. Символ g – это дополнительный флаг, который используется для настройки регулярного выражения и он означает, что мы производим глобальный поиск. Это означает, что если мы нашли первое совпадение с регулярным выражением, мы на этом не останавливаемся, мы переходим дальше по тексту и ищем следующее совпадение. То есть буквы g нету – идем до первого совпадения. Если буква g есть – перебираем все значения, пока не закончим анализ всей строки. Также мы можем использовать метод replace() без регулярных выражений. Например если мы хотим заменить все пробелы на нижнее подчеркивание. Вот если вызвать таким способом метод replace() вот что мы получим. Пробелы исчезли, вместо них нижние подчеркивания.

Следующий пример используется для того, чтобы найти совпадения на тот текст, который совпал по регулярному выражению. На строке 8 создается переменная text и в эту переменную записывается значение 1+2=3. На строке 9 мы хотим получить из строки все цифры. Найти все цифры, какими бы они ни были, и записать их в переменную. Для этих целей мы используем метод match(), который вызывается на строковой переменной. И в этот match() мы записываем регулярное выражение. Поиск одного символа цифры. И поиск глобальный. Ищем от начала и до конца всего текста. Задача метода match() произвести поиск и вернуть нам массив. Каждый элемент массива будет совпадать с найденной подстрокой в строке. В случае с переменной text, у нас в переменной три символа, поэтому в итоге мы получим массив на три элемента. И этот элемент будет отдельным символом. Этот элемент мы получили и на 10 строке отобразили. Чтобы убедится в том, что мы действительно получаем массив у нас есть еще второй вариант на 12 строке задается переменная text2, ей присваивается текст, потом мы регулярным выражением указываем, что ищем три подряд идущие цифры, получаем результат в переменную res2 и на 15 строке обращаемся в res2 по нулевому индексу. Других индексов у нас не существует, так как у нас есть одно совпадение и поиск не глобальный. Давайте проверим. Первый раз вывелись все цифры. Второй раз мы получили доступ только к первому совпадению, к первой подстроке.

В пятом примере показан метод split() с помощью которого мы можем разбить строку на подстроки, используя регулярные выражения. До этого метод split() мы использовали передавая в него какое-то конкретное значение, по которому мы собирались производить разбивку. В этом примере мы создаем переменную text, в котором находится много текста, и по сути разделителем в тексте является три цифры. 123, еще раз 123, другие какие-то цифры. То есть получается мы не можем сейчас сделать так, чтобы в метод split() мы передали какое-то конкретное значение, например текст 123, и получили разбиение этой строки на массив, потому что цифры у нас постоянно меняются. Но с помощью регулярного выражения мы можем запустить метод split(), передать в него это регулярное выражение, это сделает так, чтобы этот split() разбил у нас строку на массив по трем подряд идущим цифрам. Не важно какие цифры у нас будут находится в строке изначально. Вы увидите, что изначально был такой вот текст, а на выходе получится такой массив. Все цифры будут удалены. Давайте проверим. Действительно получился массив. Значит, когда мы работаем с регулярными выражениями у нас есть возможность регулярные выражения применить в работе со строками. У строк есть четыре метода, которые принимают регулярные выражения. Это search(), replace(), match() и split(). Также работая с регулярными выражениями мы можем применить методы, которые есть непосредственно в объекте регулярного выражения. Давайте теперь посмотрим следующие примеры, которые покажут, как этими методами можно пользоваться.

Первый метод – это методы exec(). Его работа чем-то напоминает работу метода match(), но если match() возвращает массив, то exec() возвращает одно значение, один объект. Для тестирования этого примера создается переменная test, в которую записывается текст с несколькими цифрами. У нас есть цифра 2 и цифра 6. Мы сейчас хотим запустить регулярное выражение, которое найдет каждую цифру. Регулярные выражения создаются на 11 строке – это глобальное выражение, которое будет искать один символ цифры. На строке 13 создается переменная res, куда будет записываться результат работы метода. И на 14 строчке мы запускаем цикл while, который будет работать до тех пор, пока данное выражение не будет null. Пока значение выражение не null мы выполняем операции и выводим alert() сообщения на экран. Что из себя представляет это выражение. В переменную res мы записываем pattern.exec(). Если в предыдущих примерах мы вызывали методы и передавали в них регулярные выражения, то сейчас мы делаем наоборот. Мы на регулярном выражении вызываем метод и в качестве параметра вызываем текст. Сейчас регулярное выражение будет искать одну цифру. И первая цифра, которая будет найдена, первое совпадение будет записано в переменную res. То есть пока метод exec() может находить подстроки – он возвращает объекты. Как только подстроку не удалось найти – метод exec() возвращает null. Вот если метод exec() вернул нам не null, то мы попадаем в цикл, выводим результат, который мы нашли. В res будет находится первый символ, двойка в начале, а потом мы выведем индекс, по которому эта двойка была найдена и индекс, с которого будет производится поиск следующий. Так как двойка занимает один символ, то следующий поиск будет начинаться по этому символу сразу идущему после двойки. Index – это там, где мы нашли цифру, а lastindex – это где она заканчивается. И как только мы выведем один раз alert() сообщение, мы перейдем на следующую итерацию цикла и вызовем exec() еще раз, но при этом поиск будет производится не после начала строки, а вот с lastindex мы будем искать цифру в этой строчке. Давайте попробуем запустить примеры и посмотреть как это все делается. Первый раз мы нашли двойку по индексу 8, а продолжим поиск по индексу 9. Далее мы нашли 6 по индексу 69, продолжим поиск по 70 индексу. Вот с помощью метода exec() мы можем поэтапно брать подстроки из строки через регулярные выражение и их анализировать. Если мы работали с методом match(), то он сразу вернет массив. Мы не поэтапно будем брать данные из строки, а сразу получим все. Второй метод, который есть у регулярного выражения – это метод test(). Его задача – проверить есть ли строка с регулярным выражением. Если есть – вернуть true, если не совпадает – вернуть false. Эти методы удобно использовать для валидации пользовательского ввода. Например, мы создаем регулярное выражение, которое ищет e-mail адрес мы берем от пользователя текст и проверяем, совпадает и регулярное выражение поиска e-mail адреса с текстом, который ввел пользователь. Если совпадает, то пользователь ввел правильный формат e-mail. Не совпадает – значит пользователь допустил ошибку. И вот как пользоваться этим методом test(). На строке 8 мы задаем шаблон, который ищет три цифры. Дальше создаем переменную, куда записываем Hello World!!! И на 11 строке ставим условие: если проходит тест регулярного выражения и строки, то пишем, что она соответствует, иначе строка не соответствует. Шаблон сейчас ищет три цифры. Input в себе содержит Hello World. Шаблон и переменная input не совпадают, поэтому у нас условие не выполняется и выполняется блок else. Dj втором случае на 18 строке мы в переменную input записываем значение 123, и теперь шаблон совпадает со строковым значением. И соответственно теперь этот тест возвращает нам результат true. Мы попадаем в условие и выводим, что шаблон соответствует. Первый раз Hello world не соответствует шаблону, строка 123 – соответствует шаблону. Во всех примерах, которые мы сейчас посмотрели использовалось очень простое регулярное выражение, которое ищет три цифры. Мы по сути сейчас с вами знаем всего лишь один метасимвол /d. Сейчас мы рассмотрим перечень тех метасимволов, которые мы можем использовать при построении регулярных выражений, а далее рассмотрим несколько заготовок регулярных выражений, которые помогут вам найти e-mail, дату, номер мобильного телефона и многое чего другое. Регулярные выражения мы будем использовать и в других уроках, когда дойдем до темы Валидация пользовательского ввода. Когда мы будем проверять правильность данных введенных в форму. Мы будем с вами иcпользовать regEx.

В восьмом примере мы разберем перечень тех метасимволов, которые могут помочь в написании регулярных выражений. Значит сначала мы рассмотрим метасимволы, которые используются для того, чтобы определить категорию символа, которую мы ищем в тексте. Если вы напишете метасимвол \w – это означает, что вы ищете любой алфавитно-цифровой символ. То есть \w это буквы латинского и русского алфавита плюс нижнее подчеркивание и цифры от 0 до 9. Например, если мы напишем шаблон \w\w\w – это будет означать, что это выражение будет подходить например к qwe или q_1. То есть три подряд символа, которые мы можем набрать с клавиатуры, они будут походить под шаблон \w. То есть \w имеет среду word. А если мы напишем \W и W будет с большой буквы, это будет означать, что этот символ не будет являться символом алфавита, нижним подчёркиванием или цифрой. То есть это противоположно \w в нижнем регистре. Если мы используем символ \s в нижнем регистре – это означает, что мы хотим найти любой пробельный символ. То есть табуляцию, пробел, перенос на новую строку, табуляцию вертикальную, все что не является печатным, но находится в тексте, чтобы указать редактору как форматировать текст. Если мы напишем \S в верхнем регистре – это означает, что мы будем искать любой не пробельный символ. То есть это будет любой видимый символ. Точки, запятые, восклицательные символы, буквы, цифры, нижние подчеркивания и т.д. Все что видимое пользователю \S найдет. Если мы используем \d – это любая цифра от 0 до 9. Если мы используем \D – это означает, что мы ищем все, что не является цифрой – буквы, нижние подчеркивания и символы. Если мы используем вот такие метасимволы \v – это вертикальная табуляция. \t – горизонтальная табуляция. \r – перевод каретки. \n перенос строки. \f – перевод страницы. Все эти символы можно заменить использованием метасимвола \s – это любой из перечисленных. Также когда мы создаем регулярные выражения очень часто мы пользуемся наборами символов. Наборы символов – это символы, которые взяты в квадратные скобочки и по сути набор символов определяет из каких символов может состоять фраза. Например если создать такой набор [RrGgBb] – это означает, что мы хотим чтобы у этой позиции находился один из перечисленных в квадратных скобочках символов. То есть регулярка будет совпадать с текстом только в том случае, если мы найдем один из перечисленных здесь символов. в начале, то это будет означать что мы ищем символы но только не r g b в верхнем и нижнем регистре. Вот если мы создадим такой RegEx [abc]+ — это будет означать, что мы ищем текст, который может состоять из любого количества символов a b и с в любой последовательности. Вот что такое +. Давайте перейдем к следующей части метасимволов. Есть такое понятие как квантор, или квантификатор. С помощью кванторов мы можем указывать сколько раз метасимвол может встречаться в искомом нами тексте. Если мы используем + — это означает одно и более вхождений. Например если мы напишем \d+ — это будет означать, что это регулярное выражение подходит под вот такую строчку, под строчку, в которой есть несколько цифр, под строчку, где есть большее количество цифр. То есть не важно сколько есть цифр, но если цифра одна и более – это означает, что регулярное выражение подходит. Если мы используем вместо + * — это означает 0 и более символов. Например [abc]\d*. Такое регулярное выражение подойдет под фразу a1, b1111, с без цифры. То есть главное, что бы у нас шел один из символов в наборе, а потом 0 или более цифр. Вот если условия эти выполняются, что условие подходит под текст. Все вот эти слова, которые здесь определены, они подходят по данное регулярное выражение. Если мы используем квантификатор ? – это означает 0 или 1 вхождение. Например, если мы сделаем вот такую вот регулярку http[s]? – вот это регулярное выражение у нас подходит как http, так и подходит https. То есть обе фразы будут подходить под регулярное выражение.

Кроме кванторов нам необходимо еще знать что такое интервалы. Интервалы позволяют нам указать сколько точно символов должно находится в строке. Например, если мы напишем \d{3} – это будет означать, что мы ищем ровно три цифры идущие подряд. Если мы на пишем \d{10,20} – это означает, что мы ищем строку в которой находится от 10 до 20 цифр. Вот в таком диапазоне. Если мы пишем \d{10,} – это означает, что мы ищем строку от 10 символов, не меньше. Если мы пишем \d{,10} – это означает, что мы ищем до 10 цифр в тексте. \d{3}$ и строчка заканчивается. То есть с помощью вот таких якорных символов мы указываем, что вся строка должна состоять из трех символов. Если это не так, то у нас регулярное выражение не срабатывает. Вот такие якорные символы – начало, конец строки и граница слова. И также при создании регулярных выражений мы можем использовать флаги. Мы уже с вами видели использования флага g – глобальный поиск. Когда мы создаем регулярное выражение, флаг у нас по сути устанавливается по завершению этого регулярного выражения. Если мы здесь пишем /\d/gmi – это означает, что мы все доступные используем флаги языка JavaScript. g – это глобальный поиск, m – это многострочный поиск, i – указание того, что у нас поиск не чувствителен к регистру. То есть и в верхнем и в нижнем регистре буквы для нас будут считаться одинаковыми.

Теперь когда мы с вами знаем основные метасимволы давайте посмотрим несколько примеров с шаблонами для проверки распространенных форматов данных. Первый шаблон позволяет проверять, что данные, которые ввел нам пользователь, или которые мы получили, другим каким-то способом, они у нас соответствую формату data. На 8 строке мы создаем регулярное выражение, которое ищет одну или две цифры, помните интервал. Далее, после двух цифр к нас идет символ дефис. Так как у нас это не метасимвол у нас нет в начале слеша, это означает, что это регулярное выражение будет искать именно дефис. Этот символ ни на что не будет заменяться. Потом мы опять ищем один или два символа цифры, потом опять дефис и четыре символа цифры. И вот такой например текст 21-12-1999 – этот текст подходит под регулярное выражение. Мы сейчас делаем проверку. Берем pattern, вызываем на нем метод test() и бросаем текст, который собираемся проверить. Если текст совпадает с pattern, то получаем значение true. Запускаем и проверяем. Первый раз действительно присвоилось значение true. Если мы уберем по цифре 1-1-1999, сохраним и обновим страницу, то мы увидим, что все равно у нас совпадает значение. Но если мы сюда введем символ а и обновим, то мы видим, что теперь регулярное выражение выдало false, потому что не подходит текст по регулярное выражение. Следующее регулярное выражение используется для того, чтобы проверить вот такой формат номера телефона. Так как мы собираемся искать первый символ как символ +, то в регулярном выражении нам приходится этот символ экранировать. Когда мы перед метасимволом ставим backslash – это означает, что мы хотим найти именно + символ, потому что если мы уберем слеш, то это будет означать, что мы пытаемся найти одно или более вхождений предыдущего метасимвола. Соответственно это у нас будет не правильно. То есть мы ищем в начале +, потом ищем 38, потом мы ищем круглую скобочку и закрывающую скобочку. Почему круглые скобочки у нас тоже экранированы? Потому что круглая скобка – это группа, которая находится внутри регулярного выражения. Если вы детальнее будете изучать регулярные выражения, то вы узнаете, что в регулярных выражениях можно создавать что-то похожее на переменные, вот круглые скобки – это можно сказать определение переменной в регулярном выражении. И далее эта переменная будет использоваться. Но мы в этих примерах не разбираем использование групп в шаблонах. По просто запомните, если нам нужно найти открывающую или закрывающую круглые скобки и нужно экранировать. Внутри эти скобок нам нужно найти три цифры. \d{3}. Вот как раз эти три цифры. Далее у нас идет пробел, три цифры, черточка, две цифры, черточка, и две цифры. В соответствии уже с номером абонента. Если взять вот этот текст мы получим в результате true. Действительно у нас текст совпадает с шаблоном. Следующее регулярное выражение вы будете использовать, потому что оно будет принимать любой текст, не обязательно имя, фамилию и отчество. Представьте, что нам нужно проверит имя, фамилию и отчество и проверить обязательно на русском языке. Мы используем вот такие наборы от а до я в нижнем регистре. От А до Я в верхнем регистре и любое количество символов. Это у нас будет допустим фамилия, потом пробел. Такой же набор символов для имени и такой же набор символов для отчества. Иванов Иван Иванович – эта фраза будет подходить по регулярное выражение. Вот она подошла. Следующее регулярное выражение будет использоваться для того, чтобы проверить правильность e-mail адреса. Вот например такого текста в таком формате. В начале мы указываем, что у нас идет граница слова, только сам e-mail адрес должен находится у нас в тексте. Других символов мы не хотим видеть. Далее мы указываем, что у нас не чувствительный к регистру поиск используя флаг i. И само регулярное выражение. Вот набор символов, которые идут до символа @. Имя ящика, вот то что находится до символа @ от a до z, от 0 до 9, точка и нижнее подчеркивание. Вот из этих символов может состоять фраза, которая идет до собачки. После собачки идет фраза от a до z, от 0 до 9, точка и черточка – это уже имя самого доменного имени. Потом у нас идет точка, и обратите внимание, что точку мы экранируем. Пишем \. Потому что если мы напишем просто точка – это означает абсолютно любой символ. Печатный, непечатный, все что угодно. Точка – это любой символ, который может быть в тексте. Если мы ставим \. – это означает, что мы ищем именно точку, потому что после имени, после имени домена у нас должна идти зона. Вот если мы ставим com – то у нас от а до z 3 или 4 раза. То есть ru, com, ua, info – 4 символа. Вот эта часть регулярного выражения отвечает за то что идет после точки, после доменного имени. Ну и вот мы сейчас возьмём проверим. Есть текст e-mail адреса. Этот текст правильный. Но если мы например уберем собачку, тут у нас уже e-mail адрес введен некорректно. Следующее регулярное выражение проверяет чтобы текст был именем файла с расширением html. На 28 строке мы ищем \w+ — любое количество букв, цифр и нижних подчеркиваний, потом указываем, что ищем точку и фразу html. Вот например hello.html – этот текст подходит под регулярное выражение. Мы видим результат, что все хорошо. И последний блок кода показывает, как можно создать регулярное выражение, которое в тексте будет искать адреса сайтов. Вот у нас на 33 строке создается регулярка, которая ищет http и символ s либо есть, либо нету. Нам как бы не обязательно. У нас далее идет двоеточие, два forward slesh, а потом набор символов, из которого будет строится непосредственно адрес. Адрес у нас может состоять из букв, цифр, двоеточий, точек, знаков вопросов, амперсандов и все то, что может находится у нас в адресной строке. Этих символов у нас может быть несколько. И поиск мы будем производить глобальный, потому что мы подразумеваем, что в тексте у нас находиться несколько адресов. Вот наш текст, вот первый адрес в тексте, вот второй адрес в тексте, еще дальше третий адрес с указанием порта – 80. Вот мы сейчас хотим найти все эти адреса и отобразить их в документе. Мы создаем переменную res. Мы запускаем цикл while, который будет работать до тех пор, пока метод exec() не вернет нам значение null. И на каждой итерации мы будет отображать найденный адрес и индекс, на котором этот адрес нашли. Запускаем пример и видим, что наш первый, второй, третий адрес и индексы, по которым адреса расположены в тексте.

На этом мы заканчиваем примеры с регулярными выражениями. На следующих уроках мы еще столкнемся с ними, когда будем изучать валидацию форм. RegEx в web приложениях используются для проверки данных, которые вводит пользователь. Например создавая страницу регистрации вы можете на этой странице с помощью RegEx быстро проверить корректность введенного e-mail адреса, номера телефона, почтового индекса и т.д. Но если вы будете работать с приложениями, которые связаны с обработкой текста, создавать например текстовые редакторы, то регулярные выражения вы будете использовать на порядок больше. Регулярные выражения, которые изучались в JavaScript будут точно так же работать и в других языках программирования. Метасимволы, которые мы рассмотрели на этом уроке пригодятся вам для создания регулярных выражений и в языке C#, в языке Java, Python, Ruby, в любом языке программирования. Конечно в других языках есть свои тонкости, есть свои особенности, но их будет уже на порядок меньше. Сам синтаксис языка везде одинаковый. Например если сравнить регулярные выражения с C# в JavaScript, то в JavaScript у нас есть глобальный поиск с помощью символа g. В языке C# мы глобальный поиск таким способом запустить не сможем. Глобальный поиск там настраивается совсем другими параметрами. На этом мы заканчиваем урок. В этом уроке мы рассмотрели по сути две такие глобальные темы. Мы рассмотрели свойства глобального объекта window? Мы увидели как настраивать таймеры, что такое location, navigator. Непосредственно научились манипулировать окнами, а вторая часть урока была посвящена строкам. Мы узнали некоторые методы, которые доступны на строковых переменных и увидели что такое регулярные выражения. С этими примерами мы еще столкнемся на следующих уроках. Не забывайте делать домашнее задание в описание к этому уроку. На этом у нас сегодня все. Спасибо за внимание. До новых встреч.

Регулярные выражения для новичков

Что такое регулярные выражения?

Если вам когда-нибудь приходилось работать с командной строкой, вы, вероятно, использовали маски имён файлов. Например, чтобы удалить все файлы в текущей директории, которые начинаются с буквы «d», можно написать rm d*.

Регулярные выражения представляют собой похожий, но гораздо более сильный инструмент для поиска строк, проверки их на соответствие какому-либо шаблону и другой подобной работы. Англоязычное название этого инструмента — Regular Expressions или просто RegExp. Строго говоря, регулярные выражения — специальный язык для описания шаблонов строк.

Реализация этого инструмента различается в разных языках программирования, хоть и не сильно. В данной статье мы будем ориентироваться в первую очередь на реализацию Perl Compatible Regular Expressions.

Основы синтаксиса

В первую очередь стоит заметить, что любая строка сама по себе является регулярным выражением. Так, выражению Хаха, очевидно, будет соответствовать строка «Хаха» и только она. Регулярные выражения являются регистрозависимыми, поэтому строка «хаха» (с маленькой буквы) уже не будет соответствовать выражению выше.

Однако уже здесь следует быть аккуратным — как и любой язык, регулярные выражения имеют спецсимволы, которые нужно экранировать. xyz] соответствует любой символ, кроме, собственно, «x», «y» или «z».

Итак, применяя данный инструмент к нашему случаю, если мы напишем [Хх][аоие]х[аоие], то каждая из строк «Хаха», «хехе», «хихи» и даже «Хохо» будут соответствовать шаблону.

Предопределённые классы символов

Для некоторых наборов, которые используются достаточно часто, существуют специальные шаблоны. Так, для описания любого пробельного символа (пробел, табуляция, перенос строки) используется \s, для цифр — \d, для символов латиницы, цифр и подчёркивания «_» — \w.

Если необходимо описать вообще любой символ, для этого используется точка — .. Если указанные классы написать с заглавной буквы (\S, \D, \W) то они поменяют свой смысл на противоположный — любой непробельный символ, любой символ, который не является цифрой, и любой символ кроме латиницы, цифр или подчёркивания соответственно. — начало текста, а $ — конец. Так, по паттерну \bJava\b в строке «Java and JavaScript» найдутся первые 4 символа, а по паттерну \bJava\B — символы c 10-го по 13-й (в составе слова «JavaScript»).

Комикс про регулярные выражения с xkcd.ru

Диапазоны

У вас может возникнуть необходимость обозначить набор, в который входят буквы, например, от «б» до «ф». Вместо того, чтобы писать [бвгдежзиклмнопрстуф] можно воспользоваться механизмом диапазонов и написать [б-ф]. Так, паттерну x[0-8A-F][0-8A-F] соответствует строка «xA6», но не соответствует «xb9» (во-первых, из-за того, что в диапазоне указаны только заглавные буквы, во-вторых, из-за того, что 9 не входит в промежуток 0-8).

Механизм диапазонов особенно актуален для русского языка, ведь для него нет конструкции, аналогичной \w. Чтобы обозначить все буквы русского алфавита, можно использовать паттерн [а-яА-ЯёЁ]. Обратите внимание, что буква «ё» не включается в общий диапазон букв, и её нужно указывать отдельно.

Квантификаторы

Вернёмся к нашему примеру. Что, если в «смеющемся» междометии будет больше одной гласной между буквами «х», например «Хаахаааа»? Наша старая регулярка уже не сможет нам помочь. Здесь нам придётся воспользоваться квантификаторами.

Примеры использования квантификаторов в регулярных выражениях

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

Некоторые часто используемые конструкции получили в языке регулярных выражений специальные обозначения:

Спецобозначения квантификаторов в регулярных выражениях.

Таким образом, с помощью квантификаторов мы можем улучшить наш шаблон для междометий до [Хх][аоеи]+х[аоеи]*, и он сможет распознавать строки «Хааха», «хееееех» и «Хихии».

Ленивая квантификация

Предположим, перед нами стоит задача — найти все HTML-теги в строке

<p><b>Tproger</b> — мой <i>любимый</i> сайт о программировании!</p>

Очевидное решение <. >]*>, которое запретит считать содержимым тега правую угловую скобку. Второй — объявить квантификатор не жадным, а ленивым. Делается это с помощью добавления справа к квантификатору символа ?. Т.е. для поиска всех тегов выражение обратится в <.*?>.

Ревнивая квантификация

Иногда для увеличения скорости поиска (особенно в тех случаях, когда строка не соответствует регулярному выражению) можно использовать запрет алгоритму возвращаться к предыдущим шагам поиска для того, чтобы найти возможные соответствия для оставшейся части регулярного выражения. Это называется ревнивой квантификацией. Квантификатор делается ревнивым с помощью добавления к нему справа символа +. Ещё одно применение ревнивой квантификации — исключение нежелательных совпадений. Так, паттерну ab*+a в строке «ababa» будут соответствовать только первые три символа, но не символы с третьего по пятый, т.к. символ «a», который стоит на третьей позиции, уже был использован для первого результата.

Скобочные группы

Для нашего шаблона «смеющегося» междометия осталась самая малость — учесть, что буква «х» может встречаться более одного раза, например, «Хахахахааахахооо», а может и вовсе заканчиваться на букве «х». Вероятно, здесь нужно применить квантификатор для группы [аиое]+х, но если мы просто напишем [аиое]х+, то квантификатор + будет относиться только к символу «х», а не ко всему выражению. Чтобы это исправить, выражение нужно взять в круглые скобки: ([аиое]х)+.

Таким образом, наше выражение превращается в [Хх]([аиое]х?)+ — сначала идёт заглавная или строчная «х», а потом произвольное ненулевое количество гласных, которые (возможно, но не обязательно) перемежаются одиночными строчными «х». Однако это выражение решает проблему лишь частично — под это выражение попадут и такие строки, как, например, «хихахех» — кто-то может быть так и смеётся, но допущение весьма сомнительное. Очевидно, мы можем использовать набор из всех гласных лишь единожды, а потом должны как-то опираться на результат первого поиска. Но как?…

Запоминание результата поиска по группе

Оказывается, результат поиска по скобочной группе записывается в отдельную ячейку памяти, доступ к которой доступен для использования в последующих частях регулярного выражения. Возвращаясь к задаче с поиском HTML-тегов на странице, нам может понадобиться не только найти теги, но и узнать их название. В этом нам может помочь регулярное выражение <(.*?)>.

<p><b>Tproger</b> — мой <i>любимый</i> сайт о программировании!</p>

Результат поиска по всему регулярному выражению: «<p>», «<b>», «</b>», «<i>», «</i>», «</p>».
Результат поиска по первой группе: «p», «b», «/b», «i», «/i», «/i», «/p».

На результат поиска по группе можно ссылаться с помощью выражения \n, где n — цифра от 1 до 9. Например выражению (\w)(\w)\1\2 соответствуют строки «aaaa», «abab», но не соответствует «aabb».

Если выражение берётся в скобки только для применения к ней квантификатора (не планируется запоминать результат поиска по этой группе), то сразу после первой скобки стоит добавить ?:, например (?:[abcd]+\w).

С использованием этого механизма мы можем переписать наше выражение к виду [Хх]([аоие])х?(?:\1х?)*.

Перечисление

Чтобы проверить, удовлетворяет ли строка хотя бы одному из шаблонов, можно воспользоваться аналогом булевого оператора OR, который записывается с помощью символа |. Так, под шаблон Анна|Одиночество попадают строки «Анна» и «Одиночество» соответственно. Особенно удобно использовать перечисления внутри скобочных групп. Так, например (?:a|b|c|d) полностью эквивалентно [abcd] (в данном случае второй вариант предпочтительнее в силу производительности и читаемости).

С помощью этого оператора мы сможем добавить к нашему регулярному выражению для поиска междометий возможность распознавать смех вида «Ахахаах» — единственной усмешке, которая начинается с гласной: [Хх]([аоие])х?(?:\1х?)*|[Аа]х?(?:ах?)+

Полезные сервисы

Потренироваться и / или проверить своё регулярное выражение на каком-либо тексте без написания кода можно с помощью таких сервисов, как RegExr, Regexpal или Regex101. script] вполне подходит символ «S».

Цвет

Напишите регулярное выражение для поиска HTML-цвета, заданного как #ABCDEF, то есть # и содержит затем 6 шестнадцатеричных символов.

Итак, нужно написать выражение для описания цвета, который начинается с «#», за которым следуют 6 шестнадцатеричных символов. Шестнадцатеричный символ можно описать с помощью [0-9a-fA-F]. Для его шестикратного повторения мы будем использовать квантификатор {6}.

#[0-9a-fA-F]{6}

Разобрать арифметическое выражение

Арифметическое выражение состоит из двух чисел и операции между ними, например:

• 1 + 2
• 1.2 *3.4
• -3/ -6
• -2-2

Список операций: «+», «-», «*» и «/».

Также могут присутствовать пробелы вокруг оператора и чисел.

Напишите регулярное выражение, которое найдёт как всё арифметическое действие, так и (через группы) два операнда.

Регулярное выражение для числа, возможно, дробного и отрицательного: -?\d+(\. \d+)?.

Оператор – это [+*/\-]. Заметим, что дефис мы экранируем. Нам нужно число, затем оператор, затем число, и необязательные пробелы между ними. Чтобы получить результат в требуемом формате, добавим ?: к группам, поиск по которым нам не интересен (отдельно дробные части), а операнды наоборот заключим в скобки. В итоге:

(-?\d+(?:\.\d+)?)\s*([-+*\/])\s*(-?\d+(?:\.\d+)?)

Кроссворды из регулярных выражений

Такие кроссворды вы можете найти у нас.

Удачи и помните — не всегда задачу стоит решать именно с помощью регулярных выражений («У программиста была проблема, которую он начал решать регэкспами. Теперь у него две проблемы»). Иногда лучше, например, написать развёрнутый автомат конечных состояний.

Задачи и их разборы с javascript.ru; в статье использованы комиксы xkcd.

Шпаргалка по синтаксису регулярных выражений — JavaScript

String.prototype.match () — JavaScript | MDN

Метод match () извлекает результат сопоставления
строка против регулярного выражения.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https: // github.com / mdn / interactive-examples и отправьте нам запрос на перенос.

Параметры

regexp

Объект регулярного выражения.

Если regexp не является объектом RegExp , он
неявно преобразовано в RegExp с помощью
новое RegExp ( regexp ) .

Если вы не укажете никаких параметров и напрямую используете метод match () ,
вы получите Массив с пустой строкой: [""] .

Возвращаемое значение

Массив , содержимое которого зависит от наличия или отсутствия глобального
( g ) или null , если совпадений не найдено.

• Если используется флаг g , все результаты соответствуют полному регулярному
  выражение будет возвращено, а группы захвата — нет.
• , если флаг g не используется, только первое полное совпадение и его
  связанные группы захвата возвращаются.В этом случае возвращенный товар будет иметь
  дополнительные свойства, как описано ниже.

Дополнительная недвижимость

Как объяснено выше, некоторые результаты содержат дополнительные свойства, как описано ниже.

групп

Объект именованных групп захвата, ключи которых являются именами, а значения —
группы захвата или undefined , если именованные группы захвата не были определены.
Посмотреть группы
и диапазоны для получения дополнительной информации.

индекс

Индекс поиска, по которому был найден результат.

ввод

Копия поисковой строки.

Если регулярное выражение не включает флаг g ,
str.match () вернет тот же результат, что и
RegExp.exec () .

Другие методы

Использование match ()

В следующем примере match () используется для поиска « Chapter »
за которым следуют 1 или несколько числовых символов, за которыми следует десятичная точка и числовой
символ 0 или более раз.

Регулярное выражение включает флаг i , поэтому верхний / нижний регистр
различия будут проигнорированы.

  const str = 'Дополнительные сведения см. В главе 3.4.5.1';
const re = / см. (раздел \ d + (\. \ d) *) / i;
const found = str.match (повторно);

console.log (найдено);











  

Использование глобальных флагов и флагов игнорирования регистра
с match ()

В следующем примере демонстрируется использование флагов global и ignore case с
матч () .Все буквы с A по E и
Возвращаются , от до e , каждый свой элемент в массиве.

  const str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
const regexp = / [A-E] / gi;
const match_array = str.match (регулярное выражение);

console.log (массив совпадений);

  

Использование именованных групп захвата

В браузерах, которые поддерживают именованные группы захвата, следующий код захватывает
« лиса » или « кошка » в группу с названием « животное »:

  const paragraph = 'Быстрая коричневая лисица перепрыгивает через ленивую собаку. Он гавкнул. ';

const capturingRegex = / (?  fox | cat) перепрыгивает через /;
const found = paragraph.match (capturingRegex);
console.log (found.groups);
  

Использование match () без параметра

  const str = "Ничего из ничего не выйдет.";

str.match ();  

Объект, не являющийся RegExp, в качестве параметра

Если параметр regexp является строкой или числом, он
неявно преобразовано в RegExp с помощью
новое RegExp ( regexp ) .

Если это положительное число с положительным знаком, RegExp () проигнорирует
положительный знак.

  const str1 = "NaN не означает число. Infinity содержит -Infinity и + Infinity в JavaScript.",
    str2 = "Моему дедушке 65 лет, а бабушке 63 года.",
    str3 = "Контракт объявлен недействительным.";
str1.match ("число");
str1.match (NaN);
str1.match (Бесконечность);
str1.match (+ Бесконечность);
str1. match (-Бесконечность);
ул2.спичка (65);
str2.match (+65);
str3.match (ноль);  

Таблицы BCD загружаются только в браузере

Утверждения — JavaScript | MDN

Утверждения включают в себя границы, которые указывают начало и конец строк и слов, а также другие шаблоны, указывающие каким-либо образом, что совпадение возможно (включая упреждающее, упреждающее и условные выражения).

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https: // github.A / не соответствует «A» в «an A», но соответствует первой «A» в «An A».

Этот символ имеет другое значение, когда он появляется в начале группы.

Соответствует концу ввода. Если для многострочного флага установлено значение true, также совпадает непосредственно перед символом разрыва строки. Например, / t $ / не соответствует «t» в «eater», но соответствует ему в «eat».

Соответствует границе слова.Это позиция, в которой за символом слова не следует или ему предшествует другой символ слова, например, между буквой и пробелом. Обратите внимание, что граница совпадающего слова не включается в совпадение. Другими словами, длина совпадающей границы слова равна нулю.

Примеры:

• / \ bm / соответствует букве «м» в слове «луна».
• / oo \ b / не соответствует «oo» в «moon», потому что за «oo» следует «n», который является символом слова.
• / oon \ b / соответствует «oon» в «moon», потому что «oon» является концом строки, поэтому за ним не следует символ слова.
• / \ w \ b \ w / никогда ничего не найдет, потому что за символом слова никогда не может следовать и не слово, и символ слова.

Чтобы сопоставить символ возврата ( [\ b] ), см. Классы символов.

Соответствует границе слова. Это позиция, в которой предыдущий и следующий символы имеют один и тот же тип: либо оба должны быть словами, либо оба не должны быть словами, например, между двумя буквами или между двумя пробелами.Начало и конец строки не считаются словами. Так же, как и совпавшая граница слова, совпавшая несловая граница также не включается в соответствие. Например, / \ Bon / соответствует «on» в «в полдень», а / ye \ B / соответствует «ye» в «возможно вчера».

Другие утверждения

Примечание : ? Символ также может использоваться в качестве квантификатора.

  let fruitWithDescription = [«Красное яблоко», «Оранжевый апельсин», «Зеленый авокадо»];


let enEdSelection = fruitWithDescription.filter (descr => /(en|ed)\b/.test(descr));

console.log (enEdSelection);  

 

пусть regex = / First (? = test) / g;

console.log ('Первый тест'.match (regex));
console.log ('Первый персик'.match (regex));
консоль.log ('Это первый тест за год.'. match (regex));
console.log ('Это первый персик за месяц.'. match (regex));
  

  let oranges = ['спелый апельсин A', 'зеленый апельсин B', 'спелый апельсин C',];

let ripe_oranges = oranges.filter (fruit => fruit.match (/ (? <= спелый) апельсин /));
console.log (ripe_oranges);
  

  пусть re = / ab + c / i;
пусть re = new RegExp ('ab + c', 'i')
пусть re = new RegExp (/ ab + c /, 'i')
  

  пусть re = / \ w + /
пусть re = new RegExp ('\\ w +')
  

  пусть re = / (\ w +) \ s (\ w +) /
let str = 'Джон Смит'
пусть newstr = str.replace (re, '$ 2, $ 1')
console.log (новая строка)
  

  let str = '# foo #'
пусть регулярное выражение = / foo / y

regex.lastIndex = 1
regex. test (str)
regex.lastIndex = 5
regex.test (str)
regex.lastIndex  

  рэ = / \ д / у;
в то время как (r = re.exec ("123 456")) console.log (r, "И re.lastIndex", re.lastIndex);




  

  let text = 'Образец текста на русском языке'
пусть regex = / [\ u0400- \ u04FF] + / g

let match = regex.exec (текст)
console.log (совпадение [0])
console.log (regex.lastIndex)

пусть match3 = regex.exec (текст)
console.log (match3 [0])
console.log (regex.lastIndex)


  

 
'Икс'. replace (/ x (.)? / g, function (m, group) {
  console.log ("'группа:" + группа + "'");
});



'x'.replace (/ x (.)? / g, function (m, group) {
  console.log ("'группа:" + группа + "'");
});

  

Метасимволы

Метасимволы - это символы со специальным значением:

Квантификаторы

Свойства объекта RegExp

Имущество	Описание
конструктор	Возвращает функцию, создавшую прототип объекта RegExp.
глобальный	Проверяет, установлен ли модификатор "g"
ignoreCase	Проверяет, установлен ли модификатор "i"
lastIndex	Задает индекс, с которого начинается следующее совпадение
многострочный	Проверяет, установлен ли модификатор "m"
источник	Возвращает текст шаблона RegExp

Методы объекта RegExp

.

js-регулярное выражение · PyPI

Описание проекта

Уровень совместимости для использования регулярных выражений Javascript в Python. abc $ "). search (" abc \ n ") # не соответствует

Внутри js_regex.compile () заменяет синтаксис регулярного выражения JS, который имеет другой
значение в Python с любым синтаксисом регулярного выражения Python имеет предполагаемое значение.

Это работает только для метода .search () - нет эквивалента
.match () или .fullmatch () для регулярных выражений Javascript.

Мы также проверяем конструкции, которые действительны в Python, но не JS, такие как
именованные группы захвата - и вызывают явную ошибку.Действующие конструкции
в JS, но не в Python, также может вызвать ошибку, потому что мы все еще используем Python
re.compile () функция под капотом!

Следующая таблица адаптирована из этой увеличенной версии,
исключение других языков и любых строк, в которых JS и Python ведут себя одинаково.

Элемент	Javascript	Питон	Обработка
\ a (звонок)	№	да	Преобразовано в поведение JS
\ ca - \ cz и \ cA - \ cZ (управляющие символы)	да	№	Преобразовано в поведение JS
\ d для цифр, \ w для символов слов, \ s для пробелов	ascii	юникод	Преобразовано в поведение JS (включая \ D , \ W , \ S для инвертированных классов)
$ (конец строки / строки)	в конце	позволяет трейлинг \ n	Преобразовано в поведение JS
\ A (начало строки)	№	да	Явная ошибка, используйте ^ вместо
\ Z (конец строки)	№	да	Явная ошибка, используйте вместо
(? <= Text) (положительный просмотр назад)	новое в ES2018	да	Разрешено
(? (отрицательный просмотр назад)	новое в ES2018	да	Разрешено
(? (1) затем | иначе)	№	да	Явная ошибка
(? (Группа) затем | иначе)	№	да	Явная ошибка
(? # Комментарий)	№	да	Явная ошибка
(? P regex) (названная группа захвата Python)	№	да	Не обнаружено (пока)
(? P = name) (обратная ссылка на Python)	№	да	Не обнаружено (пока)
(? regex) (JS-группа захвата)	новое в ES2018	№	Ошибка Python, не переведена (пока)
$ <имя> (обратная ссылка с именем JS)	новое в ES2018	№	Ошибка Python, не переведена (пока)
(? I) (без учета регистра)	/ i только	да	Явная ошибка, скомпилировать с flags = re. и $ соответствует разрывам строки)	/ м только	да	Явная ошибка, компилируйте с flags = re.MULTILINE вместо
(? S) (точка соответствует новой строке)	№	да	Явная ошибка, скомпилировать с flags = re.DOTALL вместо
(? X) (режим свободного интервала)	№	да	Явная ошибка, в Javascript нет соответствующего режима
Несуществующие группы обратных ссылок являются ошибкой	№	да	следует поведению Python
Обратные ссылки на неудачные группы также не работают	№	да	следует поведению Python
Вложенные ссылки с \ 1 по \ 9	да	№	следует поведению Python

Обратите внимание, что во многих случаях функции регулярных выражений только для Python будут рассматриваться как часть
обычный шаблон движков регулярных выражений JS. В настоящее время возникает явная ошибка
на таких входах, но может преобразовать их в поведение JS в будущей версии.

История изменений

1.0.1 - 2019-10-17

• Разрешить использование собственных строк на Python 2. На самом деле это недействительно в соответствии с
  согласно спецификации, но он будет существовать всего несколько месяцев, так что неважно.

1.0.0 - 2019-10-04

• Теперь считается полнофункциональным и стабильным, поскольку все конструкции рекомендуются
  для jsonschema поддерживаются шаблоны и все несовместимости со стороны Python
  обнаружены.def $ " оба преобразованы в
• Добавлены явные ошибки для флагов re.LOCALE и re.VERBOSE , у которых нет эквивалента в JS
• Добавлены явные проверки и ошибки для использования функций регулярных выражений только для Python.

0.2.0 - 2019-09-28

Преобразование синтаксиса только для JS в эквивалент Python везде, где это возможно.

0.1.0 - 2019-09-28

Первоначальный выпуск, с настройкой проекта и очень простой реализацией.

Скачать файлы

Загрузите файл для своей платформы.Если вы не уверены, что выбрать, узнайте больше об установке пакетов.

Файлы для js-regex, версия 1.0.1

Имя файла, размер	Тип файла	Версия Python	Дата загрузки	Хеши
Имя файла, размер js_regex-1.0.1-py3-none-any.whl (12,1 кБ)	Тип файла Колесо	Версия Python py3	Дата загрузки 17 октября 2019 г.	Хеши Вид
Имя файла, размер js-regex-1.0.1.tar.gz (11,7 КБ)	Тип файла Источник	Версия Python Никто	Дата загрузки 17 октября 2019 г.	Хеши Вид

Ссылка на синтаксис регулярного выражения Javascript (объект RegExp)

Символ	Описание
\	Помечает следующий символ как специальный символ, литерал, обратная ссылка или восьмеричный escape. также соответствует позиции после '\ n' или '\ r'.
$	Соответствует позиции в конце входной строки. Если установлено свойство Multiline объекта RegExp , $ также соответствует позиции перед '\ n' или '\ r'.
*	Соответствует предыдущему символу или части выражения ноль или более раз. Например, zo * соответствует «z» и «zoo». * эквивалентно {0,}.
+	Один или несколько раз соответствует предыдущему символу или части выражения.Например, «zo +» соответствует «zo» и «zoo», но не «z». + эквивалентен {1,}.
?	Соответствует предыдущему символу или части выражения ноль или один раз. Например, "делать (а)?" совпадает с «делать» в «делать» или «делает». ? эквивалентно {0,1}
{ n }	n - целое неотрицательное число. Совпадает ровно n раз. Например, «o {2}» не соответствует «o» в «Bob», но соответствует двум «o» в «food».
{ n ,}	n - целое неотрицательное число. Соответствует не менее n раз. Например, 'o {2,}' не соответствует «o» в «Bob» и соответствует всем «o» в «foooood». 'o {1,}' эквивалентно 'o +'. 'o {0,}' эквивалентно 'o *'.
{ n , m }	m и n - неотрицательные целые числа, где n <= m . Соответствует минимум n и максимум m раз.Например, «o {1,3}» соответствует первым трем «o» в «fooooood». 'o {0,1}' эквивалентно 'o?'. Учтите, что между запятой и числами нельзя ставить пробел.
?	Когда этот символ следует сразу за любым другим квантификатором (*, +,?, { n }, { n ,}, { n , m }), соответствующий шаблон не является жадным. Нежадный шаблон соответствует как можно меньшей части искомой строки, тогда как жадный шаблон по умолчанию соответствует по возможности большей части искомой строки. Например, в строке «oooo», «o +?» соответствует одному "o", а 'o +' соответствует всем 'o'.
.	Соответствует любому одиночному символу, кроме «\ n». Чтобы соответствовать любому символу, включая '\ n', используйте шаблон, например '[\ s \ S].
(образец )	Соответствует образцу и фиксирует совпадение. Захваченное совпадение может быть извлечено из результирующей коллекции Matches с помощью коллекции SubMatches в VBScript или свойств $ 0 … $ 9 в JScript.Чтобы сопоставить символы скобок (), используйте '\ (' или '\)'.
(?: образец )	Соответствует шаблону , но не захватывает совпадение, то есть это совпадение без захвата, которое не сохраняется для возможного дальнейшего использования. Это полезно для комбинирования частей узора с помощью символа «или» (|). Например, «промышленность» (?: Y | ies) более экономичное выражение, чем «промышленность | отрасли».
(? = образец )	Положительный просмотр вперед соответствует строке поиска в любой точке, где начинается строка, соответствующая шаблону .Это совпадение без захвата, то есть совпадение не фиксируется для возможного дальнейшего использования. Например, «Windows (? = 95 | 98 | NT | 2000)» соответствует «Windows» в «Windows 2000», но не «Windows» в «Windows 3.1». Предварительный просмотр не использует символы, то есть после совпадения поиск следующего совпадения начинается сразу после последнего совпадения, а не после символов, составляющих предварительный просмотр.
(?! образец )	Отрицательный просмотр вперед соответствует строке поиска в любой точке, где начинается строка, не соответствующая шаблону .Это совпадение без захвата, то есть совпадение не фиксируется для возможного дальнейшего использования. Например, «Windows (?! 95 | 98 | NT | 2000)» соответствует «Windows» в «Windows 3.1», но не соответствует «Windows» в «Windows 2000». Предварительный просмотр не использует символы, то есть после совпадения поиск следующего совпадения начинается сразу после последнего совпадения, а не после символов, составляющих предварительный просмотр.
x | л	Соответствует x или y .a-z] »соответствует любому символу, не входящему в диапазон от« a »до« z ».
\ б	Соответствует границе слова, то есть позиции между словом и пробелом. Например, 'er \ b' соответствует 'er' в "never", но не 'er' в "глаголе".
\ B	Соответствует границе без слова. 'er \ B' соответствует 'er' в "глаголе", но не 'er' в "never".
\ c x	Соответствует управляющему символу, обозначенному как x .0-9].
\ ф	Соответствует символу подачи страницы. Эквивалентно \ x0c и \ cL.
\ п	Соответствует символу новой строки. Эквивалентно \ x0a и \ cJ.
\ r	Соответствует символу возврата каретки. Эквивалентно \ x0d и \ cM.
\ с	Соответствует любому символу пробела, включая пробел, табуляцию, подачу страницы и т. Д. Эквивалентно [\ f \ n \ r \ t \ v].
\ S	Соответствует любому символу, отличному от пробела.A-Za-z0-9_] '.
\ x n	Соответствует n , где n - шестнадцатеричное escape-значение. Шестнадцатеричные escape-значения должны состоять ровно из двух цифр. Например, "\ x41" соответствует "A". '\ x041' эквивалентно '\ x04' & "1". Позволяет использовать коды ASCII в регулярных выражениях.
\ число	Соответствует num , где num - положительное целое число. Ссылка на захваченные матчи.Например, '(.) \ 1' соответствует двум идущим подряд идентичным символам.
\ n	Определяет восьмеричное escape-значение или обратную ссылку. Если \ n предшествует по крайней мере n захваченных подвыражений, n - это обратная ссылка. В противном случае n - восьмеричное escape-значение, если n - восьмеричное число (0-7).
\ нм	Определяет восьмеричное escape-значение или обратную ссылку.Если \ нм предшествует по крайней мере нм захваченных подвыражений, нм является обратной ссылкой. Если \ nm предшествует по крайней мере n захватов, n - это обратная ссылка, за которой следует буквальное значение m . Если ни одно из предыдущих условий не существует, \ nm соответствует восьмеричному escape-значению nm , когда n и m являются восьмеричными цифрами (0-7).
\ нм	Соответствует восьмеричному escape-значению nml , когда n - восьмеричная цифра (0-3), а m и l - восьмеричные цифры (0-7). No related posts. Share : Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт