- « Previous
- Next »
Regular expressions are patterns used to match character combinations in strings.
In JavaScript, regular expressions are also objects. These patterns are used with the exec()
and test()
methods of RegExp
, and with the match()
, matchAll()
, replace()
, replaceAll()
, search()
, and split()
methods of String
.
This chapter describes JavaScript regular expressions.
Creating a regular expression
You construct a regular expression in one of two ways:
-
Using a regular expression literal, which consists of a pattern enclosed between slashes, as follows:
Regular expression literals provide compilation of the regular expression when the script is loaded.
If the regular expression remains constant, using this can improve performance. -
Or calling the constructor function of the
RegExp
object, as follows:const re = new RegExp("ab+c");
Using the constructor function provides runtime compilation of the regular expression.
Use the constructor function when you know the regular expression pattern will be changing, or you don’t know the pattern and are getting it from another source, such as user input.
Writing a regular expression pattern
A regular expression pattern is composed of simple characters, such as /abc/
, or a combination of simple and special characters, such as /ab*c/
or /Chapter (d+).d*/
.
The last example includes parentheses, which are used as a memory device.
The match made with this part of the pattern is remembered for later use, as described in Using groups.
Note: If you are already familiar with the forms of a regular expression, you may also read the cheat sheet for a quick lookup for a specific pattern/construct.
Using simple patterns
Simple patterns are constructed of characters for which you want to find a direct match. For example, the pattern /abc/
matches character combinations in strings only when the exact sequence "abc"
occurs (all characters together and in that order).
Such a match would succeed in the strings "Hi, do you know your abc's?"
and "The latest airplane designs evolved from slabcraft."
.
In both cases the match is with the substring "abc"
.
There is no match in the string "Grab crab"
because while it contains the substring "ab c"
, it does not contain the exact substring "abc"
.
Using special characters
When the search for a match requires something more than a direct match, such as finding one or more b’s, or finding white space, you can include special characters in the pattern.
For example, to match a single "a"
followed by zero or more "b"
s followed by "c"
, you’d use the pattern /ab*c/
: the *
after "b"
means «0 or more occurrences of the preceding item.»
In the string "cbbabbbbcdebc"
, this pattern will match the substring "abbbbc"
.
The following pages provide lists of the different special characters that fit into each category, along with descriptions and examples.
- Assertions
-
Assertions include boundaries, which indicate the beginnings and endings of lines and words, and other patterns indicating in some way that a match is possible (including look-ahead, look-behind, and conditional expressions).
- Character classes
-
Distinguish different types of characters. For example, distinguishing between letters and digits.
- Groups and backreferences
-
Groups group multiple patterns as a whole, and capturing groups provide extra submatch information when using a regular expression pattern to match against a string. Backreferences refer to a previously captured group in the same regular expression.
- Quantifiers
-
Indicate numbers of characters or expressions to match.
- Unicode property escapes
-
Distinguish based on unicode character properties, for example, upper- and lower-case letters, math symbols, and punctuation.
If you want to look at all the special characters that can be used in regular expressions in a single table, see the following:
Characters / constructs | Corresponding article |
---|---|
[xyz] , [^xyz] , . ,d , D , w , W ,s , S , t , r ,n , v , f , [b] , , cX , xhh ,uhhhh , u{hhhh} ,x|y
|
Character classes |
^ , $ , b , B ,x(?=y) , x(?!y) , (?<=y)x ,(?<!y)x
|
Assertions |
(x) , (?<Name>x) , (?:x) ,n , k<Name>
|
Groups and backreferences |
x* , x+ , x? ,x{n} , x{n,} ,x{n,m}
|
Quantifiers |
p{UnicodeProperty} ,P{UnicodeProperty}
|
Unicode property escapes |
Escaping
If you need to use any of the special characters literally (actually searching for a "*"
, for instance), you must escape it by putting a backslash in front of it.
For instance, to search for "a"
followed by "*"
followed by "b"
, you’d use /a*b/
— the backslash «escapes» the "*"
, making it literal instead of special.
Similarly, if you’re writing a regular expression literal and need to match a slash («/»), you need to escape that (otherwise, it terminates the pattern).
For instance, to search for the string «/example/» followed by one or more alphabetic characters, you’d use //example/[a-z]+/i
—the backslashes before each slash make them literal.
To match a literal backslash, you need to escape the backslash.
For instance, to match the string «C:» where «C» can be any letter, you’d use /[A-Z]:\/
— the first backslash escapes the one after it, so the expression searches for a single literal backslash.
If using the RegExp
constructor with a string literal, remember that the backslash is an escape in string literals, so to use it in the regular expression, you need to escape it at the string literal level.
/a*b/
and new RegExp("a\*b")
create the same expression, which searches for «a» followed by a literal «*» followed by «b».
If escape strings are not already part of your pattern you can add them using String.prototype.replace()
:
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[]\]/g, "\$&"); // $& means the whole matched string
}
The «g» after the regular expression is an option or flag that performs a global search, looking in the whole string and returning all matches.
It is explained in detail below in Advanced Searching With Flags.
Why isn’t this built into JavaScript? There is a proposal to add such a function to RegExp.
Using parentheses
Parentheses around any part of the regular expression pattern causes that part of the matched substring to be remembered.
Once remembered, the substring can be recalled for other use. See Groups and backreferences for more details.
Using regular expressions in JavaScript
Regular expressions are used with the RegExp
methods test()
and exec()
and with the String
methods match()
, replace()
, search()
, and split()
.
Method | Description |
---|---|
exec() |
Executes a search for a match in a string. It returns an array of information or null on a mismatch. |
test() |
Tests for a match in a string. It returns true or false . |
match() |
Returns an array containing all of the matches, including capturing groups, or null if no match is found. |
matchAll() |
Returns an iterator containing all of the matches, including capturing groups. |
search() |
Tests for a match in a string. It returns the index of the match, or -1 if the search fails. |
replace() |
Executes a search for a match in a string, and replaces the matched substring with a replacement substring. |
replaceAll() |
Executes a search for all matches in a string, and replaces the matched substrings with a replacement substring. |
split() |
Uses a regular expression or a fixed string to break a string into an array of substrings. |
When you want to know whether a pattern is found in a string, use the test()
or search()
methods; for more information (but slower execution) use the exec()
or match()
methods.
If you use exec()
or match()
and if the match succeeds, these methods return an array and update properties of the associated regular expression object and also of the predefined regular expression object, RegExp
.
If the match fails, the exec()
method returns null
(which coerces to false
).
In the following example, the script uses the exec()
method to find a match in a string.
const myRe = /d(b+)d/g;
const myArray = myRe.exec("cdbbdbsbz");
If you do not need to access the properties of the regular expression, an alternative way of creating myArray
is with this script:
const myArray = /d(b+)d/g.exec("cdbbdbsbz");
// similar to 'cdbbdbsbz'.match(/d(b+)d/g); however,
// 'cdbbdbsbz'.match(/d(b+)d/g) outputs [ "dbbd" ]
// while /d(b+)d/g.exec('cdbbdbsbz') outputs [ 'dbbd', 'bb', index: 1, input: 'cdbbdbsbz' ]
(See Using the global search flag with exec()
for further info about the different behaviors.)
If you want to construct the regular expression from a string, yet another alternative is this script:
const myRe = new RegExp("d(b+)d", "g");
const myArray = myRe.exec("cdbbdbsbz");
With these scripts, the match succeeds and returns the array and updates the properties shown in the following table.
Object | Property or index | Description | In this example |
---|---|---|---|
myArray |
The matched string and all remembered substrings. | ['dbbd', 'bb', index: 1, input: 'cdbbdbsbz'] |
|
index |
The 0-based index of the match in the input string. | 1 |
|
input |
The original string. | 'cdbbdbsbz' |
|
[0] |
The last matched characters. | 'dbbd' |
|
myRe |
lastIndex |
The index at which to start the next match. (This property is set only if the regular expression uses the g option, described in Advanced Searching With Flags.) |
5 |
source |
The text of the pattern. Updated at the time that the regular expression is created, not executed. | 'd(b+)d' |
As shown in the second form of this example, you can use a regular expression created with an object initializer without assigning it to a variable.
If you do, however, every occurrence is a new regular expression.
For this reason, if you use this form without assigning it to a variable, you cannot subsequently access the properties of that regular expression.
For example, assume you have this script:
const myRe = /d(b+)d/g;
const myArray = myRe.exec("cdbbdbsbz");
console.log(`The value of lastIndex is ${myRe.lastIndex}`);
// "The value of lastIndex is 5"
However, if you have this script:
const myArray = /d(b+)d/g.exec("cdbbdbsbz");
console.log(`The value of lastIndex is ${/d(b+)d/g.lastIndex}`);
// "The value of lastIndex is 0"
The occurrences of /d(b+)d/g
in the two statements are different regular expression objects and hence have different values for their lastIndex
property.
If you need to access the properties of a regular expression created with an object initializer, you should first assign it to a variable.
Advanced searching with flags
Regular expressions have optional flags that allow for functionality like global searching and case-insensitive searching.
These flags can be used separately or together in any order, and are included as part of the regular expression.
Flag | Description | Corresponding property |
---|---|---|
d |
Generate indices for substring matches. | hasIndices |
g |
Global search. | global |
i |
Case-insensitive search. | ignoreCase |
m |
Allows ^ and $ to match newline characters. |
multiline |
s |
Allows . to match newline characters. |
dotAll |
u |
«Unicode»; treat a pattern as a sequence of Unicode code points. | unicode |
y |
Perform a «sticky» search that matches starting at the current position in the target string. | sticky |
To include a flag with the regular expression, use this syntax:
const re = /pattern/flags;
or
const re = new RegExp("pattern", "flags");
Note that the flags are an integral part of a regular expression. They cannot be added or removed later.
For example, re = /w+s/g
creates a regular expression that looks for one or more characters followed by a space, and it looks for this combination throughout the string.
const re = /w+s/g;
const str = "fee fi fo fum";
const myArray = str.match(re);
console.log(myArray);
// ["fee ", "fi ", "fo "]
You could replace the line:
with:
const re = new RegExp("\w+\s", "g");
and get the same result.
The m
flag is used to specify that a multiline input string should be treated as multiple lines.
If the m
flag is used, ^
and $
match at the start or end of any line within the input string instead of the start or end of the entire string.
Using the global search flag with exec()
RegExp.prototype.exec()
method with the g
flag returns each match and its position iteratively.
const str = "fee fi fo fum";
const re = /w+s/g;
console.log(re.exec(str)); // ["fee ", index: 0, input: "fee fi fo fum"]
console.log(re.exec(str)); // ["fi ", index: 4, input: "fee fi fo fum"]
console.log(re.exec(str)); // ["fo ", index: 7, input: "fee fi fo fum"]
console.log(re.exec(str)); // null
In contrast, String.prototype.match()
method returns all matches at once, but without their position.
console.log(str.match(re)); // ["fee ", "fi ", "fo "]
Using unicode regular expressions
The «u» flag is used to create «unicode» regular expressions; that is, regular expressions which support matching against unicode text. This is mainly accomplished through the use of Unicode property escapes, which are supported only within «unicode» regular expressions.
For example, the following regular expression might be used to match against an arbitrary unicode «word»:
There are a number of other differences between unicode and non-unicode regular expressions that one should be aware of:
- Unicode regular expressions do not support so-called «identity escapes»; that is, patterns where an escaping backslash is not needed and effectively ignored. For example,
/a/
is a valid regular expression matching the letter ‘a’, but/a/u
is not. - Curly brackets need to be escaped when not used as quantifiers. For example,
/{/
is a valid regular expression matching the curly bracket ‘{‘, but/{/u
is not — instead, the bracket should be escaped and/{/u
should be used instead. - The
-
character is interpreted differently within character classes. In particular, for Unicode regular expressions,-
is interpreted as a literal-
(and not as part of a range) only if it appears at the start or end of the character class. For example,/[w-:]/
is a valid regular expression matching a word character, a-
, or:
, but/[w-:]/u
is an invalid regular expression, asw
to:
is not a well-defined range of characters.
Unicode regular expressions have different execution behavior as well. RegExp.prototype.unicode
contains more explanation about this.
Examples
Note: Several examples are also available in:
- The reference pages for
exec()
,test()
,match()
,matchAll()
,search()
,replace()
,split()
- The guide articles: character classes, assertions, groups and backreferences, quantifiers, Unicode property escapes
Using special characters to verify input
In the following example, the user is expected to enter a phone number.
When the user presses the «Check» button, the script checks the validity of the number.
If the number is valid (matches the character sequence specified by the regular expression), the script shows a message thanking the user and confirming the number.
If the number is invalid, the script informs the user that the phone number is not valid.
The regular expression looks for:
- the beginning of the line of data:
^
- followed by three numeric characters
d{3}
OR|
a left parenthesis(
, followed by three digitsd{3}
, followed by a close parenthesis)
, in a non-capturing group(?:)
- followed by one dash, forward slash, or decimal point in a capturing group
()
- followed by three digits
d{3}
- followed by the match remembered in the (first) captured group
1
- followed by four digits
d{4}
- followed by the end of the line of data:
$
HTML
<p>
Enter your phone number (with area code) and then click "Check".
<br />
The expected format is like ###-###-####.
</p>
<form id="form">
<input id="phone" />
<button type="submit">Check</button>
</form>
<p id="output"></p>
JavaScript
const form = document.querySelector("#form");
const input = document.querySelector("#phone");
const output = document.querySelector("#output");
const re = /^(?:d{3}|(d{3}))([-/.])d{3}1d{4}$/;
function testInfo(phoneInput) {
const ok = re.exec(phoneInput.value);
output.textContent = ok
? `Thanks, your phone number is ${ok[0]}`
: `${phoneInput.value} isn't a phone number with area code!`;
}
form.addEventListener("submit", (event) => {
event.preventDefault();
testInfo(input);
});
Result
- RegExr
-
An online tool to learn, build, & test Regular Expressions.
- Regex tester
-
An online regex builder/debugger
- Regex interactive tutorial
-
An online interactive tutorials, Cheat sheet, & Playground.
- Regex visualizer
-
An online visual regex tester.
- « Previous
- Next »
In this tutorial, we learn how to find non-word characters in a string using JavaScript Regular Expression. Actually, word characters include A-Z, a-z, 0-9 and _. Coming to the non-word characters except word characters like !, @, #, $, %, ^, &, *, (, ), {, } etc. Non-word characters, we denote as W. We all know about RegExp (Regular Expression) in JavaScript. RegExp is an object that specifies the pattern used to do a search and replace operations on a string or for input validation. RegExp was introduced in ES1 and it is fully supported by all browsers.
ASCII code for non-word characters are
! — 33, @ — 64, #- 35, $ — 36, % — 37, ^ — 94, & — 38, * — 42, + — 43, — — 45, ( — 40, ) — 41.
Now, we will check how to find non-word characters using RegExp.
Syntax
Syntax for non-word or W character is
new RegExp("W") or simply /W/
/W/, is introduced in ES1. It is fully supported by all browsers. Like, Chrome, IE, Safari, Opera, FireFox and Edge.
RegExp has modifiers like g, i, m. «g» for performing global matches, «i» for performing case-insensitive matching and «m» for performing multiline matching.
The syntax for W with a modifier like,
new RegExp("W", "g") or simply /W/g
Steps to find non-word character in a string
STEP 1 — Declare and define a string with some non-word characters.
STEP 2 — Define regular expression pattern.
STEP 3 — Find the non-word characters by matching the string with the regex pattern.
STEP 4 — Display the result.
Example
In the below example, we use RegExp and the match() method to find non-word in a string.
<!DOCTYPE html> <html> <body> <h1>Finding non-word character</h1> <p>Non-word characters : <p id="result"></p> </p> <script> let text = "_HiWelcome@2022%!$%&*@!{[()]}"; let pattern = /W/g; let result = text.match(pattern); document.getElementById("result").innerHTML = result; </script> </body> </html>
Example
Here, If non-word characters exist in the given text, match() method will return an array of existing non-word characters. If not, it will return as null. Let’s see another example.
<!DOCTYPE html> <html> <body> <h1>Finding non-word character</h1> <p id="result"></p> <script> let text = "_HiWelcome2022"; let pattern = /W/g; let result = text.match(pattern); if(result == null){ document.getElementById("result").innerHTML = "Sorry, No non-word present in the text"; }else{ document.getElementById("result").innerHTML = "Non-word character(s):" +result; } </script> </body> </html>
Here, there are no non-word characters present in the text. The match() method returned as null. So, if the statement is executed. If text has non-word characters as shown in the first example, then match() method will return an array of existing nonword characters. So, the else statement will execute.
Example
Now, we will check how to replace word character(s) in a given text. Let’s see an example
<!DOCTYPE html> <html> <body> <h1>Replace non-word character(s)</h1> <p>After replacing non-word character(s) : <p id="result"></p> </p> <script> let text = "_HiWelcome@2022%!$%&*@!{[()]}"; let pattern = /W/g; let result = text.split(pattern).join(" "); document.getElementById("result").innerHTML = result; </script> </body> </html>
Example
We will also check another way to replace non-word character(s). Let’s see an example
<!DOCTYPE html> <html> <body> <h1>Replace non-word character(s)</h1> <p>After replacing non-word character(s) : <p id="result"></p> </p> <script> let text = "_HiWelcome@2022%!$%&*@!{[()]}"; let pattern = /W/g; let result = text.replace(pattern , " "); document.getElementById("result").innerHTML = result; </script> </body> </html>
As we discussed, g for global matches. Instead of stopping with the first occurrence, it will look for all the occurrences.
I Hope, this tutorial will help you to know how to find non-word characters using RegExp in JavaScript.
Содержание
- Введение
- Величины, типы и операторы
- Структура программ
- Функции
- Структуры данных: объекты и массивы
- Функции высшего порядка
- Тайная жизнь объектов
- Проект: электронная жизнь
- Поиск и обработка ошибок
- Регулярные выражения
- Модули
- Проект: язык программирования
- JavaScript и браузер
- Document Object Model
- Обработка событий
- Проект: игра-платформер
- Рисование на холсте
- HTTP
- Формы и поля форм
- Проект: Paint
- Node.js
- Проект: веб-сайт по обмену опытом
- Песочница для кода
Некоторые люди, столкнувшись с проблемой, думают: «О, а использую-ка я регулярные выражения». Теперь у них есть две проблемы.
Джейми Завински
Юан-Ма сказал: «Требуется большая сила, чтобы резать дерево поперёк структуры древесины. Требуется много кода, чтобы программировать поперёк структуры проблемы».
Мастер Юан-Ма, «Книга программирования»
Инструменты и техники программирования выживают и распространяются хаотично-эволюционным способом. Иногда выживают не красивые и гениальные, а просто такие, которые достаточно хорошо работают в своей области – к примеру, если их интегрируют в другую успешную технологию.
В этой главе мы обсудим такой инструмент – регулярные выражения. Это способ описывать шаблоны в строковых данных. Они создают небольшой отдельный язык, который входит в JavaScript и во множество других языков и инструментов.
Регулярки одновременно очень странные и крайне полезные. Их синтаксис загадочен, а программный интерфейс в JavaScript для них неуклюж. Но это мощный инструмент для исследования и обработки строк. Разобравшись с ними, вы станете более эффективным программистом.
Создаём регулярное выражение
Регулярка – тип объекта. Её можно создать, вызвав конструктор RegExp, или написав нужный шаблон, окружённый слешами.
var re1 = new RegExp("abc");
var re2 = /abc/;
Оба этих регулярных выражения представляют один шаблон: символ “a”, за которым следует символ “b”, за которым следует символ “c”.
Если вы используете конструктор RegExp, тогда шаблон записывается как обычная строка, поэтому действуют все правила относительно обратных слешей.
Вторая запись, где шаблон находится между слешами, обрабатывает обратные слеши по-другому. Во-первых, так как шаблон заканчивается прямым слешем, то нужно ставить обратный слеш перед прямым слешем, который мы хотим включить в наш шаблон. Кроме того, обратные слеши, не являющиеся частью специальных символов типа n, будут сохранены (а не проигнорированы, как в строках), и изменят смысл шаблона. У некоторых символов, таких, как знак вопроса или плюс, есть особое значение в регулярках, и если вам нужно найти такой символ, его также надо предварять обратным слешем.
var eighteenPlus = /eighteen+/;
Чтобы знать, какие символы надо предварять слешем, вам надо выучить список всех специальных символов в регулярках. Пока это нереально, поэтому в случае сомнений просто ставьте обратный слеш перед любым символом, не являющимся буквой, числом или пробелом.
Проверяем на совпадения
У регулярок есть несколько методов. Простейший – test. Если передать ему строку, он вернёт булевское значение, сообщая, содержит ли строка вхождение заданного шаблона.
console.log(/abc/.test("abcde"));
// → true
console.log(/abc/.test("abxde"));
// → false
Регулярка, состоящая только из неспециальных символов, просто представляет собой последовательность этих символов. Если abc есть где-то в строке, которую мы проверяем (не только в начале), test вернёт true.
Ищем набор символов
Выяснить, содержит ли строка abc, можно было бы и при помощи indexOf. Регулярки позволяют пройти дальше и составлять более сложные шаблоны.
Допустим, нам надо найти любой номер. Когда мы в регулярке помещаем набор символов в квадратные скобки, это означает, что эта часть выражения совпадает с любым из символов в скобках.
Оба выражения находятся в строчках, содержащих цифру.
console.log(/[0123456789]/.test("in 1992"));
// → true
console.log(/[0-9]/.test("in 1992"));
// → true
В квадратных скобках тире между двумя символами используется для задания диапазона символов, где последовательность задаётся кодировкой Unicode. Символы от 0 до 9 находятся там просто подряд (коды с 48 до 57), поэтому [0-9] захватывает их все и совпадает с любой цифрой.
У нескольких групп символов есть свои встроенные сокращения.
d Любая цифра
w Алфавитно-цифровой символ
s Пробельный символ (пробел, табуляция, перевод строки, и т.п.)
D не цифра
W не алфавитно-цифровой символ
S не пробельный символ
. любой символ, кроме перевода строки
Таким образом можно задать формат даты и времени вроде 30-01-2003 15:20 следующим выражением:
var dateTime = /dd-dd-dddd dd:dd/;
console.log(dateTime.test("30-01-2003 15:20"));
// → true
console.log(dateTime.test("30-jan-2003 15:20"));
// → false
Выглядит ужасно, не так ли? Слишком много обратных слешей, которые затрудняют понимание шаблона. Позже мы слегка улучшим его.
Обратные слеши можно использовать и в квадратных скобках. Например, [d.] означает любую цифру или точку. Заметьте, что точка внутри квадратных скобок теряет своё особое значение и превращается просто в точку. То же касается и других специальных символов, типа +.
Инвертировать набор символов – то есть, сказать, что вам надо найти любой символ, кроме тех, что есть в наборе – можно, поставив знак ^ сразу после открывающей квадратной скобки.
var notBinary = /[^01]/;
console.log(notBinary.test("1100100010100110"));
// → false
console.log(notBinary.test("1100100010200110"));
// → true
Повторяем части шаблона
Мы знаем, как найти одну цифру. А если нам надо найти число целиком – последовательность из одной или более цифр?
Если поставить после чего-либо в регулярке знак +, это будет означать, что этот элемент может быть повторён более одного раза. /d+/ означает одну или несколько цифр.
console.log(/'d+'/.test("'123'"));
// → true
console.log(/'d+'/.test("''"));
// → false
console.log(/'d*'/.test("'123'"));
// → true
console.log(/'d*'/.test("''"));
// → true
У звёздочки * значение почти такое же, но она разрешает шаблону присутствовать ноль раз. Если после чего-то стоит звёздочка, то оно никогда не препятствует нахождению шаблона в строке – оно просто находится там ноль раз.
Знак вопроса делает часть шаблона необязательной, то есть она может встретиться ноль или один раз. В следующем примере символ u может встречаться, но шаблон совпадает и тогда, когда его нет.
var neighbor = /neighbou?r/;
console.log(neighbor.test("neighbour"));
// → true
console.log(neighbor.test("neighbor"));
// → true
Чтобы задать точное количество раз, которое шаблон должен встретиться, используются фигурные скобки. {4} после элемента означает, что он должен встретиться в строке 4 раза. Также можно задать промежуток: {2,4} означает, что элемент должен встретиться не менее 2 и не более 4 раз.
Ещё одна версия формата даты и времени, где разрешены дни, месяцы и часы из одной или двух цифр. И ещё она чуть более читаема.
var dateTime = /d{1,2}-d{1,2}-d{4} d{1,2}:d{2}/;
console.log(dateTime.test("30-1-2003 8:45"));
// → true
Можно использовать промежутки с открытым концом, опуская одно из чисел. {,5} означает, что шаблон может встретиться от нуля до пяти раз, а {5,} – от пяти и более.
Группировка подвыражений
Чтобы использовать операторы * или + на нескольких элементах сразу, можно использовать круглые скобки. Часть регулярки, заключённая в скобки, считается одним элементом с точки зрения операторов.
var cartoonCrying = /boo+(hoo+)+/i;
console.log(cartoonCrying.test("Boohoooohoohooo"));
// → true
Первый и второй плюсы относятся только ко вторым буквам о в словах boo и hoo. Третий + относится к целой группе (hoo+), находя одну или несколько таких последовательностей.
Буква i в конце выражения делает регулярку нечувствительной к регистру симолов – так, что B совпадает с b.
Совпадения и группы
Метод test – самый простой метод проверки регулярок. Он только сообщает, было ли найдено совпадение, или нет. У регулярок есть ещё метод exec, который вернёт null, если ничего не было найдено, а в противном случае вернёт объект с информацией о совпадении.
var match = /d+/.exec("one two 100");
console.log(match);
// → ["100"]
console.log(match.index);
// → 8
У возвращаемого exec объекта есть свойство index, где содержится номер символа, с которого случилось совпадение. А вообще объект выглядит как массив строк, где первый элемент – строка, которую проверяли на совпадение. В нашем примере это будет последовательность цифр, которую мы искали.
У строк есть метод match, работающий примерно так же.
console.log("one two 100".match(/d+/));
// → ["100"]
Когда в регулярке содержатся подвыражения, сгруппированные круглыми скобками, текст, совпавший с этими группами, тоже появится в массиве. Первый элемент всегда совпадение целиком. Второй – часть, совпавшая с первой группой (той, у кого круглые скобки встретились раньше всех), затем со второй группой, и так далее.
var quotedText = /'([^']*)'/;
console.log(quotedText.exec("she said 'hello'"));
// → ["'hello'", "hello"]
Когда группа не найдена вообще (например, если за ней стоит знак вопроса), её позиция в массиве содержит undefined. Если группа совпала несколько раз, то в массиве будет только последнее совпадение.
console.log(/bad(ly)?/.exec("bad"));
// → ["bad", undefined]
console.log(/(d)+/.exec("123"));
// → ["123", "3"]
Группы полезны для извлечения частей строк. Если нам не просто надо проверить, есть ли в строке дата, а извлечь её и создать представляющий дату объект, мы можем заключить последовательности цифр в круглые скобки и выбрать дату из результата exec.
Но для начала небольшое отступление, в котором мы узнаем предпочтительный способ хранения даты и времени в JavaScript.
Тип даты
В JavaScript есть стандартный тип объекта для дат – а точнее, моментов во времени. Он называется Date. Если просто создать объект даты через new, вы получите текущие дату и ремя.
console.log(new Date());
// → Sun Nov 09 2014 00:07:57 GMT+0300 (CET)
Также можно создать объект, содержащий заданное время
console.log(new Date(2015, 9, 21));
// → Wed Oct 21 2015 00:00:00 GMT+0300 (CET)
console.log(new Date(2009, 11, 9, 12, 59, 59, 999));
// → Wed Dec 09 2009 12:59:59 GMT+0300 (CET)
JavaScript использует соглашение, в котором номера месяцев начинаются с нуля, а номера дней – с единицы. Это глупо и нелепо. Поберегитесь.
Последние четыре аргумента (часы, минуты, секунды и миллисекунды) необязательны, и в случае отсутствия приравниваются к нулю.
Метки времени хранятся как количество миллисекунд, прошедших с начала 1970 года. Для времени до 1970 года используются отрицательные числа (это связано с соглашением по Unix time, которое было создано примерно в то время). Метод getTime объекта даты возвращает это число. Оно, естественно, большое.
console.log(new Date(2013, 11, 19).getTime());
// → 1387407600000
console.log(new Date(1387407600000));
// → Thu Dec 19 2013 00:00:00 GMT+0100 (CET)
Если задать конструктору Date один аргумент, он воспринимается как это количество миллисекунд. Можно получить текущее значение миллисекунд, создав объект Date и вызвав метод getTime, или же вызвав функцию Date.now.
У объекта Date для извлечения его компонентов есть методы getFullYear, getMonth, getDate, getHours, getMinutes, и getSeconds. Есть также метод getYear, возвращающий довольно бесполезный двузначный код, типа 93 или 14.
Заключив нужные части шаблона в круглые скобки, мы можем создать объект даты прямо из строки.
function findDate(string) {
var dateTime = /(d{1,2})-(d{1,2})-(d{4})/;
var match = dateTime.exec(string);
return new Date(Number(match[3]),
Number(match[2]) - 1,
Number(match[1]));
}
console.log(findDate("30-1-2003"));
// → Thu Jan 30 2003 00:00:00 GMT+0100 (CET)
Границы слова и строки
К сожалению, findDate так же радостно извлечёт бессмысленную дату 00-1-3000 из строки «100-1-30000». Совпадение может случиться в любом месте строки, так что в данном случае он просто начнёт со второго символа и закончит на предпоследнем.
Если нам надо принудить совпадение взять всю строку целиком, мы используем метки ^ и $. ^ совпадает с началом строки, а $ с концом. Поэтому /^d+$/ совпадает со строкой, состоящей только из одной или нескольких цифр, /^!/ совпадает со сторокой, начинающейся с восклицательного знака, а /x^/ не совпадает ни с какой строчкой (перед началом строки не может быть x).
Если, с другой стороны, нам просто надо убедиться, что дата начинается и заканчивается на границе слова, мы используем метку b. Границей слова может быть начало или конец строки, или любое место строки, где с одной стороны стоит алфавитно-цифровой символ w, а с другой – не алфавитно-цифровой.
console.log(/cat/.test("concatenate"));
// → true
console.log(/bcatb/.test("concatenate"));
// → false
Отметим, что метка границы не представляет из себя символ. Это просто ограничение, обозначающее, что совпадение происходит только если выполняется определённое условие.
Шаблоны с выбором
Допустим, надо выяснить, содержит ли текст не просто номер, а номер, за которым следует pig, cow, или chicken в единственном или множественном числе.
Можно было бы написать три регулярки и проверить их по очереди, но есть способ лучше. Символ | обозначает выбор между шаблонами слева и справа от него. И можно сказать следующее:
var animalCount = /bd+ (pig|cow|chicken)s?b/;
console.log(animalCount.test("15 pigs"));
// → true
console.log(animalCount.test("15 pigchickens"));
// → false
Скобки ограничивают часть шаблона, к которой применяется |, и можно поставить много таких операторов друг за другом, чтобы обозначить выбор из более чем двух вариантов.
Механизм поиска
Регулярные выражения можно рассматривать как блок-схемы. Следующая диаграмма описывает последний животноводческий пример.
Выражение совпадает со строкой, если можно найти путь с левой части диаграммы в правую. Мы запоминаем текущее положение в строке, и каждый раз, проходя прямоугольник, проверяем, что часть строки сразу за нашим положением в ней совпадает с содержимым прямоугольника.
Значит, проверка совпадения нашей регулярки в строке «the 3 pigs» при прохождении по блок-схеме выглядит так:
— на позиции 4 есть граница слова, и проходим первый прямоугольник
— начиная с 4 позиции находим цифру, и проходим второй прямоугольник
— на позиции 5 один путь замыкается назад перед вторым прямоугольником, а второй проходит далее к прямоугольнику с пробелом. У нас пробел, а не цифра, и мы выбираем второй путь.
— теперь мы на позиции 6, начало “pigs”, и на тройном разветвлении путей. В строке нет “cow” или “chicken”, зато есть “pig”, поэтому мы выбираем этот путь.
— на позиции 9 после тройного разветвления, один путь обходит “s” и направляется к последнему прямоугольнику с границей слова, а второй проходит через “s”. У нас есть “s”, поэтому мы идём туда.
— на позиции 10 мы в конце строки, и совпасть может только граница слова. Конец строки считается границей, и мы проходим через последний прямоугольник. И вот мы успешно нашли наш шаблон.
В принципе, работают регулярные выражения следующим образом: алгоритм начинает в начале строки и пытается найти совпадение там. В нашем случае там есть граница слова, поэтому он проходит первый прямоугольник – но там нет цифры, поэтому на втором прямоугольнике он спотыкается. Потом он двигается ко второму символу в строке, и пытается найти совпадение там… И так далее, пока он не находит совпадение или не доходит до конца строки — что значит, что совпадение на найдено.
Откаты
Регулярка /b([01]+b|d+|[da-f]h)b/ совпадает либо с двоичным числом, за которым следует b, либо с десятичным числом без суффикса, либо шестнадцатеричным (цифры от 0 до 9 или символы от a до h), за которым идёт h. Соответствующая диаграмма:
В поисках совпадения может случиться, что алгоритм пошёл по верхнему пути (двоичное число), даже если в строке нет такого числа. Если там есть строка “103”, к примеру, понятно, что только достигнув цифры 3 алгоритм поймёт, что он на неправильном пути. Вообще строка совпадает с регуляркой, просто не в этой ветке.
Тогда алгоритм совершает откат. На развилке он запоминает текущее положение (в нашем случае, это начало строки, сразу после границы слова), чтобы можно было вернуться назад и попробовать другой путь, если выбранный не срабатывает. Для строки “103” после встречи с тройкой он вернётся и попытается пройти путь для десятичных чисел. Это сработает, поэтому совпадение будет найдено.
Алгоритм останавливается, как только найдёт полное совпадение. Это значит, что даже если несколько вариантов могут подойти, используется только один из них (в том порядке, в каком они появляются в регулярке).
Откаты случаются при использовании операторов повторения, таких, как + и *. Если вы ищете /^.*x/ в строке «abcxe», часть регулярки .* попробует поглотить всю строчку. Алгоритм затем сообразит, что ему нужен ещё и “x”. Так как никакого “x” после конца строки нет, алгоритм попробует поискать совпадение, откатившись на один символ. После abcx тоже нет x, тогда он снова откатывается, уже к подстроке abc. И после строчки он находит x и докладывает об успешном совпадении, на позициях с 0 по 4.
Можно написать регулярку, которая приведёт ко множественным откатам. Такая проблема возникает, когда шаблон может совпасть с входными данными множеством разных способов. Например, если мы ошибёмся при написании регулярки для двоичных чисел, мы можем случайно написать что-то вроде /([01]+)+b/.
Если алгоритм будет искать такой шаблон в длинной строке из нолей и единиц, не содержащей в конце “b”, он сначала пройдёт по внутренней петле, пока у него не кончатся цифры. Тогда он заметит, что в конце нет “b”, сделает откат на одну позицию, пройдёт по внешней петле, опять сдастся, попытается откатиться на ещё одну позицию по внутренней петле… И будет дальше искать таким образом, задействуя обе петли. То есть, количество работы с каждым символом строки будет удваиваться. Даже для нескольких десятков символов поиск совпадения займёт очень долгое время.
Метод replace
У строк есть метод replace, который может заменять часть строки другой строкой.
console.log("папа".replace("п", "м"));
// → мапа
Первый аргумент может быть и регуляркой, и тогда заменяется первое вхождение регулярки в строке. Когда к регулярке добавляется опция “g” (global, всеобщий), заменяются все вхождения, а не только первое
console.log("Borobudur".replace(/[ou]/, "a"));
// → Barobudur
console.log("Borobudur".replace(/[ou]/g, "a"));
// → Barabadar
Имело бы смысл передавать опцию «заменить все» через отдельный аргумент, или через отдельный метод типа replaceAll. Но к сожалению, опция передаётся через саму регулярку.
Вся сила регулярок раскрывается, когда мы используем ссылки на найденные в строке группы, заданные в регулярке. Например, у нас есть строка, содержащая имена людей, одно имя на строчку, в формате «Фамилия, Имя». Если нам надо поменять их местами и убрать запятую, чтобы получилось «Имя Фамилия», мы пишем следующее:
console.log(
"Hopper, GracenMcCarthy, JohnnRitchie, Dennis"
.replace(/([w ]+), ([w ]+)/g, "$2 $1"));
// → Grace Hopper
// John McCarthy
// Dennis Ritchie
$1 и $2 в строчке на замену ссылаются на группы символов, заключённые в скобки. $1 заменяется текстом, который совпал с первой группой, $2 – со второй группой, и так далее, до $9. Всё совпадение целиком содержится в переменной $&.
Также можно в качестве второго аргумента передавать и функцию. Для каждой замены будет вызвана функция, аргументами которой будут найденные группы (и вся совпадающая часть строки целиком), а её результат будет вставлен в новую строку.
Простой пример:
var s = "the cia and fbi";
console.log(s.replace(/b(fbi|cia)b/g, function(str) {
return str.toUpperCase();
}));
// → the CIA and FBI
А вот более интересный:
var stock = "1 lemon, 2 cabbages, and 101 eggs";
function minusOne(match, amount, unit) {
amount = Number(amount) - 1;
if (amount == 1) // остался только один, удаляем 's' в конце
unit = unit.slice(0, unit.length - 1);
else if (amount == 0)
amount = "no";
return amount + " " + unit;
}
console.log(stock.replace(/(d+) (w+)/g, minusOne));
// → no lemon, 1 cabbage, and 100 eggs
Код принимает строку, находит все вхождения чисел, за которыми идёт слово, и возвращает строчку, где каждое число уменьшено на единицу.
Группа (d+) попадает в аргумент amount, а (w+) – в unit. Функция преобразовывает amount в число – и это всегда срабатывает, потому что наш шаблон как раз d+. И затем вносит изменения в слово, на случай, если остался всего 1 предмет или их не осталось вовсе.
Жадность
Несложно при помощи replace написать функцию, убирающую все комментарии из кода JavaScript. Вот первая попытка:
function stripComments(code) {
return code.replace(///.*|/*[^]**//g, "");
}
console.log(stripComments("1 + /* 2 */3"));
// → 1 + 3
console.log(stripComments("x = 10;// ten!"));
// → x = 10;
console.log(stripComments("1 /* a */+/* b */ 1"));
// → 1 1
Часть перед оператором «или» совпадает с двумя слешами, за которыми идут любое количество символов, кроме символов перевода строки. Часть, убирающая многострочные комментарии, более сложна. Мы используем [^], т.е. любой символ, не являющийся пустым, в качестве способа найти любой символ. Мы не можем использовать точку, потому что блочные комментарии продолжаются и на новой строке, а символ перевода строки не совпадает с точкой.
Но вывод предыдущего примера неправильный. Почему?
Часть [^]* сначала попытается захватить столько символов, сколько может. Если из-за этого следующая часть регулярки не найдёт себе совпадения, произойдёт откат на один символ и попробует снова. В примере, алгоритм пытается захватить всю строку, и затем откатывается. Откатившись на 4 символа назад, он найдёт в строчке */ — а это не то, чего мы добивались. Мы-то хотели захватить только один комментарий, а не пройти до конца строки и найти последний комментарий.
Из-за этого мы говорим, что операторы повторения (+, *, ?, and {}) жадные, то есть они сначала захватывают, сколько могут, а потом идут назад. Если вы поместите вопрос после такого оператора (+?, *?, ??, {}?), они превратятся в нежадных, и начнут находить самые маленькие из возможных вхождений.
И это то, что нам нужно. Заставив звёздочку находить совпадения в минимально возможном количестве символов строчки, мы поглощаем только один блок комментариев, и не более того.
function stripComments(code) {
return code.replace(///.*|/*[^]*?*//g, "");
}
console.log(stripComments("1 /* a */+/* b */ 1"));
// → 1 + 1
Множество ошибок возникает при использовании жадных операторов вместо нежадных. При использовании оператора повтора сначала всегда рассматривайте вариант нежадного оператора.
Динамическое создание объектов RegExp
В некоторых случаях точный шаблон неизвестен во время написания кода. Например, вам надо будет искать имя пользователя в тексте, и заключать его в подчёркивания. Так как вы узнаете имя только после запуска программы, вы не можете использовать запись со слешами.
Но вы можете построить строку и использовать конструктор RegExp. Вот пример:
var name = "гарри";
var text = "А у Гарри на лбу шрам.";
var regexp = new RegExp("\b(" + name + ")\b", "gi");
console.log(text.replace(regexp, "_$1_"));
// → А у _Гарри_ на лбу шрам.
При создании границ слова приходится использовать двойные слеши, потому что мы пишем их в нормальной строке, а не в регулярке с прямыми слешами. Второй аргумент для RegExp содержит опции для регулярок – в нашем случае “gi”, т.е. глобальный и регистро-независимый.
Но что, если имя будет «dea+hl[]rd» (если наш пользователь – кульхацкер)? В результате мы получим бессмысленную регулярку, которая не найдёт в строке совпадений.
Мы можем добавить обратных слешей перед любым символом, который нам не нравится. Мы не можем добавлять обратные слеши перед буквами, потому что b или n – это спецсимволы. Но добавлять слеши перед любыми не алфавитно-цифровыми символами можно без проблем.
var name = "dea+hl[]rd";
var text = "Этот dea+hl[]rd всех достал.";
var escaped = name.replace(/[^ws]/g, "\$&");
var regexp = new RegExp("\b(" + escaped + ")\b", "gi");
console.log(text.replace(regexp, "_$1_"));
// → Этот _dea+hl[]rd_ всех достал.
Метод search
Метод indexOf нельзя использовать с регулярками. Зато есть метод search, который как раз ожидает регулярку. Как и indexOf, он возвращает индекс первого вхождения, или -1, если его не случилось.
console.log(" word".search(/S/));
// → 2
console.log(" ".search(/S/));
// → -1
К сожалению, никак нельзя задать, чтобы метод искал совпадение, начиная с конкретного смещения (как это можно сделать с indexOf). Это было бы полезно.
Свойство lastIndex
Метод exec тоже не даёт удобного способа начать поиск с заданной позиции в строке. Но неудобный способ даёт.
У объекта регулярок есть свойства. Одно из них – source, содержащее строку. Ещё одно – lastIndex, контролирующее, в некоторых условиях, где начнётся следующий поиск вхождений.
Эти условия включают необходимость присутствия глобальной опции g, и то, что поиск должен идти с применением метода exec. Более разумным решением было бы просто допустить дополнительный аргумент для передачи в exec, но разумность – не основополагающая черта в интерфейсе регулярок JavaScript.
var pattern = /y/g;
pattern.lastIndex = 3;
var match = pattern.exec("xyzzy");
console.log(match.index);
// → 4
console.log(pattern.lastIndex);
// → 5
Если поиск был успешным, вызов exec обновляет свойство lastIndex, чтоб оно указывало на позицию после найденного вхождения. Если успеха не было, lastIndex устанавливается в ноль – как и lastIndex у только что созданного объекта.
При использовании глобальной переменной-регулярки и нескольких вызовов exec эти автоматические обновления lastIndex могут привести к проблемам. Ваша регулярка может начать поиск с позиции, оставшейся с предыдущего вызова.
var digit = /d/g;
console.log(digit.exec("here it is: 1"));
// → ["1"]
console.log(digit.exec("and now: 1"));
// → null
Ещё один интересный эффект опции g в том, что она меняет работу метода match. Когда он вызывается с этой опцией, вместо возврата массива, похожего на результат работы exec, он находит все вхождения шаблона в строке и возвращает массив из найденных подстрок.
console.log("Банан".match(/ан/g));
// → ["ан", "ан"]
Так что поосторожнее с глобальными переменными-регулярками. В случаях, когда они необходимы – вызовы replace или места, где вы специально используете lastIndex – пожалуй и все случаи, в которых их следует применять.
Циклы по вхождениям
Типичная задача – пройти по всем вхождениям шаблона в строку так, чтобы иметь доступ к объекту match в теле цикла, используя lastIndex и exec.
var input = "Строчка с 3 числами в ней... 42 и 88.";
var number = /b(d+)b/g;
var match;
while (match = number.exec(input))
console.log("Нашёл ", match[1], " на ", match.index);
// → Нашёл 3 на 14
// Нашёл 42 на 33
// Нашёл 88 на 40
Используется тот факт, что значением присвоения является присваиваемое значение. Используя конструкцию match = re.exec(input) в качестве условия в цикле while, мы производим поиск в начале каждой итерации, сохраняем результат в переменной, и заканчиваем цикл, когда все совпадения найдены.
Разбор INI файлы
В заключение главы рассмотрим задачу с использованием регулярок. Представьте, что мы пишем программу, собирающую сведения о наших врагах через интернет в автоматическом режиме. (Всю программу писать не будем, только ту часть, которая читает файл с настройками. Извините.) Файл выглядит так:
searchengine=http://www.google.com/search?q=$1
spitefulness=9.7
; перед комментариями ставится точка с запятой
; каждая секция относится к отдельному врагу
[larry]
fullname=Larry Doe
type=бычара из детсада
website=http://www.geocities.com/CapeCanaveral/11451
[gargamel]
fullname=Gargamel
type=злой волшебник
outputdir=/home/marijn/enemies/gargamel
Точный формат файла (который довольно широко используется, и обычно называется INI), следующий:
— пустые строки и строки, начинающиеся с точки с запятой, игнорируются.
— строки, заключённые в квадратные скобки, начинают новую секцию.
— строки, содержащие алфавитно-цифровой идентификатор, за которым следует =, добавляют настройку в данной секции.
— всё остальное – неверные данные.
Наша задача – преобразовать такую строку в массив объектов, каждый со свойством name и массивом настроек. Для каждой секции нужен один объект, и ещё один – для глобальных настроек сверху файла.
Так как файл надо разбирать построчно, неплохо начать с разбиения файла на строки. Для этого в главе 6 мы использовали string.split(«n»). Некоторые операционки используют для перевода строки не один символ n, а два — rn. Так как метод split принимает регулярки в качестве аргумента, мы можем делить линии при помощи выражения /r?n/, разрешающего и одиночные n и rn между строками.
function parseINI(string) {
// Начнём с объекта, содержащего настройки верхнего уровня
var currentSection = {name: null, fields: []};
var categories = [currentSection];
string.split(/r?n/).forEach(function(line) {
var match;
if (/^s*(;.*)?$/.test(line)) {
return;
} else if (match = line.match(/^[(.*)]$/)) {
currentSection = {name: match[1], fields: []};
categories.push(currentSection);
} else if (match = line.match(/^(w+)=(.*)$/)) {
currentSection.fields.push({name: match[1],
value: match[2]});
} else {
throw new Error("Строчка '" + line + "' содержит неверные данные.");
}
});
return categories;
}
Код проходит все строки, обновляя объект текущей секции “current section”. Сначала он проверяет, можно ли игнорировать строчку, при помощи регулярки /^s*(;.*)?$/. Соображаете, как это работает? Часть между скобок совпадает с комментариями, а? делает так, что регулярка совпадёт и со строчками, состоящими из одних пробелов.
Если строка – не комментарий, код проверяет, начинает ли она новую секцию. Если да, он создаёт новый объект для текущей секции, к которому добавляются последующие настройки.
Последняя осмысленная возможность – строка является обычной настройкой, и в этом случае она добавляется к текущему объекту.
Если ни один вариант не сработал, функция выдаёт ошибку.
Заметьте, как частое использование ^ и $ заботится о том, что выражение совпадает со всей строкой целиком, а не с частью. Если их не использовать, код в целом будет работать, но иногда будет выдавать странные результаты, и такую ошибку будет трудно отследить.
Конструкция if (match = string.match(…)) похожа на трюк, использующий присвоение как условие в цикле while. Часто вы не знаете, что вызов match будет успешным, поэтому вы можете получить доступ к результирующему объекту только внутри блока if, который это проверяет. Чтоб не разбивать красивую цепочку проверок if, мы присваиваем результат поиска переменной, и сразу используем это присвоение как проверку.
Международные символы
Из-за изначально простой реализации языка, и последующей фиксации такой реализации «в граните», регулярки JavaScript тупят с символами, не встречающимися в английском языке. К примеру, символ «буквы» с точки зрения регулярок JavaScript, может быть одним из 26 букв английского алфавита, и почему-то ещё подчёркиванием. Буквы типа é или β, однозначно являющиеся буквами, не совпадают с w (и совпадут с W, то есть с не-буквой).
По странному стечению обстоятельств, исторически s (пробел) совпадает со всеми символами, которые в Unicode считаются пробельными, включая такие штуки, как неразрывный пробел или монгольский разделитель гласных.
У некоторых реализаций регулярок в других языках есть особый синтаксис для поиска специальных категорий символов Unicode, типа «все прописные буквы», «все знаки препинания» или «управляющие символы». Есть планы по добавлению таких категорий и в JavaScript, но они, видимо, будут реализованы не скоро.
Итог
Регулярки – это объекты, представляющие шаблоны поиска в строках. Они используют свой синтаксис для выражения этих шаблонов.
/abc/ Последовательность символов
/[abc]/ Любой символ из списка
/[^abc]/ Любой символ, кроме символов из списка
/[0-9]/ Любой символ из промежутка
/x+/ Одно или более вхождений шаблона x
/x+?/ Одно или более вхождений, нежадное
/x*/ Ноль или более вхождений
/x?/ Ноль или одно вхождение
/x{2,4}/ От двух до четырёх вхождений
/(abc)/ Группа
/a|b|c/ Любой из нескольких шаблонов
/d/ Любая цифра
/w/ Любой алфавитно-цифровой символ («буква»)
/s/ Любой пробельный символ
/./ Любой символ, кроме переводов строки
/b/ Граница слова
/^/ Начало строки
/$/ Конец строки
У регулярки есть метод test, для проверки того, есть ли шаблон в строке. Есть метод exec, возвращающий массив, содержащий все найденные группы. У массива есть свойство index, где содержится номер символа, с которого случилось совпадение.
У строк есть метод match для поиска шаблонов, и метод search, возвращающий только начальную позицию вхождения. Метод replace может заменять вхождения шаблона на другую строку. Кроме этого, вы можете передать в replace функцию, которая будет строить строчку на замену, основываясь на шаблоне и найденных группах.
У регулярок есть настройки, которые пишут после закрывающего слеша. Опция i делает регулярку регистронезависимой, а опция g делает её глобальной, что, кроме прочего, заставляет метод replace заменять все найденные вхождения, а не только первое.
Конструктор RegExp можно использовать для создания регулярок из строк.
Регулярки – острый инструмент с неудобной ручкой. Они сильно упрощают одни задачи, и могут стать неуправляемыми при решении других, сложных задач. Часть умения пользоваться регулярками состоит в том, чтобы уметь сопротивляться искушению запихнуть в них задачу, для которой они не предназначены.
Упражнения
Неизбежно при решении задач у вас возникнут непонятные случаи, и вы можете иногда отчаиваться, видя непредсказуемое поведение некоторых регулярок. Иногда помогает изучить поведение регулярки через онлайн-сервис типа debuggex.com, где можно посмотреть её визуализацию и сравнить с желаемым эффектом.
Регулярный гольф
«Гольфом» в коде называют игру, где нужно выразить заданную программу минимальным количеством символов. Регулярный гольф – практическое упражнение по написанию наименьших возможных регулярок для поиска заданного шаблона, и только его.
Для каждой из подстрочек напишите регулярку для проверки их нахождения в строке. Регулярка должна находить только эти указанные подстроки. Не волнуйтесь насчёт границ слов, если это не упомянуто особо. Когда у вас получится работающая регулярка, попробуйте её уменьшить.
— car и cat.
— pop и prop.
— ferret, ferry, и ferrari.
— Любое слово, заканчивающееся на ious.
— Пробел, за которым идёт точка, запятая, двоеточие или точка с запятой.
— Слово длинее шести букв.
— Слово без букв e.
// Впишите свои регулярки
verify(/.../,
["my car", "bad cats"],
["camper", "high art"]);
verify(/.../,
["pop culture", "mad props"],
["plop"]);
verify(/.../,
["ferret", "ferry", "ferrari"],
["ferrum", "transfer A"]);
verify(/.../,
["how delicious", "spacious room"],
["ruinous", "consciousness"]);
verify(/.../,
["bad punctuation ."],
["escape the dot"]);
verify(/.../,
["hottentottententen"],
["no", "hotten totten tenten"]);
verify(/.../,
["red platypus", "wobbling nest"],
["earth bed", "learning ape"]);
function verify(regexp, yes, no) {
// Ignore unfinished exercises
if (regexp.source == "...") return;
yes.forEach(function(s) {
if (!regexp.test(s))
console.log("Не нашлось '" + s + "'");
});
no.forEach(function(s) {
if (regexp.test(s))
console.log("Неожиданное вхождение '" + s + "'");
});
}
Кавычки в тексте
Допустим, вы написали рассказ, и везде для обозначения диалогов использовали одинарные кавычки. Теперь вы хотите заменить кавычки диалогов на двойные, и оставить одинарные в сокращениях слов типа aren’t.
Придумайте шаблон, различающий два этих использования кавычек, и напишите вызов метода replace, который производит замену.
Снова числа
Последовательности цифр можно найти простой регуляркой /d+/.
Напишите выражение, находящее только числа, записанные в стиле JavaScript. Оно должно поддерживать возможный минус или плюс перед числом, десятичную точку, и экспоненциальную запись 5e-3 или 1E10 – опять-таки с возможными плюсом или минусом. Также заметьте, что до или после точки не обязательно могут стоять цифры, но при этом число не может состоять из одной точки. То есть, .5 или 5. – допустимые числа, а одна точка сама по себе – нет.
// Впишите сюда регулярку.
var number = /^...$/;
// Tests:
["1", "-1", "+15", "1.55", ".5", "5.", "1.3e2", "1E-4",
"1e+12"].forEach(function(s) {
if (!number.test(s))
console.log("Не нашла '" + s + "'");
});
["1a", "+-1", "1.2.3", "1+1", "1e4.5", ".5.", "1f5",
"."].forEach(function(s) {
if (number.test(s))
console.log("Неправильно принято '" + s + "'");
});
Chapter 9Regular Expressions
Some people, when confronted with a problem, think ‘I know, I’ll use regular expressions.’ Now they have two problems.
Yuan-Ma said, ‘When you cut against the grain of the wood, much strength is needed. When you program against the grain of the problem, much code is needed.’
Programming tools and techniques survive and spread in a chaotic, evolutionary way. It’s not always the pretty or brilliant ones that win but rather the ones that function well enough within the right niche or that happen to be integrated with another successful piece of technology.
In this chapter, I will discuss one such tool, regular
expressions. Regular expressions are a way to describe patterns in string data. They form a small, separate language that is part of JavaScript and many other languages and systems.
Regular expressions are both terribly awkward and extremely useful. Their syntax is cryptic, and the programming interface JavaScript provides for them is clumsy. But they are a powerful tool for inspecting and processing strings. Properly understanding regular expressions will make you a more effective programmer.
Creating a regular expression
A regular expression is a type of object. It can be either constructed with the RegExp
constructor or written as a literal value by enclosing a pattern in forward slash (/
) characters.
let re1 = new RegExp("abc"); let re2 = /abc/;
Both of those regular expression objects represent the same pattern: an a character followed by a b followed by a c.
When using the RegExp
constructor, the pattern is written as a normal string, so the usual rules apply for backslashes.
The second notation, where the pattern appears between slash characters, treats backslashes somewhat differently. First, since a forward slash ends the pattern, we need to put a backslash before any forward slash that we want to be part of the pattern. In addition, backslashes that aren’t part of special character codes (like n
) will be preserved, rather than ignored as they are in strings, and change the meaning of the pattern. Some characters, such as question marks and plus signs, have special meanings in regular expressions and must be preceded by a backslash if they are meant to represent the character itself.
let eighteenPlus = /eighteen+/;
Testing for matches
Regular expression objects have a number of methods. The simplest one is test
. If you pass it a string, it will return a Boolean telling you whether the string contains a match of the pattern in the expression.
console.log(/abc/.test("abcde")); console.log(/abc/.test("abxde"));
A regular expression consisting of only nonspecial characters simply represents that sequence of characters. If abc occurs anywhere in the string we are testing against (not just at the start), test
will return true
.
Sets of characters
Finding out whether a string contains abc could just as well be done with a call to indexOf
. Regular expressions allow us to express more complicated patterns.
Say we want to match any number. In a regular expression, putting a set of characters between square brackets makes that part of the expression match any of the characters between the brackets.
Both of the following expressions match all strings that contain a digit:
console.log(/[0123456789]/.test("in 1992")); console.log(/[0-9]/.test("in 1992"));
Within square brackets, a hyphen (-
) between two characters can be used to indicate a range of characters, where the ordering is determined by the character’s Unicode number. Characters 0 to 9 sit right next to each other in this ordering (codes 48 to 57), so [0-9]
covers all of them and matches any digit.
A number of common character groups have their own built-in shortcuts. Digits are one of them: d
means the same thing as [0-9]
.
d |
Any digit character |
w |
An alphanumeric character (“word character”) |
s |
Any whitespace character (space, tab, newline, and similar) |
D |
A character that is not a digit |
W |
A nonalphanumeric character |
S |
A nonwhitespace character |
. |
Any character except for newline |
So you could match a date and time format like 01-30-2003 15:20 with the following expression:
let dateTime = /dd-dd-dddd dd:dd/; console.log(dateTime.test("01-30-2003 15:20")); console.log(dateTime.test("30-jan-2003 15:20"));
That looks completely awful, doesn’t it? Half of it is backslashes, producing a background noise that makes it hard to spot the actual pattern expressed. We’ll see a slightly improved version of this expression later.
These backslash codes can also be used inside square brackets. For example, [d.]
means any digit or a period character. But the period itself, between square brackets, loses its special meaning. The same goes for other special characters, such as +
.
To invert a set of characters—that is, to express that you want to match any character except the ones in the set—you can write a caret (^
) character after the opening bracket.
let notBinary = /[^01]/; console.log(notBinary.test("1100100010100110")); console.log(notBinary.test("1100100010200110"));
Repeating parts of a pattern
We now know how to match a single digit. What if we want to match a whole number—a sequence of one or more digits?
When you put a plus sign (+
) after something in a regular expression, it indicates that the element may be repeated more than once. Thus, /d+/
matches one or more digit characters.
console.log(/'d+'/.test("'123'")); console.log(/'d+'/.test("''")); console.log(/'d*'/.test("'123'")); console.log(/'d*'/.test("''"));
The star (*
) has a similar meaning but also allows the pattern to match zero times. Something with a star after it never prevents a pattern from matching—it’ll just match zero instances if it can’t find any suitable text to match.
A question mark makes a part of a pattern optional, meaning it may occur zero times or one time. In the following example, the u character is allowed to occur, but the pattern also matches when it is missing.
let neighbor = /neighbou?r/; console.log(neighbor.test("neighbour")); console.log(neighbor.test("neighbor"));
To indicate that a pattern should occur a precise number of times, use braces. Putting {4}
after an element, for example, requires it to occur exactly four times. It is also possible to specify a range this way: {2,4}
means the element must occur at least twice and at most four times.
Here is another version of the date and time pattern that allows both single- and double-digit days, months, and hours. It is also slightly easier to decipher.
let dateTime = /d{1,2}-d{1,2}-d{4} d{1,2}:d{2}/; console.log(dateTime.test("1-30-2003 8:45"));
You can also specify open-ended ranges when using braces by omitting the number after the comma. So, {5,}
means five or more times.
Grouping subexpressions
To use an operator like *
or +
on more than one element at a time, you have to use parentheses. A part of a regular expression that is enclosed in parentheses counts as a single element as far as the operators following it are concerned.
let cartoonCrying = /boo+(hoo+)+/i; console.log(cartoonCrying.test("Boohoooohoohooo"));
The first and second +
characters apply only to the second o in boo and hoo, respectively. The third +
applies to the whole group (hoo+)
, matching one or more sequences like that.
The i
at the end of the expression in the example makes this regular expression case insensitive, allowing it to match the uppercase B in the input string, even though the pattern is itself all lowercase.
Matches and groups
The test
method is the absolute simplest way to match a regular expression. It tells you only whether it matched and nothing else. Regular expressions also have an exec
(execute) method that will return null
if no match was found and return an object with information about the match otherwise.
let match = /d+/.exec("one two 100"); console.log(match); console.log(match.index);
An object returned from exec
has an index
property that tells us where in the string the successful match begins. Other than that, the object looks like (and in fact is) an array of strings, whose first element is the string that was matched. In the previous example, this is the sequence of digits that we were looking for.
String values have a match
method that behaves similarly.
console.log("one two 100".match(/d+/));
When the regular expression contains subexpressions grouped with parentheses, the text that matched those groups will also show up in the array. The whole match is always the first element. The next element is the part matched by the first group (the one whose opening parenthesis comes first in the expression), then the second group, and so on.
let quotedText = /'([^']*)'/; console.log(quotedText.exec("she said 'hello'"));
When a group does not end up being matched at all (for example, when followed by a question mark), its position in the output array will hold undefined
. Similarly, when a group is matched multiple times, only the last match ends up in the array.
console.log(/bad(ly)?/.exec("bad")); console.log(/(d)+/.exec("123"));
Groups can be useful for extracting parts of a string. If we don’t just want to verify whether a string contains a date but also extract it and construct an object that represents it, we can wrap parentheses around the digit patterns and directly pick the date out of the result of exec
.
But first we’ll take a brief detour, in which we discuss the built-in way to represent date and time values in JavaScript.
The Date class
JavaScript has a standard class for representing dates—or, rather, points in time. It is called Date
. If you simply create a date object using new
, you get the current date and time.
console.log(new Date());
You can also create an object for a specific time.
console.log(new Date(2009, 11, 9)); console.log(new Date(2009, 11, 9, 12, 59, 59, 999));
JavaScript uses a convention where month numbers start at zero (so December is 11), yet day numbers start at one. This is confusing and silly. Be careful.
The last four arguments (hours, minutes, seconds, and milliseconds) are optional and taken to be zero when not given.
Timestamps are stored as the number of milliseconds since the start of 1970, in the UTC time zone. This follows a convention set by “Unix time”, which was invented around that time. You can use negative numbers for times before 1970. The getTime
method on a date object returns this number. It is big, as you can imagine.
console.log(new Date(2013, 11, 19).getTime()); console.log(new Date(1387407600000));
If you give the Date
constructor a single argument, that argument is treated as such a millisecond count. You can get the current millisecond count by creating a new Date
object and calling getTime
on it or by calling the Date.now
function.
Date objects provide methods such as getFullYear
, getMonth
, getDate
, getHours
, getMinutes
, and getSeconds
to extract their components. Besides getFullYear
there’s also getYear
, which gives you the year minus 1900 (98
or 119
) and is mostly useless.
Putting parentheses around the parts of the expression that we are interested in, we can now create a date object from a string.
function getDate(string) { let [_, month, day, year] = /(d{1,2})-(d{1,2})-(d{4})/.exec(string); return new Date(year, month - 1, day); } console.log(getDate("1-30-2003"));
The _
(underscore) binding is ignored and used only to skip the full match element in the array returned by exec
.
Word and string boundaries
Unfortunately, getDate
will also happily extract the nonsensical date 00-1-3000 from the string "100-1-30000"
. A match may happen anywhere in the string, so in this case, it’ll just start at the second character and end at the second-to-last character.
If we want to enforce that the match must span the whole string, we can add the markers ^
and $
. The caret matches the start of the input string, whereas the dollar sign matches the end. So, /^d+$/
matches a string consisting entirely of one or more digits, /^!/
matches any string that starts with an exclamation mark, and /x^/
does not match any string (there cannot be an x before the start of the string).
If, on the other hand, we just want to make sure the date starts and ends on a word boundary, we can use the marker b
. A word boundary can be the start or end of the string or any point in the string that has a word character (as in w
) on one side and a nonword character on the other.
console.log(/cat/.test("concatenate")); console.log(/bcatb/.test("concatenate"));
Note that a boundary marker doesn’t match an actual character. It just enforces that the regular expression matches only when a certain condition holds at the place where it appears in the pattern.
Choice patterns
Say we want to know whether a piece of text contains not only a number but a number followed by one of the words pig, cow, or chicken, or any of their plural forms.
We could write three regular expressions and test them in turn, but there is a nicer way. The pipe character (|
) denotes a choice between the pattern to its left and the pattern to its right. So I can say this:
let animalCount = /bd+ (pig|cow|chicken)s?b/; console.log(animalCount.test("15 pigs")); console.log(animalCount.test("15 pigchickens"));
Parentheses can be used to limit the part of the pattern that the pipe operator applies to, and you can put multiple such operators next to each other to express a choice between more than two alternatives.
The mechanics of matching
Conceptually, when you use exec
or test
, the regular expression engine looks for a match in your string by trying to match the expression first from the start of the string, then from the second character, and so on, until it finds a match or reaches the end of the string. It’ll either return the first match that can be found or fail to find any match at all.
To do the actual matching, the engine treats a regular expression something like a flow diagram. This is the diagram for the livestock expression in the previous example:
Our expression matches if we can find a path from the left side of the diagram to the right side. We keep a current position in the string, and every time we move through a box, we verify that the part of the string after our current position matches that box.
So if we try to match "the 3 pigs"
from position 4, our progress through the flow chart would look like this:
-
At position 4, there is a word boundary, so we can move past the first box.
-
Still at position 4, we find a digit, so we can also move past the second box.
-
At position 5, one path loops back to before the second (digit) box, while the other moves forward through the box that holds a single space character. There is a space here, not a digit, so we must take the second path.
-
We are now at position 6 (the start of pigs) and at the three-way branch in the diagram. We don’t see cow or chicken here, but we do see pig, so we take that branch.
-
At position 9, after the three-way branch, one path skips the s box and goes straight to the final word boundary, while the other path matches an s. There is an s character here, not a word boundary, so we go through the s box.
-
We’re at position 10 (the end of the string) and can match only a word boundary. The end of a string counts as a word boundary, so we go through the last box and have successfully matched this string.
Backtracking
The regular expression /b([01]+b|[da-f]+h|d+)b/
matches either a binary number followed by a b, a hexadecimal number (that is, base 16, with the letters a to f standing for the digits 10 to 15) followed by an h, or a regular decimal number with no suffix character. This is the corresponding diagram:
When matching this expression, it will often happen that the top (binary) branch is entered even though the input does not actually contain a binary number. When matching the string "103"
, for example, it becomes clear only at the 3 that we are in the wrong branch. The string does match the expression, just not the branch we are currently in.
So the matcher backtracks. When entering a branch, it remembers its current position (in this case, at the start of the string, just past the first boundary box in the diagram) so that it can go back and try another branch if the current one does not work out. For the string "103"
, after encountering the 3 character, it will start trying the branch for hexadecimal numbers, which fails again because there is no h after the number. So it tries the decimal number branch. This one fits, and a match is reported after all.
The matcher stops as soon as it finds a full match. This means that if multiple branches could potentially match a string, only the first one (ordered by where the branches appear in the regular expression) is used.
Backtracking also happens for repetition operators like + and *
. If you match /^.*x/
against "abcxe"
, the .*
part will first try to consume the whole string. The engine will then realize that it needs an x to match the pattern. Since there is no x past the end of the string, the star operator tries to match one character less. But the matcher doesn’t find an x after abcx
either, so it backtracks again, matching the star operator to just abc
. Now it finds an x where it needs it and reports a successful match from positions 0 to 4.
It is possible to write regular expressions that will do a lot of backtracking. This problem occurs when a pattern can match a piece of input in many different ways. For example, if we get confused while writing a binary-number regular expression, we might accidentally write something like /([01]+)+b/
.
If that tries to match some long series of zeros and ones with no trailing b character, the matcher first goes through the inner loop until it runs out of digits. Then it notices there is no b, so it backtracks one position, goes through the outer loop once, and gives up again, trying to backtrack out of the inner loop once more. It will continue to try every possible route through these two loops. This means the amount of work doubles with each additional character. For even just a few dozen characters, the resulting match will take practically forever.
The replace method
String values have a replace
method that can be used to replace part of the string with another string.
console.log("papa".replace("p", "m"));
The first argument can also be a regular expression, in which case the first match of the regular expression is replaced. When a g
option (for global) is added to the regular expression, all matches in the string will be replaced, not just the first.
console.log("Borobudur".replace(/[ou]/, "a")); console.log("Borobudur".replace(/[ou]/g, "a"));
It would have been sensible if the choice between replacing one match or all matches was made through an additional argument to replace
or by providing a different method, replaceAll
. But for some unfortunate reason, the choice relies on a property of the regular expression instead.
The real power of using regular expressions with replace
comes from the fact that we can refer to matched groups in the replacement string. For example, say we have a big string containing the names of people, one name per line, in the format Lastname, Firstname
. If we want to swap these names and remove the comma to get a Firstname Lastname
format, we can use the following code:
console.log( "Liskov, BarbaranMcCarthy, JohnnWadler, Philip" .replace(/(w+), (w+)/g, "$2 $1"));
The $1
and $2
in the replacement string refer to the parenthesized groups in the pattern. $1
is replaced by the text that matched against the first group, $2
by the second, and so on, up to $9
. The whole match can be referred to with $&
.
It is possible to pass a function—rather than a string—as the second argument to replace
. For each replacement, the function will be called with the matched groups (as well as the whole match) as arguments, and its return value will be inserted into the new string.
Here’s a small example:
let s = "the cia and fbi"; console.log(s.replace(/b(fbi|cia)b/g, str => str.toUpperCase()));
Here’s a more interesting one:
let stock = "1 lemon, 2 cabbages, and 101 eggs"; function minusOne(match, amount, unit) { amount = Number(amount) - 1; if (amount == 1) { unit = unit.slice(0, unit.length - 1); } else if (amount == 0) { amount = "no"; } return amount + " " + unit; } console.log(stock.replace(/(d+) (w+)/g, minusOne));
This takes a string, finds all occurrences of a number followed by an alphanumeric word, and returns a string wherein every such occurrence is decremented by one.
The (d+)
group ends up as the amount
argument to the function, and the (w+)
group gets bound to unit
. The function converts amount
to a number—which always works since it matched d+
—and makes some adjustments in case there is only one or zero left.
Greed
It is possible to use replace
to write a function that removes all comments from a piece of JavaScript code. Here is a first attempt:
function stripComments(code) { return code.replace(///.*|/*[^]**//g, ""); } console.log(stripComments("1 + /* 2 */3")); console.log(stripComments("x = 10;// ten!")); console.log(stripComments("1 /* a */+/* b */ 1"));
The part before the or operator matches two slash characters followed by any number of non-newline characters. The part for multiline comments is more involved. We use [^]
(any character that is not in the empty set of characters) as a way to match any character. We cannot just use a period here because block comments can continue on a new line, and the period character does not match newline characters.
But the output for the last line appears to have gone wrong. Why?
The [^]*
part of the expression, as I described in the section on backtracking, will first match as much as it can. If that causes the next part of the pattern to fail, the matcher moves back one character and tries again from there. In the example, the matcher first tries to match the whole rest of the string and then moves back from there. It will find an occurrence of */
after going back four characters and match that. This is not what we wanted—the intention was to match a single comment, not to go all the way to the end of the code and find the end of the last block comment.
Because of this behavior, we say the repetition operators (+
, *
, ?
, and {}
) are greedy, meaning they match as much as they can and backtrack from there. If you put a question mark after them (+?
, *?
, ??
, {}?
), they become nongreedy and start by matching as little as possible, matching more only when the remaining pattern does not fit the smaller match.
And that is exactly what we want in this case. By having the star match the smallest stretch of characters that brings us to a */
, we consume one block comment and nothing more.
function stripComments(code) { return code.replace(///.*|/*[^]*?*//g, ""); } console.log(stripComments("1 /* a */+/* b */ 1"));
A lot of bugs in regular expression programs can be traced to unintentionally using a greedy operator where a nongreedy one would work better. When using a repetition operator, consider the nongreedy variant first.
Dynamically creating RegExp objects
There are cases where you might not know the exact pattern you need to match against when you are writing your code. Say you want to look for the user’s name in a piece of text and enclose it in underscore characters to make it stand out. Since you will know the name only once the program is actually running, you can’t use the slash-based notation.
But you can build up a string and use the RegExp
constructor on that. Here’s an example:
let name = "harry"; let text = "Harry is a suspicious character."; let regexp = new RegExp("\b(" + name + ")\b", "gi"); console.log(text.replace(regexp, "_$1_"));
When creating the b
boundary markers, we have to use two backslashes because we are writing them in a normal string, not a slash-enclosed regular expression. The second argument to the RegExp
constructor contains the options for the regular expression—in this case, "gi"
for global and case insensitive.
But what if the name is "dea+hl[]rd"
because our user is a nerdy teenager? That would result in a nonsensical regular expression that won’t actually match the user’s name.
To work around this, we can add backslashes before any character that has a special meaning.
let name = "dea+hl[]rd"; let text = "This dea+hl[]rd guy is super annoying."; let escaped = name.replace(/[\[.+*?(){|^$]/g, "\$&"); let regexp = new RegExp("\b" + escaped + "\b", "gi"); console.log(text.replace(regexp, "_$&_"));
The search method
The indexOf
method on strings cannot be called with a regular expression. But there is another method, search
, that does expect a regular expression. Like indexOf
, it returns the first index on which the expression was found, or -1 when it wasn’t found.
console.log(" word".search(/S/)); console.log(" ".search(/S/));
Unfortunately, there is no way to indicate that the match should start at a given offset (like we can with the second argument to indexOf
), which would often be useful.
The lastIndex property
The exec
method similarly does not provide a convenient way to start searching from a given position in the string. But it does provide an inconvenient way.
Regular expression objects have properties. One such property is source
, which contains the string that expression was created from. Another property is lastIndex
, which controls, in some limited circumstances, where the next match will start.
Those circumstances are that the regular expression must have the global (g
) or sticky (y
) option enabled, and the match must happen through the exec
method. Again, a less confusing solution would have been to just allow an extra argument to be passed to exec
, but confusion is an essential feature of JavaScript’s regular expression interface.
let pattern = /y/g; pattern.lastIndex = 3; let match = pattern.exec("xyzzy"); console.log(match.index); console.log(pattern.lastIndex);
If the match was successful, the call to exec
automatically updates the lastIndex
property to point after the match. If no match was found, lastIndex
is set back to zero, which is also the value it has in a newly constructed regular expression object.
The difference between the global and the sticky options is that, when sticky is enabled, the match will succeed only if it starts directly at lastIndex
, whereas with global, it will search ahead for a position where a match can start.
let global = /abc/g; console.log(global.exec("xyz abc")); let sticky = /abc/y; console.log(sticky.exec("xyz abc"));
When using a shared regular expression value for multiple exec
calls, these automatic updates to the lastIndex
property can cause problems. Your regular expression might be accidentally starting at an index that was left over from a previous call.
let digit = /d/g; console.log(digit.exec("here it is: 1")); console.log(digit.exec("and now: 1"));
Another interesting effect of the global option is that it changes the way the match
method on strings works. When called with a global expression, instead of returning an array similar to that returned by exec
, match
will find all matches of the pattern in the string and return an array containing the matched strings.
console.log("Banana".match(/an/g));
So be cautious with global regular expressions. The cases where they are necessary—calls to replace
and places where you want to explicitly use lastIndex
—are typically the only places where you want to use them.
Looping over matches
A common thing to do is to scan through all occurrences of a pattern in a string, in a way that gives us access to the match object in the loop body. We can do this by using lastIndex
and exec
.
let input = "A string with 3 numbers in it... 42 and 88."; let number = /bd+b/g; let match; while (match = number.exec(input)) { console.log("Found", match[0], "at", match.index); }
This makes use of the fact that the value of an assignment expression (=
) is the assigned value. So by using match = number.exec(input)
as the condition in the while
statement, we perform the match at the start of each iteration, save its result in a binding, and stop looping when no more matches are found.
Parsing an INI file
To conclude the chapter, we’ll look at a problem that calls for regular expressions. Imagine we are writing a program to automatically collect information about our enemies from the Internet. (We will not actually write that program here, just the part that reads the configuration file. Sorry.) The configuration file looks like this:
searchengine=https://duckduckgo.com/?q=$1 spitefulness=9.7 ; comments are preceded by a semicolon... ; each section concerns an individual enemy [larry] fullname=Larry Doe type=kindergarten bully website=http://www.geocities.com/CapeCanaveral/11451 [davaeorn] fullname=Davaeorn type=evil wizard outputdir=/home/marijn/enemies/davaeorn
The exact rules for this format (which is a widely used format, usually called an INI file) are as follows:
-
Blank lines and lines starting with semicolons are ignored.
-
Lines wrapped in
[
and]
start a new section. -
Lines containing an alphanumeric identifier followed by an
=
character add a setting to the current section. -
Anything else is invalid.
Our task is to convert a string like this into an object whose properties hold strings for settings written before the first section header and subobjects for sections, with those subobjects holding the section’s settings.
Since the format has to be processed line by line, splitting up the file into separate lines is a good start. We saw the split
method in Chapter 4. Some operating systems, however, use not just a newline character to separate lines but a carriage return character followed by a newline ("rn"
). Given that the split
method also allows a regular expression as its argument, we can use a regular expression like /r?n/
to split in a way that allows both "n"
and "rn"
between lines.
function parseINI(string) { let result = {}; let section = result; string.split(/r?n/).forEach(line => { let match; if (match = line.match(/^(w+)=(.*)$/)) { section[match[1]] = match[2]; } else if (match = line.match(/^[(.*)]$/)) { section = result[match[1]] = {}; } else if (!/^s*(;.*)?$/.test(line)) { throw new Error("Line '" + line + "' is not valid."); } }); return result; } console.log(parseINI(` name=Vasilis [address] city=Tessaloniki`));
The code goes over the file’s lines and builds up an object. Properties at the top are stored directly into that object, whereas properties found in sections are stored in a separate section object. The section
binding points at the object for the current section.
There are two kinds of significant lines—section headers or property lines. When a line is a regular property, it is stored in the current section. When it is a section header, a new section object is created, and section
is set to point at it.
Note the recurring use of ^
and $
to make sure the expression matches the whole line, not just part of it. Leaving these out results in code that mostly works but behaves strangely for some input, which can be a difficult bug to track down.
The pattern if (match = string.match(...))
is similar to the trick of using an assignment as the condition for while
. You often aren’t sure that your call to match
will succeed, so you can access the resulting object only inside an if
statement that tests for this. To not break the pleasant chain of else if
forms, we assign the result of the match to a binding and immediately use that assignment as the test for the if
statement.
If a line is not a section header or a property, the function checks whether it is a comment or an empty line using the expression /^s*(;.*)?$/
. Do you see how it works? The part between the parentheses will match comments, and the ?
makes sure it also matches lines containing only whitespace. When a line doesn’t match any of the expected forms, the function throws an exception.
International characters
Because of JavaScript’s initial simplistic implementation and the fact that this simplistic approach was later set in stone as standard behavior, JavaScript’s regular expressions are rather dumb about characters that do not appear in the English language. For example, as far as JavaScript’s regular expressions are concerned, a “word
character” is only one of the 26 characters in the Latin alphabet (uppercase or lowercase), decimal digits, and, for some reason, the underscore character. Things like é or β, which most definitely are word characters, will not match w
(and will match uppercase W
, the nonword category).
By a strange historical accident, s
(whitespace) does not have this problem and matches all characters that the Unicode standard considers whitespace, including things like the nonbreaking space and the Mongolian vowel separator.
Another problem is that, by default, regular expressions work on code units, as discussed in Chapter 5, not actual characters. This means characters that are composed of two code units behave strangely.
console.log(/🍎{3}/.test("🍎🍎🍎")); console.log(/<.>/.test("<🌹>")); console.log(/<.>/u.test("<🌹>"));
The problem is that the 🍎 in the first line is treated as two code units, and the {3}
part is applied only to the second one. Similarly, the dot matches a single code unit, not the two that make up the rose emoji.
You must add a u
option (for Unicode) to your regular expression to make it treat such characters properly. The wrong behavior remains the default, unfortunately, because changing that might cause problems for existing code that depends on it.
Though this was only just standardized and is, at the time of writing, not widely supported yet, it is possible to use p
in a regular expression (that must have the Unicode option enabled) to match all characters to which the Unicode standard assigns a given property.
console.log(/p{Script=Greek}/u.test("α")); console.log(/p{Script=Arabic}/u.test("α")); console.log(/p{Alphabetic}/u.test("α")); console.log(/p{Alphabetic}/u.test("!"));
Unicode defines a number of useful properties, though finding the one that you need may not always be trivial. You can use the p{Property=Value}
notation to match any character that has the given value for that property. If the property name is left off, as in p{Name}
, the name is assumed to be either a binary property such as Alphabetic
or a category such as Number
.
Summary
Regular expressions are objects that represent patterns in strings. They use their own language to express these patterns.
/abc/ |
A sequence of characters |
/[abc]/ |
Any character from a set of characters |
/[^abc]/ |
Any character not in a set of characters |
/[0-9]/ |
Any character in a range of characters |
/x+/ |
One or more occurrences of the pattern x |
/x+?/ |
One or more occurrences, nongreedy |
/x*/ |
Zero or more occurrences |
/x?/ |
Zero or one occurrence |
/x{2,4}/ |
Two to four occurrences |
/(abc)/ |
A group |
/a|b|c/ |
Any one of several patterns |
/d/ |
Any digit character |
/w/ |
An alphanumeric character (“word character”) |
/s/ |
Any whitespace character |
/./ |
Any character except newlines |
/b/ |
A word boundary |
/^/ |
Start of input |
/$/ |
End of input |
A regular expression has a method test
to test whether a given string matches it. It also has a method exec
that, when a match is found, returns an array containing all matched groups. Such an array has an index
property that indicates where the match started.
Strings have a match
method to match them against a regular expression and a search
method to search for one, returning only the starting position of the match. Their replace
method can replace matches of a pattern with a replacement string or function.
Regular expressions can have options, which are written after the closing slash. The i
option makes the match case insensitive. The g
option makes the expression global, which, among other things, causes the replace
method to replace all instances instead of just the first. The y
option makes it sticky, which means that it will not search ahead and skip part of the string when looking for a match. The u
option turns on Unicode mode, which fixes a number of problems around the handling of characters that take up two code units.
Regular expressions are a sharp tool with an awkward handle. They simplify some tasks tremendously but can quickly become unmanageable when applied to complex problems. Part of knowing how to use them is resisting the urge to try to shoehorn things that they cannot cleanly express into them.
Exercises
It is almost unavoidable that, in the course of working on these exercises, you will get confused and frustrated by some regular expression’s inexplicable behavior. Sometimes it helps to enter your expression into an online tool like https://debuggex.com to see whether its visualization corresponds to what you intended and to experiment with the way it responds to various input strings.
Regexp golf
Code golf is a term used for the game of trying to express a particular program in as few characters as possible. Similarly, regexp golf is the practice of writing as tiny a regular expression as possible to match a given pattern, and only that pattern.
For each of the following items, write a regular expression to test whether any of the given substrings occur in a string. The regular expression should match only strings containing one of the substrings described. Do not worry about word boundaries unless explicitly mentioned. When your expression works, see whether you can make it any smaller.
-
car and cat
-
pop and prop
-
ferret, ferry, and ferrari
-
Any word ending in ious
-
A whitespace character followed by a period, comma, colon, or semicolon
-
A word longer than six letters
-
A word without the letter e (or E)
Refer to the table in the chapter summary for help. Test each solution with a few test strings.
verify(/.../, ["my car", "bad cats"], ["camper", "high art"]); verify(/.../, ["pop culture", "mad props"], ["plop", "prrrop"]); verify(/.../, ["ferret", "ferry", "ferrari"], ["ferrum", "transfer A"]); verify(/.../, ["how delicious", "spacious room"], ["ruinous", "consciousness"]); verify(/.../, ["bad punctuation ."], ["escape the period"]); verify(/.../, ["Siebentausenddreihundertzweiundzwanzig"], ["no", "three small words"]); verify(/.../, ["red platypus", "wobbling nest"], ["earth bed", "learning ape", "BEET"]); function verify(regexp, yes, no) { if (regexp.source == "...") return; for (let str of yes) if (!regexp.test(str)) { console.log(`Failure to match '${str}'`); } for (let str of no) if (regexp.test(str)) { console.log(`Unexpected match for '${str}'`); } }
Quoting style
Imagine you have written a story and used single quotation marks throughout to mark pieces of dialogue. Now you want to replace all the dialogue quotes with double quotes, while keeping the single quotes used in contractions like aren’t.
Think of a pattern that distinguishes these two kinds of quote usage and craft a call to the replace
method that does the proper replacement.
let text = "'I'm the cook,' he said, 'it's my job.'"; console.log(text.replace(/A/g, "B"));
The most obvious solution is to replace only quotes with a nonword character on at least one side—something like /W'|'W/
. But you also have to take the start and end of the line into account.
In addition, you must ensure that the replacement also includes the characters that were matched by the W
pattern so that those are not dropped. This can be done by wrapping them in parentheses and including their groups in the replacement string ($1
, $2
). Groups that are not matched will be replaced by nothing.
Numbers again
Write an expression that matches only JavaScript-style numbers. It must support an optional minus or plus sign in front of the number, the decimal dot, and exponent notation—5e-3
or 1E10
—again with an optional sign in front of the exponent. Also note that it is not necessary for there to be digits in front of or after the dot, but the number cannot be a dot alone. That is, .5
and 5.
are valid JavaScript numbers, but a lone dot isn’t.
let number = /^...$/; for (let str of ["1", "-1", "+15", "1.55", ".5", "5.", "1.3e2", "1E-4", "1e+12"]) { if (!number.test(str)) { console.log(`Failed to match '${str}'`); } } for (let str of ["1a", "+-1", "1.2.3", "1+1", "1e4.5", ".5.", "1f5", "."]) { if (number.test(str)) { console.log(`Incorrectly accepted '${str}'`); } }
First, do not forget the backslash in front of the period.
Matching the optional sign in front of the number, as well as in front of the exponent, can be done with [+-]?
or (+|-|)
(plus, minus, or nothing).
The more complicated part of the exercise is the problem of matching both "5."
and ".5"
without also matching "."
. For this, a good solution is to use the |
operator to separate the two cases—either one or more digits optionally followed by a dot and zero or more digits or a dot followed by one or more digits.
Finally, to make the e case insensitive, either add an i
option to the regular expression or use [eE]
.
If just looking for a single character in a set of strings, I would think basic string manipulation would be sufficient.
What is not clear to me from your question is why you are using word boundaries in your regex definition when the array itself is just single words. Is your intent to analyze individual words in each of the array strings (with string perhaps consisting of multiple words) or are you only truly going to have single word string in the array?
For now, I will provide answer given the assumption of an array of single words.
To do that, I would simply use Array.filter()
in combination with String.indexOf()
.
var needle = 'e';
var haystack = ["platypus", "elvis", "javascript", "stackoverflow"];
var filtered = haystack.filter( str => (str.indexOf(needle) === -1) );
Based on your comment that array entries could have multiple words, I would suggest using Array.reduce()
to build all array of all words across all entries that do not have have the needle character in them.
var needle = 'e';
// note global flag here to get all matches
var regex = new RegExp('\b([^' + needle + ']+)\b', 'g');
var haystack = ["platypus", "elvis", "javascript", "stackoverflow", "some multi-word string"];
var result = haystack.reduce(
(aggregator, str) => {
while (match = regex.exec(str) !== null) {
aggregator.push(match[1]);
}
},
[]
);
console.log(result); // ["platypus", "javascript", "multi-word", "string"]