mirror of
https://github.com/dholerobin/Lecture_Notes.git
synced 2025-03-16 14:19:58 +00:00
160 lines
6.2 KiB
HTML
160 lines
6.2 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="quantifiersrepetition">Quantifiers (Repetition)</h2>
|
||
|
|
|
||
|
|
<p>To match 3 digit patterns, we can use <code>[0-9][0-9][0-9]</code>. What if we have n digit patterns? We have to write <code>[0-9]</code> n times, but that is a waste of time. Here is when quantifiers come for help.</p>
|
||
|
|
|
||
|
|
<ol>
|
||
|
|
<li><p><strong>Limiting repetitions(<code>{min, max}</code>):</strong> To match n digit patterns, we can simply write <code>[0-9]{n}</code>. Instead of n, by providing minimum and maximum values as-<code>[0-9]{min, max}</code>, we can match a pattern repeating min to max times.</p>
|
||
|
|
|
||
|
|
<p>Let's see an example to match all numbers between 1 to 999.</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/4vtp2" class="embed"></iframe>
|
||
|
|
</div></li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<p><strong>Note:</strong> If you don't write the upper bound(<code>{min,}</code>), then it basically means, there is no limit for maximum repetitions.</p>
|
||
|
|
|
||
|
|
<ol>
|
||
|
|
<li><p><strong><code>+</code> quantifier:</strong> It is equivalent to <code>{1,}</code>-at least one occurrence.</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/4vtp5" class="embed"></iframe>
|
||
|
|
</div></li>
|
||
|
|
|
||
|
|
<li><p><strong><code>*</code>quantifier:</strong> It is equivalent to <code>{0,}</code>-zero or more occurrences. </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/4vtpb" class="embed"></iframe>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ol>
|
||
|
|
<li><strong><code>?</code> quantifier:</strong> It is equivalent to <code>{0,1}</code>, either zero or one occurrence. <code>?</code> is very useful for optional occurrences in patterns.</li></ol>
|
||
|
|
|
||
|
|
<p>Let's see an example to match negative and positive numbers.</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/4vtph" class="embed"></iframe>
|
||
|
|
</div></li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<p><strong>Now, you may be thinking, what if we want to match characters like <code>*, ?, +, {, }</code> in the text, they are special characters. Check it out in the appendix.</strong></p>
|
||
|
|
|
||
|
|
<h3 id="problems">Problems</h3>
|
||
|
|
|
||
|
|
<ol>
|
||
|
|
<li><p>Find out a regex to match positive integers or floating point numbers with exactly two characters after the decimal point.</p>
|
||
|
|
|
||
|
|
<p>Answer: <code>\d+(\.\d\d)?</code></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/4vtpk" class="embed"></iframe>
|
||
|
|
</div></li>
|
||
|
|
|
||
|
|
<li><p>Predict the output of the following regex:
|
||
|
|
<strong>RegEx</strong>: <code>[abc]{2,}</code> <br>
|
||
|
|
<strong>Text</strong>:
|
||
|
|
<code>aaa
|
||
|
|
abc
|
||
|
|
abbccc
|
||
|
|
avbcc
|
||
|
|
</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/4vtpt" class="embed"></iframe>
|
||
|
|
</div></li>
|
||
|
|
</ol>
|
||
|
|
|
||
|
|
<h3 id="natureofquantifiers">Nature of Quantifiers</h3>
|
||
|
|
|
||
|
|
<p>HTML tag is represented as <tag_name>some text</tag_name>. For example, <code><title>Regular expression</title></code></p>
|
||
|
|
|
||
|
|
<p>So, can you figure out an expression that will match both <tag_name> & </tag_name>?</p>
|
||
|
|
|
||
|
|
<p>Most of the people will say, it is <code><.*></code>. But it gives different result.</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/4vtq0" class="embed"></iframe>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>So, rather than matching up till first <code>></code>, it matches the whole tag. So, quantifiers are greedy by default. It is called <strong>Greediness!</strong>.</p>
|
||
|
|
|
||
|
|
<p>To solve this issue, we use <code>?</code> quantifier and it is called <strong>lazy matching</strong>. We will discuss it next.</p>
|
||
|
|
|
||
|
|
<p>Predict the output of the following regex:
|
||
|
|
<strong>RegEx</strong>: <code>(var|let)\s[a-zA-Z0-9_]\w* =\s"?\w+"?;</code> <br>
|
||
|
|
<strong>Text</strong>:
|
||
|
|
<code>var carname = "volvo";
|
||
|
|
console.log(carname);
|
||
|
|
let age = 8;
|
||
|
|
var date = "23-03-2020";</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/4vtq3" class="embed"></iframe>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
document.addEventListener('DOMContentLoaded', (event) => {
|
||
|
|
document.querySelectorAll('pre code').forEach((block) => {
|
||
|
|
hljs.highlightBlock(block);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|