Матвей Земсков

Заметки веб-мастера

Воскресенье, 26 августа 2018 10:19

Регулярные выражения JavaScript - шпаргалка

Оцените материал
(294 голосов)

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

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

В JavaScript существует 2 способа объявления регулярных выражений.

var rgx = /^(\d+)/ – вы можете создать переменную и в качестве значения сохранить в нее шаблон регулярного выражения.

var rgx = new RegExp('^(\d+)') – функция-конструктор полезна, когда необходимо изменять регулярное выражение программно. В данном случае регулярное выражение создается во время выполнения программы.

Соответствие определенному набору символов

Следующие спецсимволы используются для определения соответствия определенному набору символов.

\w – Соответствует буквенному или цифровому символу, а также знаку подчёркивания

\W – Соответствует любому символу, за исключением буквенного, цифрового и знака подчеркивания.

\d – Соответствует цифровому символу. Любые цифры от 0 до 9

\D – Соответствует не цифровому символу. Любые символы за исключением цифр от 0 до 9

\s – Соответствует пробельным символам. К ним относятся: пробел, табуляция и перевод строки

\S – Все символы за исключением пробельных

. – Соответствует любому символу за исключением перевода строки

[A-Z] – Обозначает диапазон символов. Например, выражение [A-E] – соответствует символам “A”, “B”, “C”, “D” и “E”

[ABC] – Соответствует перечисленным в символам в выражении. Например, [AMT] – сработает только с символами “A”, “M” и “T”.

[^ABC] – Соответствует символам, не представленным в выражении. Например, с помощью [^A-E] найдутся все символы за исключением, “A”, “B”, “C”, “D” и “E”.

Указание количества повторений символов в тексте

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

+ – Обозначает одно или более совпадение. Например, чтобы регулярное выражение совпало с набором символов “ABD12D” нужно использовать \w+.

* – Обозначает ноль или более символов. Например, под выражение b\w* подойдут следующие сочетания символов: “b”, “bat”, “bajhdsfbfjhbe”. В данном случае мы ищем соответствие нулевому или более количеству символов в словах после буквы “b”.

{m, n} – Соответствует не менее m и не более n вхождений предыдущего символа. {m,} будет соответствовать не менее, чем m вхождений, верхнего предела в этом случае нет. {k} будет соответствовать точному количеству (k) вхождений предыдущего символа.

? – Обозначает ноль или один символ. Например, это может быть полезно при сопоставлении двух вариантов написания для одной и той же слова. Выражению будут соответствовать оба слова: “behavior” и “behaviour”.

| – Соответствует выражению до или после символа |. Например, выражению /se(a|e)/ - соответсвуют оба слова: “see” и “sea”.

Группировка в регулярных выражениях

(ABC) – Объединение несколько символов вместе. Подстрока, соответствующую этому выражению сохраняется для последующего использования.

(?:ABC) – Это выражение также производит поиск группы символов, но не сохраняет результат.

\d+(?=ABC) – выражение соответствует символам предшествующим (?=ABC), только если за ним следует “ABC”. Часть “ABC” не будет учитываться при поиске. Часть выражения “\d” приведена всего лишь для примера. На ее месте может быть любое регулярное выражение.

\d+(?!ABC) – выражение соответствует символам предшествующим (?!ABC), только если за ним НЕ следует “ABC”. Часть “ABC” не будет учитываться при поиске. Часть выражения “\d” приведена всего лишь для примера. На ее месте может быть любое регулярное выражение.

Другие символы регулярных выражений

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

^ – Указывает на начало строки;

$ – Указывает на конец строки;

\b – Соответствует символу, если предыдущий символ является границей слова;

\B – Соответствует символу, если предыдущий символ не является границей слова;

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

Флаги могут использоваться для указания того, как следует интерпретировать регулярное выражение. Вы можете использовать флаги по одиночке или сочетать их в любом порядке. В JavaScript допустимо использовать следующие пять флагов.

g – находятся все совпадения с указанным выражением в тексте(глобальный поиск);

i – делает поиск нечувствительным к регистру. В этом случае такие слова, как “Apple”, “aPPLe” и “apple” попадут в результаты поиска;

m – флаг включает многострочный поиск;

u – этот флаг позволит вам использовать в вашем регулярном выражении escape-последовательности кода Unicode;

y – Указывает JavaScript вести поиск соответствия в текущей позиции в целевой строке;

Флаги для регулярного выражения в JavaScript можно использовать 2 способами: либо путем добавления их в конец литерала регулярных выражений, либо путем передачи их в конструктор RegExp. Например, /cat/i, соответствующее всех вхождениям слова “cat” независимо от регистра и RegExp("cat", 'i') будут работать одинаково.

Полезные методы работы с регулярными выражениями в JavaScript

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

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

test() – проверяет, содержит ли основная строка подстроку, которая соответствует шаблону, заданному данным регулярным выражением. При успешном совпадении метод возвращает true, в противном случае - false.

JavaScript

	var textA = 'I like APPles very much';
	var textB = 'I like APPles';
	var regexOne = /apples$/i 
	// вернет false
	console.log(regexOne.test(textA)); 
	// вернет true
	console.log(regexOne.test(textB));

В приведённом выше примере приведено регулярное выражение, предназначенное для поиска слова “apples” в случае, если оно расположено в конце строки. Поэтому в первом случае метод вернет false.

search() – проверяет, содержит ли основная строка подстроку, которая соответствует шаблону, заданному данным регулярным выражением. Метод возвращает индекс совпадения при успехе и -1 в противном случае.

JavaScript

	var textA = 'I like APPles very much';
	var regexOne = /apples/;
	var regexTwo = /apples/i; 
	// Результат: -1
	console.log(textA.search(regexOne)); 
	// Результат: 7
	console.log(textA.search(regexTwo));

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

match() – осуществляет поиск подстроки в основной строке. Подстрока должна соответствовать шаблону, заданному данным регулярным выражением. Если используется флаг g, то несколько совпадений будут возвращены в виде массива.

JavaScript

	var textA = 'All I see here are apples, APPles and apPleS';
	var regexOne = /apples/gi;
	 
	// Результат: [ "apples", "APPles", "apPleS" ]
	console.log(textA.match(regexOne));

exec() – производит поиск подстроки в основной строке. В случае, если подстрока соответствует шаблону, заданному данным регулярным выражением, возвращает массив с результатами или null. В свойстве input хранится оригинальная строка

JavaScript

	var textA = 'Do you like apples?';
	var regexOne = /apples/; 
	// Результат: apples
	console.log(regexOne.exec(textA)[0]);
	 
	// Результат : Do you like apples?
	console.log(regexOne.exec(textA).input);

replace() – ищет подстроку, соответствующую заданному шаблону и заменяет ее на предоставленную заменяющую строку.

JavaScript

	var textA = 'Do you like aPPles?';
	var regexOne = /apples/i
	 
	// Результат: Do you like mangoes?
	console.log(textA.replace(regexOne, 'mangoes'));

split() – Этот метод позволит вам разбить основную строку на подстроки на основе разделителя, представленного в виде регулярного выражения.

JavaScript

	var textA = 'This 593 string will be brok294en at places where d1gits are.';
	var regexOne = /\d+/g
	 
	// Результат : [ "This ", " string will be brok", "en at places where d", "gits are." ] 
	console.log(textA.split(regexOne))

Заключение

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

Если после прочтения приведённых выше статей вы все еще путаетесь в регулярных выражениях, советуем вам продолжить практиковаться на примерах того, как другие люди придумывают регулярные выражения.

Оригинал статьи: https://code.tutsplus.com/tutorials/a-simple-regex-cheat-sheet--cms-31278/

Перевод: Земсков Матвей

Прочитано 29080 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх