Регулярные выражения в JavaScript часть 1 (replace)

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

Типичная жизненная ситуация:
У программиста была одна проблема. Он решил эту проблему с помощью регулярного выражения. Теперь у программиста есть две проблемы!
Регулярные выражения в JavaScript лучше всего начать изучать с метода replace(X, Y). Этот метод заменяет часть строки на строку Y, используя регулярное выражение X. Попробуем продемонстрировать на примере:
var a = 'Тише, мыши, кот на крыше';
console.log( a.replace('ш', 'Ш') );
console.log( a.replace(/ш/g, 'Ш') );
Символы слеша в примере "/.../" называют ограничителями регулярных выражений в JavaScript. После ограничителя идёт модификаторы "g", который указывают на глобальный поиск. То есть поиск и замена продолжатся даже после первого удачного совпадения. Теперь запустим код и проверим результат. Получится две строки. В одной сделана только одна замена, а во второй заменены все найденные вхождения:
ТиШе, мыши, кот на крыше
ТиШе, мыШи, кот на крыШе
Обратите внимание, что замена с помощью replace чувствительна к регистру. Чтобы сделать регистронезависимую замену (заменять и заглавные и строчные), можно поставить модификатор "i". Используем его вместе с модификатором "g" одновременно:
var a = 'Тише, мыши, кот на крыше';
console.log( a.replace(/Т/gi, 'М') );
Результат выполнения такого кода будет таким:
Мише, мыши, коМ на крыше
Сила регулярных выражений в том, что в искомой строке можно задавать символы-команды. Приведём пример: буквы и цифры внутри регулярного выражения будут искаться и заменяться как есть, но символ точки "." будет восприниматься как любой символ. То есть:
var a = 'Тише, мыши, кот на крыше';
console.log( a.replace(/м.ш./gi, 'МЫШИ') );
console.log( a.replace(/к...е/gi, 'сыре') );
Получим результат:
Тише, МЫШИ, кот на крыше
Тише, мыши, кот на сыре

Операторы повторения

Бывают ситуации, когда в регулярном выражении необходимо указать на повторяющийся символ. Чтобы не писать этот символ несколько раз, можно использовать один из операторов повторения:
  • + - символ повторяется один или более раз
  • * - символ повторяется ноль или более раз
  • ? - символ повторяется ноль или один раз. То есть может присутствовать или нет
Эти операторы ставятся после символа, который повторяется. Можно ставить эти операторы и после символ-команд, к примеру, точки ".", которая обозначает любой символ.Приведём примеры их использования:
var a = 'Тише, мыши, кот на крыше';
console.log( a.replace(/Т.+и/gi, 'Осторожно') );
В результате выполнения такого кода получим:
Осторожно, кот на крыше

Ограничение жадности

Регулярное выражение захватывает максимально возможное количество символов. Поэтому результат может быть неожиданным. К примеру, предположим, что нам надо заменить в строке "Тише, мыши, кот на крыше" слово "Тише" на "Громче". Для этого используем выражение:
var a = 'Тише, мыши, кот на крыше';
console.log( a.replace(/Т.+е/, 'Громче') );
Может показаться, что выражение сработает правильно. Но по факту оно найдёт букву "Т" в начале строки и букву "е" не в конце первого слова, а в конце всей строки. Результат получится такой:
Громче
Чтобы этого не происходило, необходимо ограничить жадность регулярного выражения. Для этого необходимо после оператора повторения (звёздочки "*" или плюса "+") поставить знак вопроса "?", чтобы они перестали быть такими жадными.
var a = 'Тише, мыши, кот на крыше';
console.log( a.replace(/Т.+?е/, 'Громче') );
Теперь результат будет такой, какой мы ожидали ранее:
Громче, мыши, кот на крыше
Ограничивать жадность можно всем оператором повторения. В том числе самому "?", делая так: "??".

Группирующие круглые скобки

Как было сказано ранее, операторы повторения работают только на символ, который стоит до них. Если же необходимо применить оператор повторения на несколько символов, то необходимо поставить скобки. Приведём пример:
var a = 'Тише, мыши, кот на крыше';
console.log( a.replace(/(ыш)+/g, '!') );
Из кода видно, что оператор повторения будет применяться к двум символам, стоящим в круглых скобках - (ыш). Результат выполнения такого кода:
Тише, м!и, кот на кр!е

Квадратные скобки

Существуют квадратные скобки. Если круглые являются "группирующими", или в терминах логики они делают соединение "и", то квадратные скобки - это логическое "или". Приведём пример:
var a = 'Тише, мыши, кот на крыше';
console.log( a.replace(/[ншр]+/g, '!') );
В результате выполнения этого кода все буквы "н", "ш", "р", которые стоят в квадратных скобках [ншр] будут заменены на восклицательный знак "!".
Ти!е, мы!и, кот !а к!ы!е
Существует ещё возможность сделать отрицание в квадратных скобках. Тогда будут заменены все символы, которые в них не попали. Это делается с помощью значка возведения в степень "^":
var a = 'Тише, мыши, кот на крыше';
console.log( a.replace(/[^ншр]+/g, '!') );
Результат такой:
!ш!ш!н!р!ш!
В квадратных скобках можно задавать не только символы отдельно, но и целые диапазоны:
  • [а-я] - все строчные буквы
  • [а-д] - строчные буквы от "а" до "д": а, б, в, г, д
  • [а-яА-Я] - все строчные и заглавные буквы
  • [0-9] - все цифры
  • [4-7] - цифры: 4, 5, 6, 7
Есть другой способ сделать логику "или". Для этого существует символ вертикальной черты |. Попробуем использовать его:
var a = 'Тише, мыши, кот на крыше';
console.log( a.replace(/н|ш|р/g, '!') );
Результат будет такой:
Ти!е, мы!и, кот !а к!ы!е

Экранировка спецсимволов

Бывают ситуации, когда в регулярном выражении необходимо использовать спецсимвол.
Спецсимволы:
$ ^ . * + ? \ { } [ ] ( ) |

Не являются спецсимволами:
@ : , ' " ; - _ = < > % # ~ `& ! /
К примеру, необходимо заменить все знаки "+" в строке. Но в регулярном выражении "+" является оператором повторения. Чтобы снять с него все функции и сделать простым символом, как букву или цифру, необходимо поставить перед ним знак падающего слеша "\", чтобы получилось "\+":
var a = 'Мышь + сыр';
console.log( a.replace(/\+/g, 'плюс') );
В таком случае говорят, что знак "+" экранирован, поэтому не воспринимается как спецсимвол. Резуьтат будет таким:
Мышь плюс сыр
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, покупка SSL сертификатов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: