Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update Web/JavaScript/Guide/Regular_Expressions #4847

Merged
merged 1 commit into from
May 10, 2021
Merged

Update Web/JavaScript/Guide/Regular_Expressions #4847

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions files/en-us/web/javascript/guide/regular_expressions/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}</div>

<p class="summary">Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. These patterns are used with the {{jsxref("RegExp.exec", "exec()")}} and {{jsxref("RegExp.test", "test()")}} methods of {{jsxref("RegExp")}}, and with the {{jsxref("String.match", "match()")}}, {{jsxref("String.matchAll", "matchAll()")}}, {{jsxref("String.replace", "replace()")}}, {{jsxref("String.replaceAll", "replaceAll()")}}, {{jsxref("String.search", "search()")}}, and {{jsxref("String.split", "split()")}} methods of {{jsxref("String")}}. This chapter describes JavaScript regular expressions.</p>
<p class="summary">Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. These patterns are used with the {{jsxref("RegExp.exec", "exec()")}} and {{jsxref("RegExp.test", "test()")}} methods of {{jsxref("RegExp")}}, and with the {{jsxref("String.match", "match()")}}, {{jsxref("String.matchAll", "matchAll()")}}, {{jsxref("String.replace", "replace()")}}, {{jsxref("String.replaceAll", "replaceAll()")}}, {{jsxref("String.search", "search()")}}, and {{jsxref("String.split", "split()")}} methods of {{jsxref("String")}}. This chapter describes JavaScript regular expressions.</p>

<h2 id="Creating_a_regular_expression">Creating a regular expression</h2>

Expand All @@ -25,7 +25,7 @@ <h2 id="Creating_a_regular_expression">Creating a regular expression</h2>
<pre class="brush: js">let re = /ab+c/;
</pre>

<p>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.</p>
<p>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.</p>
</li>
<li>
<p>Or calling the constructor function of the {{jsxref("RegExp")}} object, as follows:</p>
Expand All @@ -51,7 +51,7 @@ <h3 id="Using_simple_patterns">Using simple patterns</h3>

<h3 id="Using_special_characters">Using special characters</h3>

<p>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 <em>a single <code>"a"</code> followed by zero or more <code>"b"</code>s followed by <code>"c"</code></em>, you'd use the pattern <code>/ab*c/</code>: the <code>*</code> after <code>"b"</code> means "0 or more occurrences of the preceding item." In the string <code>"cbbabbbbcdebc"</code>, this pattern will match the substring <code>"abbbbc"</code>.</p>
<p>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 <em>a single <code>"a"</code> followed by zero or more <code>"b"</code>s followed by <code>"c"</code></em>, you'd use the pattern <code>/ab*c/</code>: the <code>*</code> after <code>"b"</code> means "0 or more occurrences of the preceding item." In the string <code>"cbbabbbbcdebc"</code>, this pattern will match the substring <code>"abbbbc"</code>.</p>

<p>The following pages provide lists of the different special characters that fit into each category, along with descriptions and examples.</p>

Expand Down Expand Up @@ -92,7 +92,7 @@ <h3 id="Using_special_characters">Using special characters</h3>
</td>
</tr>
<tr>
<td><code>(x)</code>, <code>(?:x)</code>, <code>(?&lt;Name&gt;x)</code>, <code>x|y</code>, <code>[xyz]</code>, <code>[^xyz]</code>, <code>\<em>Number</em></code></td>
<td><code>(x)</code>, <code>(?:x)</code>, <code>(?&lt;Name&gt;x)</code>, <code>x|y</code>, <code>[xyz]</code>, <code>[^xyz]</code>, <code>\<em>Number</em></code></td>
<td>
<p><a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Groups and ranges</a></p>
</td>
Expand All @@ -116,13 +116,13 @@ <h3 id="Using_special_characters">Using special characters</h3>

<h3 id="Escaping">Escaping</h3>

<p>If you need to use any of the special characters literally (actually searching for a <code>"*"</code>, for instance), you must escape it by putting a backslash in front of it. For instance, to search for <code>"a"</code> followed by <code>"*"</code> followed by <code>"b"</code>, you'd use <code>/a\*b/</code> — the backslash "escapes" the <code>"*"</code>, making it literal instead of special.</p>
<p>If you need to use any of the special characters literally (actually searching for a <code>"*"</code>, for instance), you must escape it by putting a backslash in front of it. For instance, to search for <code>"a"</code> followed by <code>"*"</code> followed by <code>"b"</code>, you'd use <code>/a\*b/</code> — the backslash "escapes" the <code>"*"</code>, making it literal instead of special.</p>

<p>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 <code>/\/example\/[a-z]+/i</code>—the backslashes before each slash make them literal.</p>

<p>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 <code>/[A-Z]:\\/</code> — the first backslash escapes the one after it, so the expression searches for a single literal backslash.</p>

<p>If using the <code>RegExp</code> 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. <code>/a\*b/</code> and <code>new RegExp("a\\*b")</code> create the same expression, which searches for "a" followed by a literal "*" followed by "b".</p>
<p>If using the <code>RegExp</code> 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. <code>/a\*b/</code> and <code>new RegExp("a\\*b")</code> create the same expression, which searches for "a" followed by a literal "*" followed by "b".</p>

<p>If escape strings are not already part of your pattern you can add them using {{jsxref('String.replace')}}:</p>

Expand All @@ -131,9 +131,9 @@ <h3 id="Escaping">Escaping</h3>
}
</pre>

<p>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 <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#advanced_searching_with_flags">Advanced Searching With Flags</a>.</p>
<p>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 <a href="#advanced_searching_with_flags">Advanced Searching With Flags</a>.</p>

<p><em>Why isn't this built into JavaScript?</em> There is a proposal to add such a function to RegExp, but it was <a href="https://github.com/benjamingr/RegExp.escape/issues/37">rejected by TC39.</a></p>
<p><em>Why isn't this built into JavaScript?</em> There is a proposal to add such a function to RegExp, but it was <a href="https://github.com/benjamingr/RegExp.escape/issues/37">rejected by TC39.</a></p>

<h3 id="Using_parentheses">Using parentheses</h3>

Expand Down Expand Up @@ -203,7 +203,7 @@ <h2 id="Using_regular_expressions_in_JavaScript">Using regular expressions in Ja
// /d(b+)d/g.exec('cdbbdbsbz') outputs Array [ 'dbbd', 'bb', index: 1, input: 'cdbbdbsbz' ].
</pre>

<p>(See <a href="#using_the_global_search_flag_with_exec">Using the global search flag with <code>exec()</code></a> for further info about the different behaviors.)</p>
<p>(See <a href="#using_the_global_search_flag_with_exec">Using the global search flag with <code>exec()</code></a> for further info about the different behaviors.)</p>

<p>If you want to construct the regular expression from a string, yet another alternative is this script:</p>

Expand Down Expand Up @@ -280,7 +280,7 @@ <h2 id="Using_regular_expressions_in_JavaScript">Using regular expressions in Ja

<h3 id="advanced_searching_with_flags">Advanced searching with flags</h3>

<p>Regular expressions have six optional flags that allow for functionality like global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.</p>
<p>Regular expressions have six optional flags that allow for functionality like global and case insensitive searching. These flags can be used separately or together in any order, and are included as part of the regular expression.</p>

<table class="standard-table">
<caption>Regular expression flags</caption>
Expand Down Expand Up @@ -324,7 +324,7 @@ <h3 id="advanced_searching_with_flags">Advanced searching with flags</h3>
</tr>
<tr>
<td><code>y</code></td>
<td>Perform a "sticky" search that matches starting at the current position in the target string. See {{jsxref("RegExp.sticky", "sticky")}}.</td>
<td>Perform a "sticky" search that matches starting at the current position in the target string. See {{jsxref("RegExp.sticky", "sticky")}}.</td>
<td><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky">RegExp.prototype.sticky</a></code></td>
</tr>
</tbody>
Expand Down Expand Up @@ -368,7 +368,7 @@ <h3 id="advanced_searching_with_flags">Advanced searching with flags</h3>

<h4 id="using_the_global_search_flag_with_exec">Using the global search flag with exec()</h4>

<p>The behavior associated with the <code>g</code> flag is different when the <code>.exec()</code> method is used.  The roles of "class" and "argument" get reversed: In the case of <code>.match()</code>, the string class (or data type) owns the method and the regular expression is just an argument, while in the case of <code>.exec()</code>, it is the regular expression that owns the method, with the string being the argument.  Contrast this <em><code>str.match(re)</code></em> versus <em><code>re.exec(str)</code></em>.  The <code>g</code> flag is used with the <strong><code>.exec()</code></strong> method to get iterative progression.</p>
<p>The behavior associated with the <code>g</code> flag is different when the <code>.exec()</code> method is used. The roles of "class" and "argument" get reversed: In the case of <code>.match()</code>, the string class (or data type) owns the method and the regular expression is just an argument, while in the case of <code>.exec()</code>, it is the regular expression that owns the method, with the string being the argument. Contrast this <em><code>str.match(re)</code></em> versus <em><code>re.exec(str)</code></em>. The <code>g</code> flag is used with the <strong><code>.exec()</code></strong> method to get iterative progression.</p>

<pre class="brush: js">var xArray; while(xArray = re.exec(str)) console.log(xArray);
// produces:
Expand All @@ -394,8 +394,8 @@ <h3 id="Using_special_characters_to_verify_input">Using special characters to ve
<p>The regular expression looks for:</p>

<ol>
<li>three numeric characters <code>\d{3}</code> OR <code>|</code> a left parenthesis <code>\(</code>, followed by three digits<code> \d{3}</code>, followed by a close parenthesis <code>\)</code>, in a non-capturing group <code>(?:)</code></li>
<li>followed by one dash, forward slash, or decimal point in a capturing group <code>()</code></li>
<li>three numeric characters <code>\d{3}</code> OR <code>|</code> a left parenthesis <code>\(</code>, followed by three digits<code> \d{3}</code>, followed by a close parenthesis <code>\)</code>, in a non-capturing group <code>(?:)</code></li>
<li>followed by one dash, forward slash, or decimal point in a capturing group <code>()</code></li>
<li>followed by three digits <code>\d{3}</code></li>
<li>followed by the match remembered in the (first) captured group <code>\1</code></li>
<li>followed by four digits <code>\d{4}</code></li>
Expand Down