Skip to content

Commit

Permalink
Update Web/JavaScript/Guide/Regular_Expressions (#4847)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mfuji09
mfuji09 committed May 10, 2021
1 parent 79faaf9 commit 40d8c8f
Showing 1 changed file with 14 additions and 14 deletions.
28 changes: 14 additions & 14 deletions files/en-us/web/javascript/guide/regular_expressions/index.html
View file
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

0 comments on commit 40d8c8f

Please sign in to comment.