Это базовый праймер на мощном инструменте программирования – регулярные выражения.
Регулярные выражения (регуляция) являются мощным способом описания шаблонов в строковых данных. В JavaScript регулярные выражения – Объекты Чтобы найти закономерности комбинаций ЧАР в струнах. Некоторые типичные варианты использования регулярных выражений подтверждают строку с шаблоном, поиск в строке, замените подстроки в строке, извлеките некоторую метанулую информацию из строки.
Тем не менее, сначала (а иногда и даже после сотнего) взгляда, регулярность выглядит сложной и пугающей. До сих пор я пытался сойти с рук, просто понимая концепцию и использование режима – в конце концов, как только я узнал, что хочу использовать Regex, я мог искать синтаксис, чтобы взломать все, что я хотел. Это работает большую часть времени.
Есть две проблемы с этим процессом, хотя – я) Это трудоемкий, ii) это не практичный способ, когда деконструируя регулярность (в коде других).
Итак, я, наконец, решил погрузиться в регуляцию с выраженной целью демистификации режима, и это моя документация.
Некоторые методы режима и строки
Методы коррекса выходят за рамки этой статьи. Однако, поскольку я бы использовал некоторые методы для демонстрации концепций, я начинаю с формата и использования функций JavaScript.
тест()
Метод test () выполняет поиск совпадения между регулярным выражением и указанной строкой. Возвращает Верно или ЛОЖЬ .
var str = "This is an example" var regex = /exam/; console.log(regex.test(str)) // true
соответствие()
Есть метод строки. Он находит матчи для regexp в строке и возвращает массив матчей.
var str = "This is a test to test match method"; var regex =/ test/ console.log(str.match(regex)); // [ " test" ]
Чтобы найти все совпадения, мы используем флаг G (Global)
var str = "This is a test to test match method"; var regex =/test/g console.log(str.match(regex)); // [ "test", "test" ]
В случае отсутствия совпадений, NULL возвращается (и не пустой массив. Важно помнить при применении методов массива).
var str = "This is a test" ; console.log(str.match(/hello/)); // null
(В этих функциях есть нечто большее – но опять же, из -за объема этой статьи)
Конструктор
Есть два способа построить регулярное выражение
Использование конструктора REGEXP
Используя литературу регулярного выражения, которая состоит из рисунка, заключенной между чертами (черты похожи на цитаты для строк -они говорят Javscript, что это регулярное выражение)
«Флаги» не являются обязательными, и я в ближайшее время буду обсуждать их.
Разница между двумя методами
Они оба создают Regexp объект и вернет те же результаты. Есть одно отличие:
Literal Regex составляется при загрузке сценария, в то время как функция конструктора обеспечивает компиляцию времени выполнения регулярного выражения.
Это следует, так это то, что литералы корзины могут быть только статичными, то есть мы знаем точные шаблоны при написании кода. Они не могут быть созданы из динамически сгенерированной строки. Пример: желание использовать пользовательский ввод в качестве регулярного выражения.
Для экспрессии динамического резервуара мы используем метод конструктора REGEXP
var filter= "star";
var re = new RegExp(`${filter}`);
var str = "Twinkle twinkle little star"
console.log(str.match(re));
// [ star]
Флаги
Флаги – это дополнительные параметры, которые могут быть добавлены в регулярное выражение, чтобы повлиять на его соответствующее поведение. Есть шесть флагов, которые изменяют поиск по -разному
- Я: игнорирует корпус (/e/я буду сопоставить как «E», так и «E»)
- g: Глобальный поиск, возвращающий все совпадения для данного выражения внутри строки – без нее возвращается только первый матч
Другие флаги (M S, U, Y используются редко, а некоторые требуют понимания некоторых передовых концепций. Итак, это осталось вне этой статьи. Этот урок CodeGauge Погружаются глубоко в флаги.
Эти флаги могут использоваться отдельно или вместе в любом порядке.
var str = "Hello, hello"; console.log(str.match(/he/gi) //Array(2)[ "He","he"] ]
Регулярное схема выражения
Буквальные персонажи
Самое простое регулярное выражение – это серия букв и цифр, которые не имеют особого значения. Есть совпадение только в том случае, если есть точно Эта последовательность символов в строке, которую он ищет, то есть, это «буквальный» матч.
Простые шаблоны построены из символов, для которых вы хотите найти прямое совпадение. Например, шаблон/ABC/совпадает со комбинациями символов в строках только тогда, когда происходит точная последовательность «ABC» (все символы вместе и в таком порядке).
console.log(/abc/.test("**abc**")); //true
console.log(/abc/.test("I am learning my **abc**s'")); //true
console.log(/abc/.test("The c**ab c**ollided")); //false
Но это также можно сделать с Indexof Анкет Зачем нам нужен резиденция?
Что ж, regex в основном используется, когда мы хотим для сложных или «менее буквальных» совпадений (например, шаблон даты – мы не хотим соответствовать конкретной дате, просто проверьте формат). Для этого мы используем Metacharacters Анкет
Особые (мета) персонажи и убегание
Metacharacter – это персонаж, который имеет особое значение (вместо буквального значения) во время обработки шаблонов. Мы используем эти специальные символы в регулярных выражениях, чтобы превратить буквальные символы в мощные выражения.
В JavaScript специальные символы – Backslash \ , каретка ^ , доллар знак $ , период или точка Анкет , вертикальный бар | , вопросительный знак ? , звездочка * , плюс знак + , открытие скобок ( , закрытие скобок ) , первые квадратные кронштейны [ . Некоторые любят вьющиеся скобки { Имейте специальные символы при использовании с закрытием Curly Cracket } также имеют особое значение.
Мы пройдем каждый из них вовремя. До этого – сбежать.
Что если мы хотим найти «буквальный матч» для одного из этих специальных персонажей? (Пример: найти буквальный матч для “^”?
Для этого мы используем еще один метахарактер – Backslash. Приготовление \ к специальному персонажу заставляет его рассматриваться как буквальный характер.
console.log/b^2/.test('a^2 + b^2 - C*3')); //false
console.log(/b\^2/.test('a^2 + b^2 - C*3')); //true
console.log/b^2/.test('a^2 + b^2 - C*3')); //false
console.log(/b\^2/.test('a^2 + b^2 - C*3')); //true
Группы и диапазоны
Несколько персонажей или классов персонажей внутри квадратных скобок […] означает, что мы хотим «искать любого из этих персонажей»
Например, [AE] будет соответствовать «a» или ‘E’
console.log(/[ae]/.test("par")); //true
console.log(/[ae]/.test("per")); //true
console.log(/[ae]/.test("por")); //false
Мы можем иметь квадратный кронштейн в рамках более крупного выражения в области режима
console.log(/b[ae]r/.test("bard")); //true
console.log(/b[ae]r/.test("bread")); //false
В квадратных скобках дефис ( - ) между двумя символами может использоваться для обозначения диапазона символов (где упорядочение определяется номером Unicode символа).
Пример: [0-9] будет соответствовать любому персонажу между 0 и 9
console.log(/[0-9]/.test("for 4 years")); //true
Ряд общих групп персонажей имеют свои встроенные ярлыки в форме классы персонажа Анкет
Классы персонажа
Классы персонажей являются сокращением для определенных наборов символов.
| Любой цифровой символ (от 0 до 9) | \d |
| НЕИСТИГИТ: любой символ, кроме \ d | \D |
| Любой буквенно -цифровой характер из основного латинского алфавита (включая цифры), включая подчеркивание | \w |
| Неуверенный характер: что угодно, кроме \ w. Пример: нелатиновая буква (%и т. Д.) Или пространство | \W |
| Один символ белого пространства, включая пространство, вкладку, подачу формы, линейный подача и другие пространства Unicode | \s |
| НЕКОВЕРКИ: любой символ, кроме \ s, например, письмо | \S |
Как мы можем отметить: для каждого класса персонажа существует «обратный класс», обозначенный одной и той же буквой, но вышел.
Помимо этого, есть класс персонажей, чтобы поддержать определенные не печатные символы
| Соответствует горизонтальной вкладке | \t |
| Соответствует возврату кареты | \r |
| Спички LineFeed | \n |
| Соответствует вертикальной вкладке | \v |
| Соответствует кормлению формы | \f |
| Сопоставляет символ NUL (не следуйте за этим с другой цифрой) | \0 |
| Соответствует обратному пространству | [\b] |
Классы персонажей могут быть написаны последовательно для создания сложных шаблонов. Пример, чтобы проверить формат времени в HH: MM, регулярное выражение – ‘\ d \ d: \ d \ d’ (пока мы не проверяем достоверность ввода, то есть 72:80 также является достоверным временем для наши цели)
console.log(/\d\d:\d\d/.test("2:25")); //false
console.log(/\d\d:\d\d/.test("02:25")); //true
Якоря
Якоря в регулярных выражениях не соответствуют ни одному персонажу. Вместо этого они соответствуют позиции до или после персонажей. Они могут быть использованы, чтобы «закрепить» матч режима в определенной позиции.
- Карет (
^) соответствует позиции Перед первым персонажем В строке -i.e. Регулярное выражение, которое следует, должно быть в начале тестовой строки. - Доллар (
$) соответствует положению правильно После последнего персонажа В строке -i.e. Регулярное выражение, которое предшествует, должно быть в конце тестовой строки
console.log(/^Jack/.test("Jack and Jill went up the hill")); //true
console.log(/^hill/.test("Jack and Jill went up the hill")); //false
console.log(/hill$/.test("Jack and Jill went up the hill")); //true
console.log(/Jack$/.test("Jack and Jill went up the hill")); //false
Оба якоря вместе ^... $ часто используется, чтобы проверить, соответствует ли строка полностью шаблону.
Возвращаясь к примеру нашего времени:
console.log(/\d\d:\d\d/.test("02:25")); //true
console.log(/\d\d:\d\d/.test("02:225")); //true
console.log(/^\d\d:\d\d/.test("02:225")); //true
console.log(/\d\d:\d\d$/.test("102:225")); //true
console.log(/^\d\d:\d\d$/.test("102:25")); //false
console.log(/^\d\d:\d\d$/.test("02:225")); //false
В многослойном режиме (с флагом ‘M’), ^ и $ совпадают не только в начале и в конце строки, но и в начале/конце строки.
Помимо границ строк, мы также можем проверить границу слова позиции в строке. Есть три разных позиции, которые считаются границами слов:
- В String Start, если первый строковый символ – это слово «символ»
\ w - Между двумя символами в строке, где один из символов слова
\wа другой не - В конце строки, если последняя строковая символ – это слово символ
\ w
console.log(/hell/i.test(str)) //true console.log(/hell\b/i.test(str)) //false console.log(/hello\b/i.test(str)) //true
Квантификаторы
Квантовы используются для обработки повторных шаблонов в регулярных выражениях. Например, если мы хотим проверить на 10-значный номер, необходимо писать /\ d \ d \ d \ d \ d \ d \ d \ d \ d \ d/ Кажется ужасным – как насчет 100 -значного числа?
С помощью квантификаторов мы можем указать, сколько экземпляров персонажа, группы или класса символов требуется. Квантификатор добавляется сразу после символа, который необходимо повторить, и применяется только к этому персонаж Анкет Например: в /a+/ Квантификатор ‘+’ относится к символу ‘a’, в /cat+/ , «+» применим к «t», а не к слову «кошка»
- {n} – соответствует точно “n” случаи
- {n, m} – совпадает как минимум n ocdustrances и в большинстве случаев M (n
- {n,} – совпадает, по крайней мере, «n».
- + – соответствует 1 или более раз
- * – совпадает 0 или более раз
- ? – Соответствует 0 или 1 раза. Другими словами, это делает предыдущий токен необязательным
Давайте вернемся к примеру времени и упростим его с помощью квантификаторов. Мы хотим иметь время в формате HH: MM или H: MM (примечание ^ и $ не влияют квантификаторы)
var re = /^\d+:\d{2}$/
console.log(re.test("02:25")); //true
console.log(re.test("2:25")); //true
console.log(re.test("102:25")); //false
console.log(re.test("02:225")); //false
Давайте попробуем что -нибудь немного сложнее – давайте посмотрим, является ли строка элементом HTML – мы проверим на открытие и закрытие тега (пока не рассматриваем атрибуты). У шаблона будет один или несколько буквенного тега между ‘<‘ и ‘>’ ‘, за которым следует дополнительное текст, а затем закрытие тегов
var re = /<[a-z][a-z0-6]*>[\w\W]+<\/[a-z][a-z0-6]*>/i;
console.log(re.test('Hello World!
')); //true
console.log(re.test('Hello World!')); //false
console.log(re.test('Hello World!
')); //false
console.log(re.test('Hello World!')); //false
Группа
Часть шаблона может быть заключена в скобки () Анкет Это называется «группой захвата». Он считается единственным элементом, что касается операторов, следующих за ним.
console.log(/(java)/.test('javascript')) //true
console.log(/(java)/.test('javscript')) //false
Если мы поместим квантификатор после скобок, он применяется к скобкам в целом.
console.log(/(la)+/.test('lalalala')); //true
Отрицание
Для тех случаев, когда мы Не Хотим соответствовать персонажу, мы создаем отрицательный или дополненный набор символов. Для отрицания также используем комбинацию [] и ^ специальные символы. [^xyz] означает, что он соответствует всему, что не заключено в скобки. (Примечание: в якорях ^ это снаружи кронштейны).
console.log(/ello/.test('hello')); //true
console.log(/[^h]ello/.test('hello')); //false
console.log(/[^h]ello/.test('cello')); //true
Мы также можем сделать это для слов:
console.log(/[^(password)\w+]/.test('password1234')); //false
Условные (Lookahead и Lookbehind)
Иногда нам нужно найти только те совпадения для шаблона, которые (или нет) следовали или (или нет), которым предшествует другой шаблон.
| Соответствует “x” только если “x” сопровождается “y” | |
| Соответствует “x” Только если “x” не сопровождается “y” | x (?! Y) |
| Соответствует “x” только если “x” предшествует “y” | |
| Соответствует “x” Только если “x” не предшествует “y” | (? |
var str = "apple mango pineApples grape Grapefruit"; console.log(str.match(/grape(?=(fruit))/gi)); // [ "Grape"] console.log(str.match(/grape(?!(fruit))/gi)); // [ "grape"] console.log(str.match(/(?<=(pine))apple/gi)); // [ "apple"] console.log(str.match(/(?
Чередование
Чередование – это просто еще одно слово для логического или, т.е. совпадать с тем или иным. Ранее обсуждалось [] был для одиночного персонажа (из нескольких возможных символов). Чередование состоит в том, чтобы соответствовать одному регулярному выражению из нескольких возможных регулярных выражений. Это обозначено символом трубы ( | ).
Пример: с /(ABC \ def)/ , мы ищем спички для “ABC” или “def ‘
console.log(/\b(apple|mango)\b/.test('I like mango')) //true
console.log(/\b(apple|mango)\b/.test('I like apple')) //true
Мы можем объединить/гнездо с другими вещами, которые мы научились, чтобы создать более сложные узоры
console.log(/\b((pine)?apple|mango)\b/.test('I like pineapple')) //true
Вот и все для этой статьи. Это просто введение; Есть несколько концепций, которые можно понять, которые могут помочь стать более опытными в корпорации – например, жадные и ленивые квантификаторы, обратные секции, более продвинутые условные условия и т. Д. Javascript.info и Eloquentjavascript два хороших места для начала.
Оригинал: “https://dev.to/poulamic/just-enough-regex-30dj”