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

Символьные классы

Символьные классы — это своеобразные сокращения для разных типов символов. К примеру, есть свои классы для букв, цифр, пробелов и т. д.

/* Символьный класс - Значение */. - любой символ, кроме первой строки\d - одноразрядное число (то же, что и )\w - отдельный буквенно-числовой словообразующий символ из латинского алфавита, включая подчёркивание (то же, что и )\D - отдельный нечисловой символ (то же, что и)\W - отдельный несловообразующий символ из латинского алфавита (то же, что и )\S - отдельный символ, который не является разделителем (то же, что и ).

Примеры:

// . - любой символ, кроме первой строкиconst myPattern = /./console.log(myPattern.test(''))// falseconsole.log(myPattern.test('word'))// trueconsole.log(myPattern.test('9'))// true// \d - одноразрядное числоconst myPattern = /\d/console.log(myPattern.test('3'))// trueconsole.log(myPattern.test('word'))// false// \w - отдельный буквенно-числовой словообразующий символconst myPattern = /\w/console.log(myPattern.test(''))// falseconsole.log(myPattern.test('word'))// trueconsole.log(myPattern.test('9'))// true// \s - отдельный символ разделителяconst myPattern = /\s/console.log(myPattern.test(''))// falseconsole.log(myPattern.test(' '))// trueconsole.log(myPattern.test('foo'))// false// \D - отдельный нечисловой символconst myPattern = /\D/console.log(myPattern.test('Worm'))// trueconsole.log(myPattern.test('1'))// false// \W - отдельный несловообразующий символconst myPattern = /\W/console.log(myPattern.test('Worm'))// falseconsole.log(myPattern.test('1'))// falseconsole.log(myPattern.test('*'))// trueconsole.log(myPattern.test(' '))// true// \S - отдельный символ, который не является разделителемconst myPattern = /\S/console.log(myPattern.test('clap'))// trueconsole.log(myPattern.test(''))// falseconsole.log(myPattern.test('-'))// true

Заметки о методах

Для работы с регулярными выражениями используется семь методов. Начнем разбор по порядку.

Search ()

Используется для нахождения позиции вхождения первого совпадения.

1
2
3
4
5
6

<script>
var regExp = /рыб/gi;
var text = "Покупайте речную рыбу!";
var myArray = text.search(regExp );
alert(myArray); //Ответ: 17
</script>

Match ()

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

1
2
3
4
5
6
7
8

<script>
var regExp = /12.02/;
var text = "11.02 - Концерт. 12.02 - Мастер-класс.";
var myArray = text.match(regExp );
alert( myArray );
alert( myArray.input ); //11.02 - Концерт. 12.02 - Мастер-класс.
alert( myArray.index ); //17
</script>

Split ()

Как и в некоторых других языках программирования, метод Split () разбивает значение строковой переменной на подстроки по заданному разделителю.

1
2
3
4

<script>
var text = "Пусть все будет хорошо";
alert(text.split(' ')); //Пусть,все,будет,хорошо
</script>

В качестве разделителя можно передавать как строковое значение, так и регэксп.

Replace ()

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

1
2
3
4

<script>
var text = "Ты пробежал 3 км за 13 и 25 минут.";
alert( text.replace( / и /g, "," )); // Ты пробежал 3 км за 13,25 минут
</script>

Exec ()

До этого все методы принадлежали к классу String. А оставшиеся два предоставляются классом RegExp.

Итак, текущий метод является дополнением к первым двум описанным методам. Он также ищет все вхождения и еще скобочные группы. Без указания флага g exec () работает, как match (). В противном случае совпадение запоминается, а его позиция записывается в lastIndex.

Последующий поиск продолжается с установленной позиции. Если далее совпадений больше не было, то lastIndex сбрасывается в 0.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

  <script>
    var str = 'Сорок сорок сидели на трубе';
 
    var expresion = /сорок/ig;
    var res;
    alert( "lastIndex: " + expresion.lastIndex );
 
    while (res = expresion.exec(str)) {
      alert( 'Найдено: ' + res + ' на позиции: ' + res.index );
      alert( 'А теперь lastIndex равен: ' + expresion.lastIndex );
    }
 
    alert( 'Под конец lastIndex сбрасывается в: ' + expresion.lastIndex );
  </script>

Test ()

Данный инструмент проверяет, а есть ли хоть один результат совпадения строк. Если есть, то возвращает булево значение true, иначе – false.

1
2
3
4

<script>
var expresion  = /крас/gi;
alert( expresion.test("Ах, какая красна девица! красавица!")); //true
</script>

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

 
Прочитано: 253 раз

Работа с регулярными выражениями

В JavaScript регулярные выражения используются в методах: exec, test, match, search, replace, split.

Методы, которые используют регулярные выражения

Методы test и search позволяют узнать, есть ли в строке соответствия шаблону регулярного выражения. Для получения более полной информации используют методы exec и match.

Приведем в пример поиск совпадения в строке с использованием метода exec. Скрипт выглядит так:

var myRe = /d(b+)d/g;
var myArray = myRe.exec("btbbndddpe")

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

Результаты выполнения регулярного выражения

Жадность

Это не совсем особенность, скорее фича, но все же достойная отдельного абзаца.

Все регулярные выражения в javascript – жадные. То есть, выражение старается отхватить как можно больший кусок строки.

Например, мы хотим заменить все открывающие тэги

На что и почему – не так важно

При запуске вы увидите, что заменяется не открывающий тэг, а вся ссылка, выражение матчит её от начала и до конца.

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

Последний символ точка-звёздочка не захватывает, т.к. иначе не будет совпадения.

Как вариант решения используют квадратные скобки: :

Это работает. Но самым удобным вариантом является переключение точки-звёздочки в нежадный режим. Это осуществляется простым добавлением знака «» после звёздочки.

В нежадном режиме точка-звёздочка пустит поиск дальше сразу, как только нашла совпадение:

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

В javascript это сделать нельзя… Вот такая особенность. А вопросительный знак после звёздочки рулит – честное слово.

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

Некоторые классы символов, такие как цифры, буквы и пробелы, используются так часто, что для них есть сокращенные имена. В следующей таблице перечислены эти предопределенные классы символов:

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

Статические свойства

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

Вот — одна интересная функция.

Запустите ее один раз, запомните результат — и запустите еще раз.

function rere() {
    var re1 = /0/, re2 = new RegExp('0')
    alert()
    re1.foo = 1
    re2.foo = 1
}

rere()

В зависимости от браузера, результат первого запуска может отличаться от второго. На текущий момент, это так для Firefox, Opera. При этом в Internet Explorer все нормально.

С виду функция создает две локальные переменные и не зависит от каких-то внешних факторов.

Почему же разный результат?

Ответ кроется в стандарте ECMAScript, :

Цитата…

A regular expression literal is an input element that is converted to a RegExp object (section 15.10)
when it is scanned. The object is created before evaluation of the containing program or function begins.
Evaluation of the literal produces a reference to that object; it does not create a new object.

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

В отличие от этого, всегда создает новый объект, поэтому и ведет себя в примере по-другому.

test()

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

// Синтаксис метода test()// /шаблон/.test('проверяемый текст')// Проверка строки,// когда test() не находит совпаденийmyPattern.test('There was a cat and dog in the house.')// false// Создание переменной,// которой присваивается текст для проверкиconst myString = 'The world of code.'// Создание шаблонаconst myPattern = /code/// Проверка текста с помощью шаблона,// когда test() находит совпадениеmyPattern.test(myString)// true

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

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

/* Квантификатор - Значение */* - 0 или более совпадений с предшествующим выражением.+ - 1 или более совпадений с предшествующим выражением.? - Предшествующее выражение необязательно (то есть совпадений 0 или 1).x{n} - "n" должно быть целым положительным числом. Количество вхождений предшествующего выражения "x" равно "n".x{n, } - "n" должно быть целым положительным числом. Количество вхождений предшествующего выражения "x" равно, как минимум, "n".x{n, m} - "n" может быть равно 0 или целому положительному числу. "m" - целое положительное число. Если "m" > "n", количество вхождений предшествующего выражения "x" равно минимум "n" и максимум "m".

Примеры:

// * - 0 или более совпадений с предшествующим выражениемconst myPattern = /bo*k/console.log(myPattern.test('b'))// falseconsole.log(myPattern.test('bk'))// trueconsole.log(myPattern.test('bok'))// true// + - 1 или более совпадений с предшествующим выражениемconst myPattern = /\d+/console.log(myPattern.test('word'))// falseconsole.log(myPattern.test(13))// true// ? - Предшествующее выражение необязательно, совпадений 0 или 1const myPattern = /foo?bar/console.log(myPattern.test('foobar'))// trueconsole.log(myPattern.test('fooobar'))// false// x{n} - Количество вхождений предшествующего выражения "x" равно "n"const myPattern = /bo{2}m/console.log(myPattern.test('bom'))// falseconsole.log(myPattern.test('boom'))// trueconsole.log(myPattern.test('booom'))// false// x{n, } - Количество вхождений предшествующего выражения "x" равно, как минимум, "n"const myPattern = /do{2,}r/console.log(myPattern.test('dor'))// falseconsole.log(myPattern.test('door'))// trueconsole.log(myPattern.test('dooor'))// true// x{n, m} - Количество вхождений предшествующего выражения "x" равно минимум "n" и максимум "m"const myPattern = /zo{1,3}m/console.log(myPattern.test('zom'))// falseconsole.log(myPattern.test('zoom'))// trueconsole.log(myPattern.test('zooom'))// trueconsole.log(myPattern.test('zoooom'))// false

Поиск совпадений: метод exec

Метод возвращает массив и ставит свойства регулярного выражения.
Если совпадений нет, то возвращается null.

Например,

// Найти одну d, за которой следует 1 или более b, за которыми одна d
// Запомнить найденные b и следующую за ними d
// Регистронезависимый поиск
var myRe = /d(b+)(d)/ig;
var myArray = myRe.exec("cdbBdbsbz");

В результате выполнения скрипта будут такие результаты:

Если в регулярном выражении включен флаг «», Вы можете вызывать метод много раз для поиска последовательных совпадений в той же строке. Когда Вы это делаете, поиск начинается на подстроке , с индекса . Например, вот такой скрипт:

var myRe = /ab*/g;
var str = "abbcdefabh";
while ((myArray = myRe.exec(str)) != null) {
	var msg = "Found " + myArray + ".  ";
	msg += "Next match starts at " + myRe.lastIndex;
	print(msg);
}

Этот скрипт выведет следующий текст:

Found abb. Next match starts at 3
Found ab. Next match starts at 9

В следующем примере функция выполняет поиск по input. Затем делается цикл по массиву, чтобы посмотреть, есть ли другие имена.

Предполагается, что все зарегистрированные имена находятся в массиве А:

var A = ;

function lookup(input)
{
  var firstName = /\w+/i.exec(input);
  if (!firstName)
  {
    print(input + " isn't a name!");
    return;
  }

  var count = 0;
  for (var i = 0; i < A.length; i++)
  {
    if (firstName.toLowerCase() == A.toLowerCase())
      count++;
  }
  var midstring = (count == 1) ? " other has " : " others have ";
  print("Thanks, " + count + midstring + "the same name!")
}

Статичные регэкспы

В некоторых реализациях javascript регэкспы, заданные коротким синтаксисом /…/ — статичны. То есть, такой объект создается один раз в некоторых реализациях JS, например в Firefox. В Chrome все ок.

function f() {
  // при многократных заходах в функцию объект один и тот же
  var re = /lalala/     
}

По стандарту эта возможность разрешена ES3, но запрещена ES5.

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

При поиске всех совпадений в цикле проблем не возникает, т.к. последняя итерация (неудачная) обнуляет .

Brackets

Brackets ([]) have a special meaning when used in the context of regular expressions. They are used to find a range of characters.

The ranges shown above are general; you could also use the range to match any decimal digit ranging from 0 through 3, or the range to match any lowercase character ranging from b through v.

Строковые методы, поиск и замена

Следующие методы работают с регулярными выражениями из строк.

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

Так что вызовы эквивалентны:

var i = str.search(/\s/)
var i = str.search("\\s")

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

var regText = "\\s"
var i = str.search(new RegExp(regText, "g"))

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

Если Вы хотите знать, подходит ли строка под регулярное выражение, используйте метод (аналогично RegExp-методы ). Чтобы получить больше информации, используйте более медленный метод (аналогичный методу ).

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

function testinput(re, str){
   if (str.search(re) != -1)
      midstring = " contains ";
   else
      midstring = " does not contain ";
   document.write (str + midstring + re.source);
}

Если в regexp нет флага , то возвращает тот же результат, что .

Если в regexp есть флаг , то возвращает массив со всеми совпадениями.

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

Если Вы хотите получить первый результат — попробуйте r.

В следующем примере используется, чтобы найти «Chapter», за которой следует 1 или более цифр, а затем цифры, разделенные точкой. В регулярном выражении есть флаг , так что регистр будет игнорироваться.

str = "For more information, see Chapter 3.4.5.1";
re = /chapter (\d+(\.\d)*)/i;
found = str.match(re);
alert(found);

Скрипт выдаст массив из совпадений:

• Chapter 3.4.5.1 — полностью совпавшая строка
• 3.4.5.1 — первая скобка
• .1 — внутренняя скобка

Следующий пример демонстрирует использование флагов глобального и регистронезависимого поиска с . Будут найдены все буквы от А до Е и от а до е, каждая — в отдельном элементе массива.

var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
var regexp = //gi;
var matches = str.match(regexp);
document.write(matches);

// matches = 

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

var newString = str.replace(regexp/substr, newSubStr/function)

Объект RegExp. Его вхождения будут заменены на значение, которое вернет параметр номер 2

Строка, которая будет заменена на .

Строка, которая заменяет подстроку из аргумента номер 1.

Функция, которая может быть вызвана для генерации новой подстроки (чтобы подставить ее вместо подстроки, полученной из аргумента 1).

Метод не меняет строку, на которой вызван, а просто возвращает новую, измененную строку.

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

Если первый аргумент — строка, то она не преобразуется в регулярное выражение, так что, например,

var ab = "a b".replace("\\s","..") // = "a b"

Вызов replace оставил строку без изменения, т.к искал не регулярное выражение , а строку «\s».

В строке замены могут быть такие спецсимволы:

Если Вы указываете вторым параметром функцию, то она выполняется при каждом совпадении.

В функции можно динамически генерировать и возвращать строку подстановки.

Первый параметр функции — найденная подстрока. Если первым аргументом является объект , то следующие параметров содержат совпадения из вложенных скобок. Последние два параметра — позиция в строке, на которой произошло совпадение и сама строка.

Например, следующий вызов возвратит XXzzzz — XX , zzzz.

function replacer(str, p1, p2, offset, s)
{
return str + " - " + p1 + " , " + p2;
}
var newString = "XXzzzz".replace(/(X*)(z*)/, replacer)

Как видите, тут две скобки в регулярном выражении, и потому в функции два параметра , .
Если бы были три скобки, то в функцию пришлось бы добавить параметр .

Следующая функция заменяет слова типа на :

function styleHyphenFormat(propertyName)
{
  function upperToHyphenLower(match)
  {
    return '-' + match.toLowerCase();
  }
  return propertyName.replace(//, upperToHyphenLower);
}

Поиск всех совпадений с группами: matchAll

является новым, может потребоваться полифил

Метод не поддерживается в старых браузерах.

Может потребоваться полифил, например https://github.com/ljharb/String.prototype.matchAll.

При поиске всех совпадений (флаг ) метод не возвращает скобочные группы.

Например, попробуем найти все теги в строке:

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

Для того, чтобы их получать, мы можем использовать метод .

Он был добавлен в язык JavaScript гораздо позже чем , как его «новая и улучшенная» версия.

Он, как и , ищет совпадения, но у него есть три отличия:

1. Он возвращает не массив, а перебираемый объект.
2. При поиске с флагом , он возвращает каждое совпадение в виде массива со скобочными группами.
3. Если совпадений нет, он возвращает не , а просто пустой перебираемый объект.

Например:

Как видите, первое отличие – очень важное, это демонстрирует строка. Мы не можем получить совпадение как , так как этот объект не является псевдомассивом

Его можно превратить в настоящий массив при помощи . Более подробно о псевдомассивах и перебираемых объектов мы говорили в главе Перебираемые объекты.

В явном преобразовании через нет необходимости, если мы перебираем результаты в цикле, вот так:

…Или используем деструктуризацию:

Каждое совпадение, возвращаемое , имеет тот же вид, что и при без флага : это массив с дополнительными свойствами (позиция совпадения) и (исходный текст):

Почему результат – перебираемый объект, а не обычный массив?

Зачем так сделано? Причина проста – для оптимизации.

При вызове движок JavaScript возвращает перебираемый объект, в котором ещё нет результатов. Поиск осуществляется по мере того, как мы запрашиваем результаты, например, в цикле.

Таким образом, будет найдено ровно столько результатов, сколько нам нужно.

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

Короткие обозначения

Для самых востребованных квантификаторов есть сокращённые формы записи:

Означает «один или более». То же самое, что и .

Например, находит числа (из одной или более цифр):

Означает «ноль или один». То же самое, что и . По сути, делает символ необязательным.

Например, шаблон найдёт после которого, возможно, следует , а затем .

Поэтому шаблон найдёт два варианта: и :

Означает «ноль или более». То же самое, что и . То есть символ может повторяться много раз или вообще отсутствовать.

Например, шаблон находит цифру и все нули за ней (их может быть много или ни одного):

Сравните это с (один или более):

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Специальные последовательности

Специальные последовательности упрощают написание часто используемых шаблонов. Вот список специальных последовательностей:

— Соответствует, если указанные символы находятся в начале строки.

— Соответствует, если указанные символы находятся в начале или в конце слова.

— противоположность . Соответствует, если указанные символы НЕ находятся в начале или конце слова.

— Соответствует любой десятичной цифре. Эквивалентно

— Соответствует любой не десятичной цифре. Эквивалентно

— Соответствует строкам, содержащим любой пробельный символ. Эквивалентно .

— Соответствует строкам, содержащим любой непробельный символ. Эквивалентно .

— Соответствует любому буквенно-цифровому символу (цифрам и алфавитам). Эквивалентно . Кстати, подчеркивание тоже считается буквенно-цифровым символом.

— Соответствует любому не буквенно-цифровому символу. Эквивалентно

— Соответствует, если указанные символы находятся в конце строки.

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

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

Регулярное выражение (оно же «регэксп», «регулярка» или просто «рег»), состоит из шаблона (также говорят «паттерн») и необязательных флагов.

Существует два синтаксиса для создания регулярного выражения.

«Длинный» синтаксис:

…И короткий синтаксис, использующий слеши :

Слеши говорят JavaScript о том, что это регулярное выражение. Они играют здесь ту же роль, что и кавычки для обозначения строк.

Регулярное выражение в обоих случаях является объектом встроенного класса .

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

Слеши используются, когда мы на момент написания кода точно знаем, каким будет регулярное выражение – и это большинство ситуаций. А – когда мы хотим создать регулярное выражение «на лету» из динамически сгенерированной строки, например:

Наборы и диапазоны

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

/* Набор или диапазон - Значение */ - любой один из символов в скобках. — любой символ, за исключением символов в скобках. - любой символ в диапазоне от "a" до "z". - любой символ не из диапазона от "a" до "z".(x) - "x", значение запоминается для дальнейшего использования.(?<name>x) - создание именованной скобочной группы, к которой можно обратиться по указанному имени.(?:x) - "x", значение не запоминается, поэтому совпадение невозможно извлечь из итогового массива элементов.

Примеры:

//  - Любой один из символов в скобках.const myPattern = //console.log(myPattern.test('aei'))// true (есть a, e, i)console.log(myPattern.test('form'))// false (нет a, e или i)//  - Любой символ, за исключением символов в скобках.const myPattern = //console.log(myPattern.test('aei'))// false (нет других символов, кроме a, e и i)console.log(myPattern.test('form'))// true (есть другие символы, кроме a, e и i)//  - Любой символ в диапазоне от "a" до "z".const myPattern = //console.log(myPattern.test('bcd'))// true (есть символы в диапазоне от 'b' до 'g')console.log(myPattern.test('jklm'))// false (нет символов в диапазоне от 'b' до 'g')//  - Любой символ не из диапазона от "a" до "z".const myPattern = //console.log(myPattern.test('bcd'))// false (нет других символов, кроме входящих в диапазон от 'b' до 'g')console.log(myPattern.test('jklm'))// true (есть другие символы, кроме входящих в диапазон от 'b' до 'g')// (x) - "x", значение запоминается для дальнейшего использования.const myPattern = /(na)da\1/console.log(myPattern.test('nadana'))// true - \1 запоминает и использует совпадение 'na' из первого выражения в скобках.console.log(myPattern.test('nada'))// false// (?<name>x) - Создание именованной скобочной группы, к которой можно обратиться по указанному имени.const myPattern = /(?<foo>is)/console.log(myPattern.test('Work is created.'))// trueconsole.log(myPattern.test('Just a text'))// false// (?:x) - "x", значение не запоминается.const myPattern = /(?:war)/console.log(myPattern.test('warsawwar'))// trueconsole.log(myPattern.test('arsaw'))// false

Поиск от заданной позиции

Можно заставить regexp.exec начать поиск с данной позиции, установив вручную lastIndex:

let str = 'A lot about JavaScript at https://javascript.info';

let regexp = /javascript/ig;
regexp.lastIndex = 30;

alert( regexp.exec(str).index ); // 34, поиск начинается с 30-й позиции

Флаг «y»

Флаг y значит, что поиск должен найти совпадение на позиции, указанной в свойстве regexp.lastIndex, и только там.

Другими словами, обычно поиск идет по всей строке: /javascript/ ищет подстроку “javascript”. Но когда JavaScript RegExp содержит флаг y, оно ищет только совпадение на позиции, указанной в regexp.lastIndex(по умолчанию — 0).

Например:

let str = "I love JavaScript!";

let reg = /javascript/iy;

alert( reg.lastIndex ); // 0 (по умолчанию)
alert( str.match(reg) ); // null, не найдено на позиции 0

reg.lastIndex = 7;
alert( str.match(reg) ); // JavaScript (это слово начинается на позиции 7)

// для любого другого индекса reg.lastIndex результат - null

Регулярное выражение /javascript/iy может быть найдено, только если установить reg.lastIndex=7, так как из-за флага y программа пытается найти его только в одном месте внутри строки — на позиции reg.lastIndex.

Так в чем же смысл? В производительности.

Флаг y отлично работает для парсеров – программ, которым нужно «читать» текст и строить в памяти синтаксическую структуру или производить на ее основании действия. Для этого мы двигаемся по тексту и применяем регулярные выражения, чтобы увидеть, что находится дальше: строка, число или что-то еще.

Флаг y позволяет применять регулярное выражение (или несколько одно за другим) именно на заданной позиции. И когда мы поймем, что там, то сможем двигаться дальше, шаг за шагом исследуя текст.

Без флага y регулярное выражение всегда ищет до конца текста, что занимает время, особенно если текст большой. Тогда наш парсер будет медленным. Флаг y — это то, что нужно в подобном случае.

Сравнение шаблонов с регулярным выражением

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

Символы, которым дается особое значение в регулярном выражении: . Вам нужно будет использовать обратную косую черту, если вы хотите использовать их буквально. Например, если вы использовать в регулярном выражении знак точка (), вам нужно писать Все остальные символы автоматически принимают свои буквальные значения.

В следующих разделах описаны различные параметры, доступные для формулирования шаблонов:

Правила написания шаблонов в JavaScript

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

Итак, flag – это инструмент для установки глобального или регистронезависимого поиска. В JS можно использовать четыре вида флага. При этом вы можете их прописывать как по отдельности, так и комбинировать в разном порядке и количестве. Хочу заметить, что от смены порядка результат выполнение не изменится.

Ну а теперь давайте рассмотрим первый простой пример для понимания происходящего. С помощью переменной regExp я проверяю, есть ли вхождение в text слова «вариант». При этом я хочу, чтобы вывелись все случаи вхождения без учета регистра.

1
2
3
4
5
6

<script>
var regExp = /вариант/gi;
var text = "Вариант 1. напишите стих, состоящий из четырех строк. Вариант 2. Допишите стих из варианта 1.";
var myArray = text.match(regExp );
alert(myArray);
</script>

Статичные регэкспы

В некоторых реализациях javascript регэкспы, заданные коротким синтаксисом /…/ — статичны. То есть, такой объект создается один раз в некоторых реализациях JS, например в Firefox. В Chrome все ок.

function f() {
  // при многократных заходах в функцию объект один и тот же
  var re = /lalala/     
}

По стандарту эта возможность разрешена ES3, но запрещена ES5.

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

При поиске всех совпадений в цикле проблем не возникает, т.к. последняя итерация (неудачная) обнуляет .