renames
This commit is contained in:
parent
787d58a83f
commit
455d300d8d
280 changed files with 2 additions and 2 deletions
131
5-regular-expressions/01-regexp-introduction/article.md
Normal file
131
5-regular-expressions/01-regexp-introduction/article.md
Normal file
|
@ -0,0 +1,131 @@
|
|||
# Patterns and flags
|
||||
|
||||
Regular expressions is a powerful way of searching and replacing inside a string.
|
||||
|
||||
In JavaScript regular expressions are implemented using objects of a built-in `RegExp` class and integrated with strings.
|
||||
|
||||
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.
|
||||
|
||||
[cut]
|
||||
|
||||
## Regular expressions
|
||||
|
||||
A regular expression (also "regexp", or just "reg") consists of a *pattern* and optional *flags*.
|
||||
|
||||
There are two syntaxes to create a regular expression object.
|
||||
|
||||
The long syntax:
|
||||
|
||||
```js
|
||||
regexp = new RegExp("pattern", "flags");
|
||||
```
|
||||
|
||||
...And the short one, using slashes `"/"`:
|
||||
|
||||
```js
|
||||
regexp = /pattern/; // no flags
|
||||
regexp = /pattern/gmi; // with flags g,m and i (to be covered soon)
|
||||
```
|
||||
|
||||
Slashes `"/"` tell JavaScript that we are creating a regular expression. They play the same role as quotes for strings.
|
||||
|
||||
## Usage
|
||||
|
||||
To search inside a string, we can use method [search](mdn:js/String/search).
|
||||
|
||||
Here's an example:
|
||||
|
||||
```js run
|
||||
let str = "I love JavaScript!"; // will search here
|
||||
|
||||
let regexp = /love/;
|
||||
alert( str.search(regexp) ); // 2
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
The code above is the same as:
|
||||
|
||||
```js run
|
||||
let str = "I love JavaScript!"; // will search here
|
||||
|
||||
let substr = 'love';
|
||||
alert( str.search(substr) ); // 2
|
||||
```
|
||||
|
||||
So searching for `pattern:/love/` is the same as searching for `"love"`.
|
||||
|
||||
But that's only for now. Soon we'll create more complex regular expressions with much searching more power.
|
||||
|
||||
```smart header="Colors"
|
||||
From here on the color scheme is:
|
||||
|
||||
- regexp -- `pattern:red`
|
||||
- string (where we search) -- `subject:blue`
|
||||
- result -- `match:green`
|
||||
```
|
||||
|
||||
|
||||
````smart header="When to use `new RegExp`?"
|
||||
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.
|
||||
|
||||
From the other hand, `new RegExp` allows to construct a pattern dynamically from a string.
|
||||
|
||||
So we can figure out what we need to search and create `new RegExp` from it:
|
||||
|
||||
```js run
|
||||
let search = prompt("What you want to search?", "love");
|
||||
let regexp = new RegExp(search);
|
||||
|
||||
// find whatever the user wants
|
||||
alert( "I love JavaScript".search(regexp));
|
||||
```
|
||||
````
|
||||
|
||||
|
||||
## Flags
|
||||
|
||||
Regular expressions may have flags that affect the search.
|
||||
|
||||
There are only 5 of them in JavaScript:
|
||||
|
||||
`i`
|
||||
: With this flag the search is case-insensitive: no difference between `A` and `a` (see the example below).
|
||||
|
||||
`g`
|
||||
: With this flag the search looks for all matches, without it -- only the first one (we'll see uses in the next chapter).
|
||||
|
||||
`m`
|
||||
: Multiline mode (covered in the chapter <info:regexp-multiline>).
|
||||
|
||||
`u`
|
||||
: Enables full unicode support. The flag enables correct processing of surrogate pairs. More about that in the chapter <info:regexp-unicode>.
|
||||
|
||||
`y`
|
||||
: Sticky mode (covered in the [next chapter](info:regexp-methods#y-flag))
|
||||
|
||||
|
||||
## The "i" flag
|
||||
|
||||
The simplest flag is `i`.
|
||||
|
||||
An example with it:
|
||||
|
||||
```js run
|
||||
let str = "I love JavaScript!";
|
||||
|
||||
alert( str.search(/LOVE/) ); // -1 (not found)
|
||||
alert( str.search(/LOVE/i) ); // 2
|
||||
```
|
||||
|
||||
1. The first search returns `-1` (not found), because the search is case-sensitive by default.
|
||||
2. With the flag `pattern:/LOVE/i` the search found `match:love` at position 2.
|
||||
|
||||
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.
|
||||
|
||||
|
||||
## Summary
|
||||
|
||||
- A regular expression consists of a pattern and optional flags: `g`, `i`, `m`, `u`, `y`.
|
||||
- Without flags and special symbols that we'll study later, the search by a regexp is the same as a substring search.
|
||||
- The method `str.search(regexp)` returns the index where the match is found or `-1` if there's no match.
|
Loading…
Add table
Add a link
Reference in a new issue