|
| 1 | +# Patterns and flags |
| 2 | + |
| 3 | +Regular expressions is a powerful way of searching and replacing inside a string. |
| 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. |
| 8 | + |
| 9 | +[cut] |
| 10 | + |
| 11 | +## Regular expressions |
| 12 | + |
| 13 | +A regular expression (also "regexp", or just "reg") consists of a *pattern* and optional *flags*. |
| 14 | + |
| 15 | +There are two syntaxes to create a regular expression object. |
| 16 | + |
| 17 | +The long syntax: |
| 18 | + |
| 19 | +```js |
| 20 | +regexp = new RegExp("pattern", "flags"); |
| 21 | +``` |
| 22 | + |
| 23 | +...And the short one, using slashes `"/"`: |
| 24 | + |
| 25 | +```js |
| 26 | +regexp = /pattern/; // no flags флагов |
| 27 | +regexp = /pattern/gmi; // with flags g,m and i (to be covered soon) |
| 28 | +``` |
| 29 | + |
| 30 | +Slashes `"/"` tell Javascript that we are creating a regular expression. They play the same role as quotes for strings. |
| 31 | + |
| 32 | +## Usage |
| 33 | + |
| 34 | +To search inside a string, we can use method [search](mdn:js/String/search). |
| 35 | + |
| 36 | +Here's an example: |
| 37 | + |
| 38 | +```js run |
| 39 | +let str = "I love Javascript!"; // will search here |
| 40 | + |
| 41 | +let regexp = /love/; |
| 42 | +alert( str.search(regexp) ); // 2 |
| 43 | +``` |
| 44 | + |
| 45 | +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. |
| 46 | + |
| 47 | +The code above is the same as: |
| 48 | + |
| 49 | +```js run |
| 50 | +let str = "I love Javascript!"; // will search here |
| 51 | + |
| 52 | +let substr = 'love'; |
| 53 | +alert( str.search(substr) ); // 2 |
| 54 | +``` |
| 55 | + |
| 56 | +So searching for `pattern:/love/` is the same as searching for `"love"`. |
| 57 | + |
| 58 | +But that's only for now. Soon we'll create more complex regular expressions with much searching more power. |
| 59 | + |
| 60 | +```smart header="Colors" |
| 61 | +From here on the color scheme is: |
| 62 | + |
| 63 | +- regexp -- `pattern:red` |
| 64 | +- string (where we search) -- `subject:blue` |
| 65 | +- result -- `match:green` |
| 66 | +``` |
| 67 | + |
| 68 | + |
| 69 | +````smart header="When to use `new RegExp`?" |
| 70 | +Normally we use the short syntax `/.../`. But it does not allow any variables insertions, so we must know the exact regexp at the time of writing the code. |
| 71 | + |
| 72 | +From the other hand, `new RegExp` allows to construct a pattern dynamically from a string. |
| 73 | + |
| 74 | +So we can figure out what we need to search and create `new RegExp` from it: |
| 75 | + |
| 76 | +```js run |
| 77 | +let search = prompt("What you want to search?", "love"); |
| 78 | +let regexp = new RegExp(search); |
| 79 | + |
| 80 | +// find whatever the user wants |
| 81 | +alert( "I love Javascript".search(regexp)); |
| 82 | +``` |
| 83 | +```` |
| 84 | + |
| 85 | + |
| 86 | +## Flags |
| 87 | + |
| 88 | +Regular expressions may have flags that affect the search. |
| 89 | + |
| 90 | +There are only 5 of them in Javascript: |
| 91 | + |
| 92 | +`i` |
| 93 | +: With this flag the search is case-insensitive: no difference between `А` and `а` (see the example below). |
| 94 | + |
| 95 | +`g` |
| 96 | +: With this flag the search looks for all matches, without it -- only the first one (we'll see uses in the next chapter). |
| 97 | + |
| 98 | +`m` |
| 99 | +: Multiline mode (will cover in [todo]). |
| 100 | + |
| 101 | +`u` |
| 102 | +: Enables full unicode support. The flag enables correct processing of surrogate pairs. More about that in the chapter <info:regexp-unicode>. |
| 103 | + |
| 104 | +`y` |
| 105 | +: Sticky mode (covered in [todo]) |
| 106 | + |
| 107 | + |
| 108 | + |
| 109 | +## The "i" flag |
| 110 | + |
| 111 | +The simplest flag is `i`. |
| 112 | + |
| 113 | +An example with it: |
| 114 | + |
| 115 | +```js run |
| 116 | +let str = "I love Javascript!"; |
| 117 | + |
| 118 | +alert( str.search(/LOVE/) ); // -1 (not found) |
| 119 | +alert( str.search(/LOVE/i) ); // 2 |
| 120 | +``` |
| 121 | + |
| 122 | +1. The first search returns `-1` (not found), because the search is case-sensitive by default. |
| 123 | +2. With the flag `pattern:/LOVE/i` the search found `match:love` at position 2. |
| 124 | + |
| 125 | +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. |
| 126 | + |
| 127 | + |
| 128 | +## Summary |
| 129 | + |
| 130 | +- A regular expression consists of a pattern and optional flags: `g`, `i`, `m`, `u`, `y`. |
| 131 | +- Without flags and special symbols that we'll study later, the search by a regexp is the same as a substring search. |
| 132 | +- The method `str.search(regexp)` returns the index where the match is found or `-1` if there's no match. |
0 commit comments