Регулярные выражения на JavaScript

Javascript

Регулярные выражения — гибкая и мощная технология для поиска строк в тексте. В JavaScript регулярные выражения являются объектами класса RegExp. Конструкция регулярного выражения состоит из шаблона и модификатора. Шаблон представляет собой строку для поиска в тексте.

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

В каких случаях применяют регулярные выражения?

Может возникнуть вопрос, а зачем придумывать что-то еще, если у нас уже есть достаточно богатый функционал для раздербанивания и анализа строк? При работе с огромным количество текста, особенно, который генерируется динамически, можно проследить некоторые паттерны(повторяющиеся фрагменты и структура текста в-целом).

Допустим, нам нужно выдрать из таблички все названия товаров и цены, а сколько данных будет в таблице — нам не известно. Можно в цикле использовать indexOf() и substring(), но код получится громоздким и не очень надежным. Регулярные выражения очень удобно использовать для валидации данных, например для электронной почты, номера телефона, даты и т.д.

Сигнатура регулярных выражений

Регулярное выражение имеет следующий вид: /шаблон/модификатор. Шаблон может быть любая строка, подстрока, символ, специальные знаки, группа или одна модифицированная конструкция. Разберем на простом примере, как работают регулярные выражения.

Пример:

var str = «Hello, my name is Ronald»;

var pattern = /my/i; // здесь my — шаблон, i модификатор, ищущий одно совпадение

str.search(«my»); // 7 — метод строк находит позицию совпадения
str.search(pattern); // аналогичный результат предыдущему
str.match(pattern); // результатом будет массив из одной строки my, так как метод match ищет совпадение по регулярным выражениям, а не позицию в тексте

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

Есть несколько способов как создать объект RegExp:

  1. var rp = new RegExp(/pattern/modifier); — объявление осуществляется в стиле ООП.
  2. var rp = /pattern/modifier; — более короткое объявление как примитив.
  3. имя_переменной.match(/pattern/modifier); — объявление регулярного выражения как параметр функции — в этом случае объект нигде не сохраняется.
  4. /pattern/modifier.exec(str) — аналогичный способ предыдущему.

Пример:

var str = «Hello World»;

// Применение всех способов создания объекта регулярных выражений
var rexp = new RegExp(/World/i);
str.match(rexp); // World — массив из одного элемента
rexp.exec(str); // World

rp = /World/i; // объявление как примитива
rp.exec(str); // World

str.match(/World/i); // World — объявление в параметре функции,
/World/i.exec(str); // World

Модификаторы шаблонов

Регулярные выражения JavaScript дополняются тремя модификаторами:

  • i — находит одно совпадение в одной строке по шаблону без учета регистра символов.
  • g — находит все совпадения в одной строке, не останавливаясь на первом.
  • m — ищет совпадения в строке, состоящей из множества рядов, чувствителен к регистру.

Пример:

var st = «Hello world World»;

var rxp_i = /World/i; // с модификатором i
var rxp_d = /World/d; // с модификатором g
var rxp_m = /World/m; // с модификатором m

rxp.exec(rxp_i); // world
rxp.exec(rxp_d); // world, World
rxp.exec(rxp_m); // World
rxp.exec(rxp_i); // world

Шаблон

Шаблон — основа регулярных выражений в любом языке программирования. Шаблон может состоять из одного символа или их группы. Также в шаблон можно вставить квантификаторы, выражения в скобках, метасимволы.

В примерах ранее мы использовали шаблон, описывающий конкретный набор символов. Однако это далеко не все возможности регулярных выражений. Шаблон может представлять сложную структуру, которая расширяет возможности поиска.

Пример:

var st = «Hello World»;
var rp = /Wo\D[a-z]d$/i;
rp.exec(rp); // World

Здесь поиск будет производиться по следующим параметрам:

  • Wo — строка начинается с Wo;
  • \D — затем следует любой символ кроме цифры;
  • [a-z] — затем следует любой символ от a до z;
  • d$ — строка должна заканчиваться на d$.

Что это за конструкции? Разберем их отдельно, так как их достаточно много в регулярных выражениях. Однако это позволяет создавать сложные но гибкие шаблоны для более углубленного поиска совпадений в строках.

Свойства объектов регулярных выражений

У RegExp есть небольшой набор встроенных свойств:

  • constructor — возвращает функцию, которая создает объект RegExp;
  • global — содержит true если для шаблона установлен модификатор g;
  • ignoreCase — содержит true если для шаблона установлен модификатор i;
  • multiline — содержит true если для шаблона установлен модификатор i;
  • lastIndex — представляет собой индекс следующего совпадения;
  • source — возвращает текст шаблона.

Список методов

  1. exec(regexp) — находит все совпадения (вхождения в шаблон «регулярки») в строке. Возвращает массив (при совпадении) и обновляет свойство regexp-а, или null — если ничего не найдено,. С модификатором g — при каждом вызове этой функции, она будет возвращать следующее совпадение после предыдущего найденного — это реализовано с помощью ведения индекса смещения последнего поиска.
  2. match(regexp) — найти часть строки по шаблону. Если указан модификатор g, то функция match() возвращает массив всех совпадений или null (а не пустой массив). Без модификатора g эта функция работает как exec();
  3. test(regexp) — функция проверяет строку на соответствие шаблону. Возвращает true — если есть совпадение, и false — если совпадения нет.
  4. Из всех представленных методов наиболее часто применяется exec. Метод toString вызывается автоматически, когда мы выводим результат на экран за счет alert или document.write.

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

Скобки

Скобки используют для поиска символов, находящихся в диапазоне:

  • [abc] или [a-z] — находит любой символ, находящийся в скобках, а также в диапазоне символов, указанных через тире.
  • [^abc] или [^a-z] — находит любые символы, кроме тех, что находятся в скобках.
  • [123] или [0-9] — находит любое число, которое в скобках или в диапазоне.
  • [^123] или [^0-9] — находит любое число, которое не находится в скобках или в диапазоне.
  • (x|y) — находит x или y как альтернативу.

Пример:

//Скобки с буквами
var str = «Is this all there is?»;
var patt1 = /[h]/g;
var result = str.match(patt1);
alert(result); // h,h

//Скобки с числами
var s = «123456789»;
var pat = /[1-4]/g;
var res = str.match(pat);
alert(res); // 1,2,3,4

//Альтернатива
var str = «re, green, red, green, gren, gr, blue, yellow»;
var patt = /(red|green)/g;
var result = str.match(patt);
alert(result); // green, red, green

Метасимволы

Метасимволы — специальные символы, которые указывают на поиск символов или цифр в диапазоне:

  • . — точка обозначает любой один символ кроме перевода строки;
  • \w — находит любой буквенный символ;
  • \W — находит любой небуквенный символ;
  • \d — любой символ, соответствующий цифре;
  • \D — любой символ не соответствующий цифре;
  • \s — соответствует пробельному символу;
  • \S — соответствует любому символу кроме пробела;
  • \b — соответствие символу, с которого начинается искомая строка;
  • \n — соответствует символу перевода строки;
  • \t — соответствует tab символу;
  • \xxx — указывается символ кода в десятичной системе исчисления;
  • \xdd — символ в шестнадцатиричной системе исчисления;
  • \udddd — находит символ юникода по десятичному коду.

Пример:

// Символ «точка»
var s = «That’s hot!»;
var patt = /h.t/g;
var result = str.match(patt);
alert(result); // hat, hot

//Любой буквенный символ
var strg = «Give 100%!»;
var pattern = /\w/g;
var res = str.match(pattern);
alert(res); // G,i,v,e,1,0,0

// Поиск нечисловых символов
var strg = «Total 200%!»;
var pattern = /\D/g;
var res = str.match(pattern);
alert(res); // T,o,t,a,l

//Поиск по десятичному коду
var s = «Visit W3Schools. Hello World!»;
var patt = /\127/g;
var result = str.match(patt);
alert(result); // W,W

// Поиск по десятичному коду символа юникода
var str = «Welcome. Hello»;
var patt1 = /\u0057/g;
var result = str.match(patt1);
alert(result); // W

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

Еще одним полезным инструментом для формирования шаблона являются квантификаторы:

  • n+ — находит символы или строки, в которых сдержится по меньшей мере 1 символ, указанный вместо n;
  • n* — содержит строки, в которых находится не меньше нуля символов n;
  • n? — совпадает если содержится от 0 до 1 символа n;
  • n{X} — совпадает если в строке содержится количество X символов;
  • n{X,Y} — совпадает если в строке находится количество от Х до Y символов n;
  • n{X,} — совпадает если содержится по меньшей мере X n;
  • ^n — совпадает с любым символом n в начале строки;
  • n$ — совпадает с любым символом n в конце строки;
  • ?=n — совпадает с любой строкой, которая находится перед n;

Пример:

var string = «Hellooo World! Hello W3Schools!»;
var pattern = /o+/g;
var resultat = str.match(pattern);
alert(resultat); // ooo,o,o,oo

var stroka = «Hellooo World! Hello W3Schools!»;
var regxp = /lo*/g;
var res = str.match(regxp);
alert(res); // looo,lo,lo,loo

Разделение специальных конструкций в шаблоне

Для разделения применяется регулярное выражение «\s*(\s|,|!|\.)\s*«. Подвыражение «\s» по сути представляет пробел. Звездочка указывает, что символ может присутствовать от 0 до бесконечного количества раз. То есть добавляем звездочку и мы получаем неопределенное количество идущих подряд пробелов — «\s*» (то есть неважно, сколько пробелов между словами). Причем пробелы может вообще не быть. В скобках указывает группа выражений, которая может идти после неопределенного количества пробелов.

Группа позволяет нам определить набор значений через вертикальную черту, и подстрока должна соответствовать одному из этих значений. То есть в группе «\s|,|!|\.» подстрока может соответствовать пробелу, запятой, восклицательному знаку или точке. Причем поскольку точка представляет специальную последовательность, то, чтобы указать, что мы имеем в виду именно знак точки, а не специальную последовательность, перед точкой ставим слеши.

Соответствие строки. matches

Еще один метод класса String — matches() принимает регулярное выражение и возвращает true, если строка соответствует этому выражению. Иначе возвращает false.

Пример:

var stringText = ‘<img src= «image_ocean.jpg» />’;
var regexp = /[a-z]+\.(png|jpg)/i;
var finish = matchText.match(regexp);
finish.forEach(function(value, index, array){

alert(value + «<br/>»); // image_ocean.jpg jpg
});

Пример:

numbers = «+12343454556»;
result = numbers.matches(«(\+*)\d»);
if(result){
alert(«It is a phone number»);
}
else{
alert(«It is not a phone number!»);
}

В данном случае в регулярном выражение сначала определяется группа «(\+*)«. То есть вначале может идти знак плюса, но также он может отсутствовать. Далее смотрим, соответствуют ли последующие 11 символов цифрам. Выражение «\d» представляет цифровой символ, а число в фигурных скобках — сколько раз данный тип символов должен повторяться. То есть мы ищем строку, где вначале может идти знак плюс (или он может отсутствовать), а потом идет 11 цифровых символов.

Если в регулярном выражении используется буква «s», она трактуется именно как буква. Но если перед ней стоит обратный слеш — \s — это уже означает любой пробельный символ. Есть специальные символы, которые по умолчанию используются в RegEx для составления сложных конструкций: [ \ ^ $ . | ? * + ( ). Чтобы использовать такой символ в шаблоне в буквальном значении, его нужно экранировать. Например, чтобы искать символ «^», нужно написать \^.

Здесь это не абсолютно необходимо (символ подчеркивания в JavaScript не нужно экранировать), просто использовано для примера. Знак + использован, чтобы захватывать одно или больше вхождений символа подчеркивания. Скобки () означают захват группы — это способ указывать несколько символов как отдельный юнит. ?=[A-Z] в скобках — пример положительной опережающей проверки, которая в данном случае означает «Раздели строку непосредственно перед любой буквой в верхнем регистре».

Символ | в регулярных выражениях означает «или». Здесь он использован для указания вариантов разделения: «Раздели строку, где есть пробел ИЛИ есть символ подчеркивания, ИЛИ перед заглавной буквой». Возможность составлять цепочки из различных частей — одна из составляющих могущества RegEx.

Метод join() завершает процесс, конвертируя массив обратно в строку. В качестве аргумента в join() передано ‘ ‘ (пробел в кавычках). В результате к каждой подстроке, выделенной методом split(), будет добавлен пробел.

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

Поэкспериментируем с методом Split. Пример:

var initialString = «Сегодня я видел прекрасную погоду»;
var rexp = /\s/;
var result = initialString.split(rexp);
result.forEach(function(value, index, array){

alert(value + «<br/>»); // Сегодня, я, видел, прекрасную, погоду
});

Использование метода Search. Пример:

var Strig = «hello world»;
var pattexp = /wor/;
var final = Strig.search(pattexp);
alert(final); // 6

Метод str.matchAll(regexp) – «новый, улучшенный» вариант метода str.match. Он используется, в первую очередь, для поиска всех совпадений вместе со скобочными группами. У него 3 отличия от match:

  1. Он возвращает не массив, а перебираемый объект с результатами, обычный массив можно сделать при помощи Array.from.
  2. Каждое совпадение возвращается в виде массива со скобочными группами (как str.match без флага g).
  3. Если совпадений нет, то возвращается не null, а пустой перебираемый объект.

Удаляем заглавные буквы с помощью строк и регулярных выражений

Теперь у нас есть строка с кучей ненужных прописных букв. Вы догадались, как их удалить? Во-первых, нам нужно выбрать все заглавные буквы. Затем используем поиск набора символов с помощью глобального модификатора /[A-Z]/g. Мы снова будем использовать метод replace, но как в этот раз сделать строчной символ?

Пример:

function to_lowerC(str){
return str.replace(/[A-Z]/g, (u) => u.toLowerCase());
}
to_lowerC(‘camel Case’) // ‘camel case’
to_lowerC(‘hello World It Is Me’) // ‘hello world it is me’

Квадратные скобки задают диапазон символов (в данном случае — любые буквы английского алфавита в нижнем регистре). Все, что попадает в этот диапазон, будет соответствовать шаблону. Диапазоны символов могут быть разными. Это могут быть буквы в верхнем регистре (тогда диапазон будет выглядеть как [A-Z]) или цифры ([0-9]).

Если ваш диапазон должен охватывать все буквенно-цифровые символы и символ подчеркивания, то шаблон может выглядеть следующим образом: [a-zA-Z0-9_].

Итог

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

Регулярные выражения  — это не просто ещё одна часть языка JavaScript, вроде свойства или чего-то подобного. По сути, это небольшой самостоятельный язык, независимый от других. Ещё одно достоинство регулярных выражений: они крайне удобны, так как позволяют выполнять сложные манипуляции со строками и при этом экономить код.

Недостаток регулярных выражений в том, что часто они выглядят странно и даже пугающе. Особенно это касается более сложных шаблонов. По этой причине многие программисты не горят желанием их изучать. И это неправильно. Регулярные выражения могут быть мощным инструментом, позволяющим писать меньше кода.

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

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

Лучший способ запомнить регулярные выражения — практиковаться на одной и той-же строке. Это позволит понять как работают все конструкции, методы и свойства. Когда вы изучите все прелести RegExp, то сможете формировать на сайте поиск, валидацию форм и другие сложные элементы, которые усложняют функционал сайта.

Оцените статью
Образовательный портал WELCOME4U.RU
Добавить комментарий

Adblock
detector