Первое знакомство с конструктором javascript regexp. Определяем правильность введенных данных на сайте

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

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

RegExp и его особенности

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

Шаблон регулярного выражения можно создать двумя способами: при помощи конструктора и литеральной записи. Для установки правил поиска в обоих вариантах нужно указать само регулярное выражение или его еще называют паттерном и после установить флаг. Ниже я привел общий вид двух записей.

Использование конструктора:

var expression = new RegExp (паттерн[, флаг]);

Использование литерального или сокращенного формата:

var expression = /паттерн/флаг;

Что же под собой подразумевает «флаг»? Этот параметр определяет способ поиска. Существует всего 3 варианта поиска, которые можно комбинировать межу собой или использовать сразу все вместе, при этом порядок из написания никак не влияет на результат.

Для усвоения этой части материала, я привел небольшой пример.

var regexp = /сад/gi;

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

Клад полезных инструментов

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

regexp.test (str)

Итак, начну с методов класса RegExp. Функция тест проверяет, а есть ли вообще хотя бы одно вхождение искомого параметра. Если есть, то возвращается true, иначе – false. Использование данного инструмента выглядит следующим образом:

1
2
3
4

var text = "Сажаем саженцы деревьев"; 
alert( /са/gi.test(text) ); //true
alert( /ку/gi.test(text) ); //false
regexp.exec(str)

regexp.exec (str)

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

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

1
2
3
4
5
6
7
8
9

var text = 'Сажаем много саженцев';
var expr = /са/gi;
var res;
alert( "lastIndex: " + expr.lastIndex );
while (res = expr.exec(text)) {
  alert( 'Совпало "' + res[0] + '" на позиции: ' + res.index );
  alert( 'lastIndex: ' + expr.lastIndex );
}
alert( 'lastIndex: ' + expr.lastIndex );

string.search (expr)

Вот мы переместились на методы, принадлежащие классу String. И первым разберем search.

Он функционирует также, как и функция regexp.exec () без указания флага “g”. Только вместо логических значений возвращает -1, если не было совпадений, иначе возвращается индекс.

var str = 'Давай позовем детей!';

alert ( str.search (/детей/i));

string.match (expr)

Данный метод своими особенностями несколько похож на expr.exec (str), а именно использованием глобального поиска.

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

1
2
3
4
5

var str = "754-33-11 \n 33-45-67";
var expr = str.match( /33/ );
document.writeln( expr[0] ); 
document.writeln( expr.index ); 
document.writeln( expr.input );

После запуска программы на экран будет выведено 3 результата. Первый параметр выводит совпадение – «33», второй отвечает за позицию – «4», а третий отображает текст, с которым сравнивался шаблон – «754-33-11 33-45-67».

Теперь я изменил вторую и третью строки:

var expr = str.match ( /33/g );

document.writeln ( expr );

В результате последние две строки будут пустыми (undefined), а вот третья в качестве ответа отобразит результат «33,33».

String.replace (expr, str)

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

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

var str = «754:33:11 \n 33:45:67»;

alert (str.replace (/:/g, «-»)) // Ответ: 754-33-11 33-45-67

Все о власти и влиянии символов

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

Для того чтобы оперировать такими возможностями, нужно знать специальные символы. Далее я структурировал весь материал о них в таблицу. Хочу заметить, что статья рассчитана на начинающих, так что в таблице занесены самые важные спецсимволы.

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

Пока-пока!

С уважением, Роман Чуешов