Альтернация (или) |

Альтернация – термин в регулярных выражениях, которому в русском языке соответствует слово «ИЛИ». Она обозначается символом вертикальной черты | и позволяет выбирать между вариантами.

Например, нам нужно найти языки программирования: HTML, PHP, Java и JavaScript.

Соответствующее регулярное выражение: html|php|java(script)?.

Пример использования:

var reg = /html|php|css|java(script)?/gi

var str = "Сначала появился HTML, затем CSS, потом JavaScript"

alert( str.match(reg) ) // 'HTML', 'CSS', 'JavaScript'

Мы уже знаем похожую вещь – квадратные скобки. Они позволяют выбирать между символами, например gr[ae]y найдёт gray, либо grey.

Альтернация работает уже не посимвольно, а на уровне фраз и подвыражений. Регэксп A|B|C обозначает поиск одного из выражений: A, B или C, причём в качестве выражений могут быть другие, сколь угодно сложные регэкспы.

Для указания границ альтернации используют скобки (...), например: before(XXX|YYY)after будет искать beforeXXXafter или beforeYYYafter.

Задачи

Найдите языки программирования

Существует много языков программирования, например Java, JavaScript, PHP, C, C++.

Напишите регулярное выражение, которое найдёт их все в строке «Java JavaScript PHP C++ C»

Сначала неправильный способ.

Если перечислить языки один за другим через |, то получится совсем не то:

var reg = /Java|JavaScript|PHP|C|C\+\+/g;

var str = "Java, JavaScript, PHP, C, C++";

alert( str.match(reg) ); // Java,Java,PHP,C,C

Как видно, движок регулярных выражений ищет альтернации в порядке их перечисления. То есть, он сначала смотрит, есть ли Java, а если нет – ищет JavaScript.

Естественно, при этом JavaScript не будет найдено никогда.

То же самое – с языками C и C++.

Есть два решения проблемы:

Поменять порядок, чтобы более длинное совпадение проверялось первым: JavaScript|Java|C\+\+|C|PHP.
Соединить длинный вариант с коротким: Java(Script)?|C(\+\+)?|PHP.

В действии:

var reg = /Java(Script)?|C(\+\+)?|PHP/g;

var str = "Java, JavaScript, PHP, C, C++";

alert( str.match(reg) ); // Java,JavaScript,PHP,C,C++

Найдите строки в кавычках

Найдите в тексте при помощи регэкспа строки в двойных кавычках "...".

В строке поддерживается экранирование при помощи слеша – примерно в таком же виде, как в обычных строках JavaScript. То есть, строка может содержать любые символы, экранированные слэшем, в частности: \", \n, и даже сам слэш в экранированном виде: \\.

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

Пример совпадающих строк:

          .. "test me" ..  (обычная строка)
.. "Скажи \"Привет\"!" ... (строка с кавычками внутри)
.. "\r\n\\" ..  (строка со спец. символами и слэшем внутри)
        

Заметим, что в JavaScript такие строки удобнее всего задавать в одинарных кавычках, и слеши придётся удвоить (в одинарных кавычках они являются экранирующими символами):

Пример задания тестовой строки в JavaScript:

var str = ' .. "test me" .. "Скажи \\"Привет\\"!" .. "\\r\\n\\\\" .. ';

// эта строка будет такой:
alert(str); //  .. "test me" .. "Скажи \"Привет\"!" .. "\r\n\\" ..

Решение задачи: /"(\\.|[^"\\])*"/g.

То есть:

Сначала ищем кавычку "
Затем, если далее слэш \\ (удвоение слэша – техническое, для вставки в регэксп, на самом деле там один слэш), то после него также подойдёт любой символ (точка).
Если не слэш, то берём любой символ, кроме кавычек (которые будут означать конец строки) и слэша (чтобы предотвратить одинокие слэши, сам по себе единственный слэш не нужен, он должен экранировать какой-то символ) [^"\\]
…И так жадно, до закрывающей кавычки.

В действии:

var re = /"(\\.|[^"\\])*"/g;
var str = '.. "test me" .. "Скажи \\"Привет\\"!" .. "\\r\\n\\\\" ..';

alert( str.match(re) ); // "test me","Скажи \"Привет\"!","\r\n\\"

Найдите тег style

Напишите регулярное выражение, которое будет искать в тексте тег <style>. Подходят как обычный тег <style>, так и вариант с атрибутами <style type="...">.

Но регулярное выражение не должно находить <styler>!

Использование:

          var re = ваш регэксп

alert( "<style> <styler> <style test>".match(re) ); // <style>, <style test>

Начало шаблона очевидно: <style.

А вот дальше… Мы не можем написать просто <style.*?>, так как <styler> удовлетворяет этому регэкспу.

Нужно уточнить его. После <style должен быть либо пробел, после которого может быть что-то ещё, либо закрытие тега.

На языке регэкспов: <style(>|\s.*?>).

В действии:

var re = /<style(>|\s.*?>)/g;

alert( "<style> <styler> <style test>".match(re) ); // <style>, <style test>

Карта учебника

Альтернация (или) |

Задачи

Найдите языки программирования

Найдите строки в кавычках

Найдите тег style

Комментарии

Раздел