Регулярные выражения | JavaScript

Исходный пример

Ёжик вышел из убежища под ёлкой к джипу "Берёзка".

Таёжник записал: "01.20.2000 года был ёж. Назвал "Серёжкой".

<div id="replace">
  <p><b>Ёж</b>ик вышел из уб<b>еж</b>ища под <b>ёл</b>кой к <b>дж</b>ипу "Бер<b>ёз</b>ка".
  <p>Та<b>ёж</b>ник записал: <code>"01.20.2000 года был <b>ёж</b>. Назвал "Сер<b>ёж</b>кой"</code>.
</div>

Флаги

символ описание пример
первый элемент в указанном регистре
i первый элемент без учёта регистра
g все вхождения в указанном регистре
gi все вхождения без учёта регистра
m многострочный режим, работает при объединении \n с ^ и/или $. Например, точки в конце каждого абзаца заменить на сердечки

Позиция

символ описание пример
^ первый элемент родителя
$ последний элемент родителя

Символы

символ описание пример
[\s\S] любой символ
. любой символ, кроме перевода строки
\n перевод строки
\s любой пробельный символ, в том числе перевод строк
\S любой символ, кроме пробела и перевода строки
[xyz] только перечисленные в квадратных скобках символы. Точку в квадратных скобках экранировать не нужно, то есть не [\.], а [.]. Зато нужно экранировать тире, то есть не [-], а [\-]. Через дефис указывается диапазон значений, например, [0-9] это тоже самое, что и [0123456789], [а-я] — все кириллические строчные буквы, [А-Я] — все кириллические заглавные буквы
[^xyz] любой символ, кроме перечисленных в квадратных скобках. Не путать с ^
\d только цифры, эквивалент [0-9]
\D не цифра, эквивалент [^0-9]
\ символы делает специальными, экранирует. Например, точку

Чередование и группирование

символ описание пример
() группировка и создание шаблона. Круглые скобки могут быть вложенными. $& — всё регулярное выражение; с $1 до $99 — часть регулярного выражения в скобках; $$ — символ $
(?:x) находит, но не запоминает x
x(?=y) запоминает х, если после него идёт y
x(?!y) запоминает все х, кроме того, после которого идёт y. Например, нужно заменить ё на ❤, но исключить то, за которым стоит ж
x|y запоминает или x, или y

Повторение

символ эквивалент описание пример
x{n} n повторений x
x{n,} n и более повторений x
x{n,k} с n до k повторений x
x? x{0,1} повторение x ноль или один раз.
x* x{0,} повторение x ноль или более раз.
x+ x{1,} повторение x один и более раз.

регулярное выражение описание пример
[\s\S]* Все повторения являются жадными, они захватывают как можно больше кода. Я ищу к ноль и более любых символов [\s\S]* букву т
[^xyz]* Я ищу к ноль и более любых символов кроме т [^т]* букву т
[\s\S]*? Не жадный режим. Я ищу к ноль и более любых символов до т включительно [\s\S]*?т

Примеры

описание пример
Как удалить пробелы из строки
Убрать из строки все кроме цифр
Как удалить все теги
Как удалить все теги, кроме b
Как удалить все теги, кроме тех, которые находятся внутри code
Как удалить указанные теги
Скрипт "Удаление определённых тегов с содержимым"
Как сделать замену всех тегов b на i
В code все теги показаны как текст, т.е. автоматом символы < > преобразуются в &lt; &gt;. Подробнее этот вопрос можно рассмотреть тут. А альтернативное решение тут.
Удалить всё после определённого тега, например, после второго b. Практическое применение.
Обрезать строку после определённого символа. На CSS.
Как округлить число до сотых или другого количества знаков после запятой. Старайтесь не использовать округление и десятичные числа, а также числа выше 2147483648 вообще (подробнее)
Как добавить элемент после третьего одноимённого тега. Практическое применение.
Скрипт для замены кавычек " на «». Поскольку replace меняет как видимый пользователю текст, так и код, то первыми скобками ((?:^|>)[^<]*) обязательно нужно запретить делать замену кавычек в тегах
в input можно писать только цифры. Допускается одна плавающая точка (она не может быть первым символом) и первый знак минус. Запрет на ввод букв
<input oninput="this.value = this.value.replace(/[^0-9\-.]|([0-9\-.]+)-|(\.[0-9]*)\.|(^-?0)0|^\./, '$1$2$3');" type="text" pattern="\-?\d+(\.\d{0,})?"/>
Найти по шаблону дату и разбить её на части
Разделить число на разряды Тут я сначала ставлю после каждого третьего числа пробел, а затем его убираю в дробной половине
в f t
наверх ↑

9 комментариев:

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

Буквально вчера тоже приспичило на своём форуме обработать все сообщения, чтобы "кавычки" заменялись на «ёлочки», дефисы, где надо — на тире, плюс ставились многоточия вместо "троеточий" и после предлогов и союзов ставились неразрывные пробелы. В общем, чтобы с точки зрения типографии текст был идеален :)

Из
> - Этот "труп" слишком хорошо двигается для своего состояния... - заявил Космыч.
Получил
> — Этот «труп» слишком хорошо двигается для своего состояния… — заявил Космыч.

Вся вереница замен заключается вот в таком коде:
http://snipt.org/ATfh5

Достаточно прикрепить сие творение к textarea, и можно получить инструмент для быстрой обработки статей для блога прямо в браузере.
NMitra
еmail проверяется с помощью <input type="email"/>
Лучше него ничего не придумаешь. Ещё многие забывают про домен верхнего уровня. Например, Яндекс хочет прикупить yandex. Итого, у его сотрудников могут быть иван@yandex

"вот в таком коде" — вполне решает поставленную задачу.

А я к регуляркам пришла, когда AdSense после заголовка h захотела вставить :)
Космо Мизраил
> еmail проверяется с помощью input[type="email]
Такой тип инпута далеко не всем поддерживается)
но имя@ру - это извращенство... =_=" будет очень и очень много багов, связанных с проверкой.

> А я к регуляркам пришла, когда AdSense после заголовка h захотела вставить :)
Омг... нестандартное решение О_о

Вчера пошёл дальше и написал аналог markup для комментариев. В целом, работает, но вот не знаете, как запретить замену внутри тегов pre /pre и code /code ?_?
NMitra
Добавила пару примеров. Не идеальный вариант, но решает свою задачу.
Sol
Подскажите, пожалуйста, как в при вводе в инпут заменять пробел на  
Чего-то не получается скомпоновать из Ваших примеров свой.
Спасибо. :)
Sol
Вот я лох... :) сначала написал "заменять пробел на неразрывный пробел", а потом исправил на код.
NMitra
document.write("текст текст текст".replace(/\u0020/gi, '\u00A0'));
NMitra
<input type="text" oninput="this.value = this.value.replace(/\u0020/gi, '\u00A0')"/>
Sol
:) Спасибо огромное!
А я пытался через /\s сделать и ничего не выходило.