Skip to content

Commit 7105181

Browse files
gmertkgmertk
committed
Sync with upstream master
1 parent f926425 commit 7105181

File tree

2 files changed

+113
-59
lines changed

2 files changed

+113
-59
lines changed

‎9-regular-expressions/01-regexp-introduction/article.md‎

Lines changed: 113 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,65 @@
11
# Patterns and flags
22

3+
Regular expressions are patterns that provide a powerful way to search and replace in text.
4+
5+
In JavaScript, they are available via the [RegExp](mdn:js/RegExp) object, as well as being integrated in methods of strings.
6+
7+
## Regular Expressions
8+
39
A regular expression (also "regexp", or just "reg") consists of a *pattern* and optional *flags*.
410

5-
There are two syntaxes to create a regular expression object.
11+
There are two syntaxes that can be used to create a regular expression object.
612

7-
The long syntax:
13+
The "long" syntax:
814

915
```js
1016
regexp = new RegExp("pattern", "flags");
1117
```
1218

13-
...And the short one, using slashes `"/"`:
19+
And the "short" one, using slashes `"/"`:
1420

1521
```js
1622
regexp = /pattern/; // no flags
1723
regexp = /pattern/gmi; // with flags g,m and i (to be covered soon)
1824
```
1925

20-
Slashes `"/"` tell JavaScript that we are creating a regular expression. They play the same role as quotes for strings.
26+
Slashes `pattern:/.../` tell JavaScript that we are creating a regular expression. They play the same role as quotes for strings.
2127

22-
## Usage
28+
In both cases `regexp` becomes an instance of the built-in `RegExp` class.
2329

24-
To search inside a string, we can use method [search](mdn:js/String/search).
30+
The main difference between these two syntaxes is that pattern using slashes `/.../` does not allow for expressions to be inserted (like string template literals with `${...}`). They are fully static.
2531

26-
Here's an example:
32+
Slashes are used when we know the regular expression at the code writing time -- and that's the most common situation. While `new RegExp`, is more often used when we need to create a regexp "on the fly" from a dynamically generated string. For instance:
2733

28-
```js run
29-
let str = "I love JavaScript!"; // will search here
34+
```js
35+
let tag = prompt("What tag do you want to find?", "h2");
3036

31-
let regexp = /love/;
32-
alert( str.search(regexp) ); // 2
37+
let regexp = new RegExp(`<${tag}>`); // same as /<h2>/ if answered "h2" in the prompt above
3338
```
3439

35-
The `str.search` method looks for the pattern `pattern:/love/` and returns the position inside the string. As we might guess, `pattern:/love/` is the simplest possible pattern. What it does is a simple substring search.
40+
## Flags
3641

37-
The code above is the same as:
42+
Regular expressions may have flags that affect the search.
3843

39-
```js run
40-
let str = "I love JavaScript!"; // will search here
44+
There are only 6 of them in JavaScript:
4145

42-
let substr = 'love';
43-
alert( str.search(substr) ); // 2
44-
```
46+
`pattern:i`
47+
: With this flag the search is case-insensitive: no difference between `A` and `a` (see the example below).
48+
49+
`pattern:g`
50+
: With this flag the search looks for all matches, without it -- only the first match is returned.
4551

46-
So searching for `pattern:/love/` is the same as searching for `"love"`.
52+
`pattern:m`
53+
: Multiline mode (covered in the chapter <info:regexp-multiline-mode>).
4754

48-
But that's only for now. Soon we'll create more complex regular expressions with much more searching power.
55+
`pattern:s`
56+
: Enables "dotall" mode, that allows a dot `pattern:.` to match newline character `\n` (covered in the chapter <info:regexp-character-classes>).
57+
58+
`pattern:u`
59+
: Enables full unicode support. The flag enables correct processing of surrogate pairs. More about that in the chapter <info:regexp-unicode>.
60+
61+
`pattern:y`
62+
: "Sticky" mode: searching at the exact position in the text (covered in the chapter <info:regexp-sticky>)
4963

5064
```smart header="Colors"
5165
From here on the color scheme is:
@@ -55,65 +69,109 @@ From here on the color scheme is:
5569
- result -- `match:green`
5670
```
5771

72+
## Searching: str.match
5873

59-
````smart header="When to use `new RegExp`?"
60-
Normally we use the short syntax `/.../`. But it does not support variable insertions `${...}`.
74+
As mentioned previously, regular expressions are integrated with string methods.
6175

62-
On the other hand, `new RegExp` allows to construct a pattern dynamically from a string, so it's more flexible.
76+
The method `str.match(regexp)` finds all matches of `regexp` in the string `str`.
6377

64-
Here's an example of a dynamically generated regexp:
78+
It has 3 working modes:
6579

66-
```js run
67-
let tag = prompt("Which tag you want to search?", "h2");
68-
let regexp = new RegExp(`<${tag}>`);
80+
1. If the regular expression has flag `pattern:g`, it returns an array of all matches:
81+
```js run
82+
let str = "We will, we will rock you";
6983

70-
// finds <h2> by default
71-
alert( "<h1> <h2> <h3>".search(regexp));
72-
```
73-
````
84+
alert( str.match(/we/gi) ); // We,we (an array of 2 substrings that match)
85+
```
86+
Please note that both `match:We` and `match:we` are found, because flag `pattern:i` makes the regular expression case-insensitive.
7487

88+
2. If there's no such flag it returns only the first match in the form of an array, with the full match at index `0` and some additional details in properties:
89+
```js run
90+
let str = "We will, we will rock you";
7591
76-
## Flags
92+
let result = str.match(/we/i); // without flag g
7793
78-
Regular expressions may have flags that affect the search.
94+
alert( result[0] ); // We (1st match)
95+
alert( result.length ); // 1
7996
80-
There are only 6 of them in JavaScript:
97+
// Details:
98+
alert( result.index ); // 0 (position of the match)
99+
alert( result.input ); // We will, we will rock you (source string)
100+
```
101+
The array may have other indexes, besides `0` if a part of the regular expression is enclosed in parentheses. We'll cover that in the chapter <info:regexp-groups>.
81102

82-
`i`
83-
: With this flag the search is case-insensitive: no difference between `A` and `a` (see the example below).
103+
3. And, finally, if there are no matches, `null` is returned (doesn't matter if there's flag `pattern:g` or not).
84104

85-
`g`
86-
: With this flag the search looks for all matches, without it -- only the first one (we'll see uses in the next chapter).
105+
This a very important nuance. If there are no matches, we don't receive an empty array, but instead receive `null`. Forgetting about that may lead to errors, e.g.:
87106
88-
`m`
89-
: Multiline mode (covered in the chapter <info:regexp-multiline-mode>).
107+
```js run
108+
let matches = "JavaScript".match(/HTML/); // = null
90109
91-
`s`
92-
: "Dotall" mode, allows `.` to match newlines (covered in the chapter <info:regexp-character-classes>).
110+
if (!matches.length) { // Error: Cannot read property 'length' of null
111+
alert("Error in the line above");
112+
}
113+
```
93114
94-
`u`
95-
: Enables full unicode support. The flag enables correct processing of surrogate pairs. More about that in the chapter <info:regexp-unicode>.
115+
If we'd like the result to always be an array, we can write it this way:
116+
117+
```js run
118+
let matches = "JavaScript".match(/HTML/)*!* || []*/!*;
119+
120+
if (!matches.length) {
121+
alert("No matches"); // now it works
122+
}
123+
```
124+
125+
## Replacing: str.replace
126+
127+
The method `str.replace(regexp, replacement)` replaces matches found using `regexp` in string `str` with `replacement` (all matches if there's flag `pattern:g`, otherwise, only the first one).
96128
97-
`y`
98-
: Sticky mode (covered in the chapter <info:regexp-sticky>)
129+
For instance:
99130
100-
We'll cover all these flags further in the tutorial.
131+
```js run
132+
// no flag g
133+
alert( "We will, we will".replace(/we/i, "I") ); // I will, we will
134+
135+
// with flag g
136+
alert( "We will, we will".replace(/we/ig, "I") ); // I will, I will
137+
```
138+
139+
The second argument is the `replacement` string. We can use special character combinations in it to insert fragments of the match:
140+
141+
| Symbols | Action in the replacement string |
142+
|--------|--------|
143+
|`$&`|inserts the whole match|
144+
|<code>$&#096;</code>|inserts a part of the string before the match|
145+
|`$'`|inserts a part of the string after the match|
146+
|`$n`|if `n` is a 1-2 digit number, then it inserts the contents of n-th parentheses, more about it in the chapter <info:regexp-groups>|
147+
|`$<name>`|inserts the contents of the parentheses with the given `name`, more about it in the chapter <info:regexp-groups>|
148+
|`$$`|inserts character `$` |
101149
102-
For now, the simplest flag is `i`, here's an example:
150+
An example with `pattern:$&`:
103151
104152
```js run
105-
let str = "I love JavaScript!";
153+
alert( "I love HTML".replace(/HTML/, "$& and JavaScript") ); // I love HTML and JavaScript
154+
```
155+
156+
## Testing: regexp.test
106157
107-
alert( str.search(/LOVE/i) ); // 2 (found lowercased)
158+
The method `regexp.test(str)` looks for at least one match, if found, returns `true`, otherwise `false`.
159+
160+
```js run
161+
let str = "I love JavaScript";
162+
let regexp = /LOVE/i;
108163

109-
alert( str.search(/LOVE/) ); // -1 (nothing found without 'i' flag)
164+
alert( regexp.test(str) ); // true
110165
```
111166
112-
So the `i` flag already makes regular expressions more powerful than a simple substring search. But there's so much more. We'll cover other flags and features in the next chapters.
167+
Later in this chapter we'll study more regular expressions, walk through more examples, and also meet other methods.
113168
169+
Full information about the methods is given in the article <info:regexp-methods>.
114170
115171
## Summary
116172
117-
- A regular expression consists of a pattern and optional flags: `g`, `i`, `m`, `u`, `s`, `y`.
118-
- Without flags and special symbols that we'll study later, the search by a regexp is the same as a substring search.
119-
- The method `str.search(regexp)` returns the index where the match is found or `-1` if there's no match. In the next chapter we'll see other methods.
173+
- A regular expression consists of a pattern and optional flags: `pattern:g`, `pattern:i`, `pattern:m`, `pattern:u`, `pattern:s`, `pattern:y`.
174+
- Without flags and special symbols (that we'll study later), the search by a regexp is the same as a substring search.
175+
- The method `str.match(regexp)` looks for matches: all of them if there's `pattern:g` flag, otherwise, only the first one.
176+
- The method `str.replace(regexp, replacement)` replaces matches found using `regexp` with `replacement`: all of them if there's `pattern:g` flag, otherwise only the first one.
177+
- The method `regexp.test(str)` returns `true` if there's at least one match, otherwise, it returns `false`.

‎9-regular-expressions/index.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
11
# Regular expressions
22

33
Regular expressions is a powerful way of doing search and replace in strings.
4-
5-
In JavaScript regular expressions are implemented using objects of a built-in `RegExp` class and integrated with strings.
6-
7-
Please note that regular expressions vary between programming languages. In this tutorial we concentrate on JavaScript. Of course there's a lot in common, but they are a somewhat different in Perl, Ruby, PHP etc.

0 commit comments

Comments
 (0)