mirror of
https://github.com/dholerobin/Lecture_Notes.git
synced 2025-03-17 06:40:07 +00:00
191 lines
5.3 KiB
HTML
191 lines
5.3 KiB
HTML
|
|
<html>
|
|
<head>
|
|
<style type="text/css">
|
|
.container {
|
|
position: static;
|
|
width: 800px;
|
|
height: 350px;
|
|
overflow: hidden;
|
|
}
|
|
.embed {
|
|
height: 100%;
|
|
width: 100%;
|
|
min-width: 1000px;
|
|
margin-left: -360px;
|
|
margin-top: -57px;
|
|
overflow: hidden;
|
|
}
|
|
body {
|
|
width: 800px;
|
|
margin: auto;
|
|
padding: 1em;
|
|
font-family: "Open Sans", sans-serif;
|
|
line-height: 150%;
|
|
letter-spacing: 0.1pt;
|
|
}
|
|
img {
|
|
width: 90%;
|
|
text-align: center;
|
|
margin: auto;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
}
|
|
pre, code {
|
|
padding: 1em;
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener('readystatechange', event => {
|
|
if (event.target.readyState === "complete")
|
|
document.activeElement.blur();
|
|
});
|
|
</script>
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<h2 id="groupscapturing">Groups & Capturing</h2>
|
|
|
|
<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>
|
|
|
|
<ol>
|
|
<li><p>It makes the regular expression more readable and sometimes it is an inevitable thing.</p>
|
|
|
|
<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/4vuaa" class="embed"></iframe>
|
|
</div>
|
|
|
|
<p>Suppose, we want to match both the sentences in the above text, then grouping is the inevitable thing.</p>
|
|
|
|
<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/4vuad" class="embed"></iframe>
|
|
</div></li>
|
|
|
|
<li><p>To apply quantifiers to one or more expressions.</p>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<p>Similarly, you can use other quantifiers.</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><strong>Data Extraction</strong></p>
|
|
|
|
<p>Observe the code below.</p>
|
|
|
|
<pre><code class="js language-js">var str = "2020-01-20";
|
|
|
|
// Pattern string
|
|
var pattern = /(\d{4})-(\d{2})-(\d{2})/g;
|
|
|
|
// ^ ^ ^
|
|
//group-no: 1 2 3
|
|
|
|
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
|
|
|
|
</code></pre>
|
|
|
|
<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><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";
|
|
|
|
// Pattern string
|
|
var pattern = /(\d{4})-(\d{2})-(\d{2})/g;
|
|
|
|
// ^ ^ ^
|
|
//group-no: 1 2 3
|
|
|
|
// Data replacement using $group_no
|
|
var ans=str.replace(pattern, '$3-$2-$1');
|
|
|
|
console.log(ans);
|
|
// Output will be: 20-01-2020
|
|
</code></pre>
|
|
|
|
<p>As you can see, we have used <code>$group_no</code> to indicate the capturing group.</p></li>
|
|
</ol>
|
|
|
|
<h2 id="problems">Problems</h2>
|
|
|
|
<p>Predict the output of the following regex:</p>
|
|
|
|
<ol>
|
|
<li><p><strong>RegEx</strong>: <code>([abc]){2,}(one|two)</code> <br>
|
|
<strong>Text</strong>:
|
|
<code>aone
|
|
cqtwo
|
|
abone
|
|
actwo
|
|
abcbtwoone
|
|
abbcccone
|
|
</code></p>
|
|
|
|
<p>Answer: </p>
|
|
|
|
<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/4vuaj" class="embed"></iframe>
|
|
</div></li>
|
|
|
|
<li><p><strong>RegEx</strong>: <code>([\dab]+(r|c)){2}</code> <br>
|
|
<strong>Text</strong>:
|
|
<code>1r2c
|
|
ar4ccc
|
|
12abr12abc
|
|
acac, accaca, acaaca
|
|
aaar1234234c, aaa1234234c
|
|
194brar, 134bcbb-c </code></p>
|
|
|
|
<p>Answer: </p>
|
|
|
|
<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/4vuam" class="embed"></iframe>
|
|
</div></li>
|
|
</ol>
|
|
|
|
|
|
<script type="text/javascript">
|
|
document.addEventListener('DOMContentLoaded', (event) => {
|
|
document.querySelectorAll('pre code').forEach((block) => {
|
|
hljs.highlightBlock(block);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|