Notes/Lecture_Notes
1
0
Fork 0
mirror of https://github.com/dholerobin/Lecture_Notes.git synced 2025-07-01 13:06:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update Groups_capturing.html

Browse Source
This commit is contained in:
Aakash Panchal 2020-03-08 15:33:48 +05:30 committed by GitHub
parent 23d1339a1f
commit 485b29c8f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
Akash Articles/RegEx/Groups_capturing.html
View File

@ -1,3 +1,4 @@
<html> <html>
<head> <head>
<style type="text/css"> <style type="text/css">
@ -50,7 +51,7 @@
<h2 id="groupscapturing">Groups &amp; Capturing</h2> <h2 id="groupscapturing">Groups &amp; Capturing</h2>
<p>Grouping is the most useful feature of regex. Grouping can be done by placing regular expression inside round brackets. </p> <p>Grouping is the most useful feature of regex. Grouping can be done by placing regular expression inside round brackets. In this article, we will see how to extract and replace data using groups. </p>
<p>It unifies the regular expressions inside it as a single unit. Let's look at its usages one by one:</p> <p>It unifies the regular expressions inside it as a single unit. Let's look at its usages one by one:</p>
@ -71,68 +72,70 @@
<div class="container"> <div class="container">
<iframe scrolling="no" style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" src="https://regexr.com/4vuag" class="embed"></iframe> <iframe scrolling="no" style="position: absolute; top: -9999em; visibility: hidden;" onload="this.style.position='static'; this.style.visibility='visible';" src="https://regexr.com/4vuag" class="embed"></iframe>
</div></li> </div>
</ol>
<p>Similarly, you can use other quantifiers.</p> <p>Similarly, you can use other quantifiers.</p>
<ol>
<li><p>To extract and replace substrings using groups. So, we call groups <strong>Capturing groups</strong>, becuase we are capturing data(substrings) using groups.</p> <li><p>To extract and replace substrings using groups. So, we call groups <strong>Capturing groups</strong>, becuase we are capturing data(substrings) using groups.</p>
<p>In this part, we will see how to extract and replace data using groups in Javascript.</p>
<p><strong>Data Extraction</strong></p> <p><strong>Data Extraction</strong></p>
<p>Observe the code below.</p> <p>Observe the code below.</p>
<pre><code class="js language-js">var str = "2020-01-20"; <pre><code class="js language-js">var str = "2020-01-20";
// Pattern string // Pattern string
var pattern = /(\d{4})-(\d{2})-(\d{2})/g; var pattern = /(\d{4})-(\d{2})-(\d{2})/g;
// ^ ^ ^ // ^ ^ ^
//group-no: 1 2 3 //group-no: 1 2 3
var result = pattern.exec(str); var result = pattern.exec(str);
// printing
console.log(result);
// Data extraction
console.log(result[1]); // First group
console.log(result[2]); // Second group
console.log(result[3]); // Third group
</code></pre>
The output will be:
<pre><code class="js language-js">[
'2020-01-20',
'2020',
'01',
'20',
index: 0,
input: '2020-01-20',
groups: undefined
]
2020
01
20
// printing
console.log(result);
/* Output will be:
[
'2020-01-20', //-------pattern
'2020', //-----First group
'01', //-------Second group
'20', //-------Third group
index: 0,
input: '2020-01-20',
groups: undefined
]
*/
// Data extraction
console.log(result[1]); // First group
console.log(result[2]); // Second group
console.log(result[3]); // Third group
</code></pre> </code></pre>
<p>In the output array, the first data is a match string followed by the matched groups in the order.</p> <p>In the output array, the first data is a match string followed by the matched groups in the order.</p>
<p><strong>Data Replacement:</strong></p> <p><strong>Data Replacement</strong></p>
<p><code>Replace</code> is another function, which can be used to replace and rearrange the data using regex. Observe the code below.</p> <p><code>Replace</code> is another function, which can be used to replace and rearrange the data using regex. Observe the code below.</p>
<pre><code class="js language-js">var str = "2020-01-20"; <pre><code class="js language-js">var str = "2020-01-20";
// Pattern string // Pattern string
var pattern = /(\d{4})-(\d{2})-(\d{2})/g; var pattern = /(\d{4})-(\d{2})-(\d{2})/g;
// ^ ^ ^ // ^ ^ ^
//group-no: 1 2 3 //group-no: 1 2 3
// Data replacement using $group_no // Data replacement using $group_no
var ans=str.replace(pattern, '$3-$2-$1'); var ans=str.replace(pattern, '$3-$2-$1');
console.log(ans); console.log(ans);
// Output will be: 20-01-2020 // Output will be: 20-01-2020
</code></pre> </code></pre>
<p>As you can see, we have used <code>$group_no</code> to indicate the capturing group.</p></li> <p>As you can see, we have used <code>$group_no</code> to indicate the capturing group.</p></li>