Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

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

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

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

Первая функция которую мы с вами рассмотрим будет касаться поиска подстроки:

var str = "Привет меня зовут Андрей мне 24 года и мой телефон +792932434432";
var phone = str.search(/\+7929[\d]{1,}/g);
console.log(phone);

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

Шаблон указывается между двух слешей /шаблон/g, g- надстройка(глобальный поиск ), алгоритмы написаний шаблонов регулярных выражений мы в этой статье рассматривать не будем. Ну да ладно.

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

Если к примеру мы изменим шаблон:

var str = "Привет меня зовут Андрей мне 24 года и мой телефон +792932434432";
var phone = str.search(/\+7921[\d]{1,}/g);
console.log(phone);

мы поменяли начальный код номера телефона на 921, как видите у нас в строке таких телефонов нет, поэтому метод search вернул нам -1. Как мы можем это использовать:

var str = "Привет меня зовут Андрей мне 24 года и мой телефон +792932434432";
var phone = str.search(/\+7929[\d]{1,}/g);
if(phone == -1){
    console.log('Результат не найден');
}else{
    console.log('Результат найден, индекс: ' + phone);
}

мы можем также проверить наличие подстроки в строке с помощью метода test:

var str = "Привет меня зовут Андрей мне 24 года и мой телефон +792932434432";
var phone = str.search(/\+7929[\d]{1,}/g);
if(/\+7929[\d]{1,}/g.test(str)){
    console.log('Результат найден, индекс: ' + phone);
}else{
console.log('Результат не найден');
}

здесь как видите в начале мы указываем шаблон регулярного выражения, затем метод test которому в качестве аргумента передаем строку. Результатом данного метода будет true или false, в зависимости есть ли совпадения или их нет.

Это все конечно прекрасно, но что если мы хотим получить саму подстроку?!

Для этого существует другой метод, match:

var str = "Привет меня зовут Андрей мне 24 года и мой телефон +792932434432";
var phone = str.match(/\+7929[\d]{1,}/g);
console.log(phone);

обратите внимание что данный метод возвращает нам массив, элементов которого является наша подстрока, если мы укажем так:

var str = "Привет меня зовут Андрей мне 24 года и  телефоны +792932434432, +7929435434353, +79293233423332";
var phone = str.match(/\+7929[\d]{1,}/g);
console.log(phone);

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

И могут возникнуть ситуации когда нам необходимо вернуть все подстроки и их позиции.

Для этого мы можем воспользоваться функцией exec:

var str = "Привет меня зовут Андрей мне 24 года и  телефоны +792932434432, +7929435434353, +79293233423332";
var reg = /\+7929[\d]{1,}/ig,
    res = '';
while (res = reg.exec(str)) {
    console.log( 'Найдено: ' + res[0] + ' на позиции:' + res.index );
}

как видите вначале мы указываем шаблон регулярного выражения, затем его метод exec аргументом которого является строка. И все это перебираем в цикле while.

Едем дальше. Для замены подстрок в javaScript существует метод replace:

var str = "Привет меня зовут Андрей мне 24 года и  телефоны +792932434432, +7929435434353, +79293233423332";
var res = str.replace(/\+7929/g,"+7921");
console.log(res);

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

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

С этим я думаю все понятно и далее мы рассмотрим метод split позволяющий нам по шаблону регулярного выражения разбивать строку на элементы массива:

var str = "Привет меня зовут Андрей мне 24 года и  телефоны +792932434432, +7929435434353, +79293233423332";
var res = str.split(/\s{1,}/g);
console.log(res);

как видите с помощью метода split() мы разбили нашу строку на слова которые обозначились элементами массива. В качестве разделителя в шаблоне регулярного выражения указав все пробелы.(пробел - \s)

Данный метод может принимать еще один параметр, а именно количество элементов массива которые мы хотим получить:

var str = "Привет меня зовут Андрей мне 24 года и  телефоны +792932434432, +7929435434353, +79293233423332";
    var res = str.split(/\s{1,}/g, 3);
    console.log(res);

выведет нам в консоль массив с тремя элементами, первыми словами.

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

Допустим мы хотим заменить 7929 на 7921 и мы уже это сегодня делали, только теперь в качестве шаблона будет обычная переменная:

var number =  "7929";
     str = "Привет меня зовут Андрей. Привет мне 24 года и  телефоны +792932434432, +7929435434353, +79293233423332, +7929212323";
    var res = str.replace(number,'7921');
    console.log(res);

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

var number = '7929';
    str = "Привет меня зовут Андрей. Привет мне 24 года и  телефоны +792932434432, +7929435434353, +79293233423332, +7929212323";
    var res = str.replace(new RegExp(number,'g'),'7921');
    console.log(res);

теперь все сработало как и положено, мы в объекте RegExp указали нашу переменную и в качестве второго аргумента флаг g - глобальный поиск по шаблону.

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

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

Я вам желаю удачи и успехов! Пока!

Оцените статью:

Статьи

Комментарии

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm