<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>