Merge pull request #1590 from wgolledge/patch-1
Update 01-regexp-introduction
This commit is contained in:
commit
978a3a2911
1 changed files with 17 additions and 17 deletions
|
@ -1,14 +1,14 @@
|
||||||
# Patterns and flags
|
# Patterns and flags
|
||||||
|
|
||||||
Regular expressions is a powerful way to search and replace in text.
|
Regular expressions are patterns that provide a powerful way to search and replace in text.
|
||||||
|
|
||||||
In JavaScript, they are available as [RegExp](mdn:js/RegExp) object, and also integrated in methods of strings.
|
In JavaScript, they are available via the [RegExp](mdn:js/RegExp) object, as well as being integrated in methods of strings.
|
||||||
|
|
||||||
## Regular Expressions
|
## Regular Expressions
|
||||||
|
|
||||||
A regular expression (also "regexp", or just "reg") consists of a *pattern* and optional *flags*.
|
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.
|
There are two syntaxes that can be used to create a regular expression object.
|
||||||
|
|
||||||
The "long" syntax:
|
The "long" syntax:
|
||||||
|
|
||||||
|
@ -16,7 +16,7 @@ The "long" syntax:
|
||||||
regexp = new RegExp("pattern", "flags");
|
regexp = new RegExp("pattern", "flags");
|
||||||
```
|
```
|
||||||
|
|
||||||
...And the short one, using slashes `"/"`:
|
And the "short" one, using slashes `"/"`:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
regexp = /pattern/; // no flags
|
regexp = /pattern/; // no flags
|
||||||
|
@ -25,11 +25,11 @@ regexp = /pattern/gmi; // with flags g,m and i (to be covered soon)
|
||||||
|
|
||||||
Slashes `pattern:/.../` tell JavaScript that we are creating a regular expression. They play the same role as quotes for strings.
|
Slashes `pattern:/.../` tell JavaScript that we are creating a regular expression. They play the same role as quotes for strings.
|
||||||
|
|
||||||
In both cases `regexp` becomes an object of the built-in `RegExp` class.
|
In both cases `regexp` becomes an instance of the built-in `RegExp` class.
|
||||||
|
|
||||||
The main difference between these two syntaxes is that slashes `pattern:/.../` do not allow to insert expressions (like strings with `${...}`). They are fully static.
|
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.
|
||||||
|
|
||||||
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 used when we need to create a regexp "on the fly", from a dynamically generated string, for instance:
|
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:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
let tag = prompt("What tag do you want to find?", "h2");
|
let tag = prompt("What tag do you want to find?", "h2");
|
||||||
|
@ -47,7 +47,7 @@ There are only 6 of them in JavaScript:
|
||||||
: With this flag the search is case-insensitive: no difference between `A` and `a` (see the example below).
|
: With this flag the search is case-insensitive: no difference between `A` and `a` (see the example below).
|
||||||
|
|
||||||
`pattern:g`
|
`pattern:g`
|
||||||
: With this flag the search looks for all matches, without it -- only the first one.
|
: With this flag the search looks for all matches, without it -- only the first match is returned.
|
||||||
|
|
||||||
`pattern:m`
|
`pattern:m`
|
||||||
: Multiline mode (covered in the chapter <info:regexp-multiline-mode>).
|
: Multiline mode (covered in the chapter <info:regexp-multiline-mode>).
|
||||||
|
@ -71,7 +71,7 @@ From here on the color scheme is:
|
||||||
|
|
||||||
## Searching: str.match
|
## Searching: str.match
|
||||||
|
|
||||||
As it was said previously, regular expressions are integrated with string methods.
|
As mentioned previously, regular expressions are integrated with string methods.
|
||||||
|
|
||||||
The method `str.match(regexp)` finds all matches of `regexp` in the string `str`.
|
The method `str.match(regexp)` finds all matches of `regexp` in the string `str`.
|
||||||
|
|
||||||
|
@ -102,7 +102,7 @@ It has 3 working modes:
|
||||||
|
|
||||||
3. And, finally, if there are no matches, `null` is returned (doesn't matter if there's flag `pattern:g` or not).
|
3. And, finally, if there are no matches, `null` is returned (doesn't matter if there's flag `pattern:g` or not).
|
||||||
|
|
||||||
That's a very important nuance. If there are no matches, we get not an empty array, but `null`. Forgetting about that may lead to errors, e.g.:
|
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.:
|
||||||
|
|
||||||
```js run
|
```js run
|
||||||
let matches = "JavaScript".match(/HTML/); // = null
|
let matches = "JavaScript".match(/HTML/); // = null
|
||||||
|
@ -112,7 +112,7 @@ It has 3 working modes:
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
If we'd like the result to be always an array, we can write it this way:
|
If we'd like the result to always be an array, we can write it this way:
|
||||||
|
|
||||||
```js run
|
```js run
|
||||||
let matches = "JavaScript".match(/HTML/)*!* || []*/!*;
|
let matches = "JavaScript".match(/HTML/)*!* || []*/!*;
|
||||||
|
@ -124,7 +124,7 @@ It has 3 working modes:
|
||||||
|
|
||||||
## Replacing: str.replace
|
## Replacing: str.replace
|
||||||
|
|
||||||
The method `str.replace(regexp, replacement)` replaces matches with `regexp` in string `str` with `replacement` (all matches, if there's flag `pattern:g`, otherwise only the first one).
|
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).
|
||||||
|
|
||||||
For instance:
|
For instance:
|
||||||
|
|
||||||
|
@ -164,14 +164,14 @@ let regexp = /LOVE/i;
|
||||||
alert( regexp.test(str) ); // true
|
alert( regexp.test(str) ); // true
|
||||||
```
|
```
|
||||||
|
|
||||||
Further in this chapter we'll study more regular expressions, come across many other examples and also meet other methods.
|
Later in this chapter we'll study more regular expressions, walk through more examples, and also meet other methods.
|
||||||
|
|
||||||
Full information about the methods is given in the article <info:regexp-methods>.
|
Full information about the methods is given in the article <info:regexp-methods>.
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
- A regular expression consists of a pattern and optional flags: `pattern:g`, `pattern:i`, `pattern:m`, `pattern:u`, `pattern:s`, `pattern:y`.
|
- A regular expression consists of a pattern and optional flags: `pattern:g`, `pattern:i`, `pattern:m`, `pattern:u`, `pattern:s`, `pattern:y`.
|
||||||
- Without flags and special symbols that we'll study later, the search by a regexp is the same as a substring search.
|
- 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.match(regexp)` looks for matches: all of them if there's `pattern:g` flag, otherwise only the first one.
|
- The method `str.match(regexp)` looks for matches: all of them if there's `pattern:g` flag, otherwise, only the first one.
|
||||||
- The method `str.replace(regexp, replacement)` replaces matches with `regexp` by `replacement`: all of them if there's `pattern:g` flag, otherwise only the first one.
|
- 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.
|
||||||
- The method `regexp.test(str)` returns `true` if there's at least one match, otherwise `false`.
|
- The method `regexp.test(str)` returns `true` if there's at least one match, otherwise, it returns `false`.
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue