Free AI web copilot to create summaries, insights and extended knowledge, download it at here

4199

Abstract

at CodeSandbox.</p><figure id="70f4"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*cC2l115PLuaqOWH0"><figcaption>Photo by <a href="https://unsplash.com/@charlesdeluvio?utm_source=medium&utm_medium=referral">Charles 🇵🇭</a> on <a href="https://unsplash.com?utm_source=medium&utm_medium=referral">Unsplash</a></figcaption></figure><h1 id="e5c9">Converting to a Date object is easy too</h1><p id="3cb5">The new named capture groups mean creating a Date object is now very clear in the JavaScript code:</p> <figure id="9402"> <div> <div>

            <iframe class="gist-iframe" src="/gist/djD-REK/7cfe525d63244b04f7c56f1e12ce1706.js" allowfullscreen="" frameborder="0" height="undefined" width="undefined">
          </div>
        </div>
    </figure></iframe></div></div></figure><p id="eda7">The only tricky thing is that <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Syntax">the Date constructor</a> expects a <code>monthIndex</code>, not the actual month, as a parameter. That is equal to the month minus 1.</p><figure id="8242"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*-0iOw84d4TsdRuxl"><figcaption>Photo by <a href="https://unsplash.com/@esteejanssens?utm_source=medium&amp;utm_medium=referral">Estée Janssens</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h1 id="f496">Capturing groups requires exec()</h1><p id="6f7a">Note that the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">RegExp.prototype.exec()</a> function is being used instead of the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/match">String.prototype.match()</a> function. Why is that?</p><p id="5644" type="7">“If your regex is global, and you are capturing, then you must use exec. Match won’t return all your captures. Match works great for when just matching (not capturing).”</p><p id="7d22" type="7">— Stack Overflow answer by barlop</p><p id="3f66">So just remember to use the <code>.exec()</code> function instead of the <code>.match()</code> function when trying to use numbered or named capture groups.</p><figure id="2bcb"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*60qvVwql27bNwQh3"><figcaption>Photo by <a href="https://unsplash.com/@charlesdeluvio?utm_source=medium&amp;utm_medium=referral">Charles 🇵🇭</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h1 id="b30a">Further reading</h1><ul><li><a href="undefined">Flavio Copes</a> goes into depth about Date objects <a href="https://flaviocopes.com/javascript-dates/">on his blog</a>:</li></ul><div id="60cd" class="link-block">
      <a href="https://flaviocopes.com/javascript-dates/">
        <div>
          <div>
            <h2>The definitive guide to JavaScript Dates</h2>
            <div><h3>Learning JavaScript? Download my free JavaScript Handbook 🔥 Working with dates can be complicated. No matter the…</h3></div>
            <div><p>flaviocopes.com</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*Oe35xfSCyw0t-G-5)"></div>
          </div>
        </div>
      </a>
    </div><ul><li><a href="https://javascript.info/date">Javascript.info</a> has many examples of how to use Date objects:</li></ul><div id="e2fd" class="link-block">
      <a href="https://javascript.info/date">
        <div>
          <div>
            <h2>Date and time</h2>
            <div><h3>Let's meet a new built-in object: Date. It stores the date, time and provides methods for date/time management. For…</h3></div>
            <div><p>javascript.info</p></div>
          </div>
          <div>
            <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*L8uEyP_Rsgkik9N2)"></div>
          </div>
        </div>

Options

</a> </div><ul><li><a href="undefined">Zell Liew</a> wrote a great post covering Date objects at <a href="https://css-tricks.com/everything-you-need-to-know-about-date-in-javascript/">CSS-Tricks.com</a>:</li></ul><div id="1021" class="link-block"> <a href="https://css-tricks.com/everything-you-need-to-know-about-date-in-javascript/"> <div> <div> <h2>Everything You Need to Know About Date in JavaScript | CSS-Tricks</h2> <div><h3>Date is weird in JavaScript. It gets on our nerves so much that we reach for libraries (like Date-fns and Moment) the…</h3></div> <div><p>css-tricks.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*dEtpfUAly3qtMCGg)"></div> </div> </div> </a> </div><ul><li>Moment.js hopes to replace Date, as explained on the <a href="https://inventi.studio/en/blog/why-you-shouldnt-use-moment-js">InventiStudio blog</a>:</li></ul><div id="9cf2" class="link-block"> <a href="https://inventi.studio/en/blog/why-you-shouldnt-use-moment-js"> <div> <div> <h2>Why you shouldn't use Moment.js...</h2> <div><h3>or, at least, what you should remember while using it. The most popular JS DateTime library that gave us everything we…</h3></div> <div><p>inventi.studio</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*QPyJEY0tYQEY3OVe)"></div> </div> </div> </a> </div><ul><li><a href="undefined">Ben Nadel</a> shows how to use named capture groups to parse CSV with Node.js <a href="https://www.bennadel.com/blog/3508-playing-with-regexp-named-capture-groups-in-node-10.htm">on his blog</a>:</li></ul><div id="5eb2" class="link-block"> <a href="https://www.bennadel.com/blog/3508-playing-with-regexp-named-capture-groups-in-node-10.htm"> <div> <div> <h2>Playing With RegExp Named Capture Groups In Node 10</h2> <div><h3>Ben Nadel experiments with RegExp named capture groups that are now supported in Node.js 10 (with V8 version 6.7)…</h3></div> <div><p>www.bennadel.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*xoAMZ5Ln32c7LBKA)"></div> </div> </div> </a> </div><ul><li><a href="undefined">Flavio Copes</a> talks about RegExp and named capture groups <a href="https://flaviocopes.com/javascript-regular-expressions/#named-capturing-groups">on his blog</a>:</li></ul><div id="7743" class="link-block"> <a href="https://flaviocopes.com/javascript-regular-expressions/#named-capturing-groups"> <div> <div> <h2>A guide to JavaScript Regular Expressions</h2> <div><h3>Learn everything about JavaScript Regular Expressions with this brief guide that summarizes the most important concepts…</h3></div> <div><p>flaviocopes.com</p></div> </div> <div> <div style="background-image: url(https://miro.readmedium.com/v2/resize:fit:320/0*fJbglieMD1Lcy6Lv)"></div> </div> </div> </a> </div><figure id="f797"><img src="https://cdn-images-1.readmedium.com/v2/resize:fit:800/0*3xFRDTf1muLWwVLx"><figcaption>Photo by <a href="https://unsplash.com/@fabrizioverrecchia?utm_source=medium&utm_medium=referral">Fabrizio Verrecchia</a> on <a href="https://unsplash.com?utm_source=medium&utm_medium=referral">Unsplash</a></figcaption></figure><p id="f735"><a href="https://www.linkedin.com/in/derek-austin/">Dr. Derek Austin</a> is the author of <a href="https://www.amazon.com/dp/B0BRJDLJ43"><i>Career Programming: How You Can Become a Successful 6-Figure Programmer in 6 Months</i></a>, now available on Amazon.</p></article></body>

How to parse a date using a regular expression in JavaScript

A ES2018 feature called named capture groups makes parsing a date easier and more readable.

A typical RegExp is hard to read

In a JavaScript regular expression, the term numbered capture groups refers to using parentheses to select matches for later use.

For example, when matching a date in the format Year-Month-Day, we end up with three numbered capture groups: 1, 2, and 3:

There is a new feature called named capture groups that make this regular expression easier than ever using names like year, month, and date.

Named capture groups for clean code

ECMAScript2018 (ES2018) introduced a change to JavaScript regular expressions with the addition of named capture groups.

Check out the following short example, which also uses object destructuring to pull out the individual variables from the named capture groups:

This is a nice feature that makes regular expressions easier to read.

An example using replace

Named capture groups can also be used with the String.prototype.replace() function.

The .replace() method will replace the occurrence of the regular expression in a string while still easily referencing each group:

Note that for me this code did not work in Mozilla Firefox 69.0.1, so I had to test it using Google Chrome and in this sandbox at CodeSandbox.

Converting to a Date object is easy too

The new named capture groups mean creating a Date object is now very clear in the JavaScript code:

The only tricky thing is that the Date constructor expects a monthIndex, not the actual month, as a parameter. That is equal to the month minus 1.

Capturing groups requires exec()

Note that the RegExp.prototype.exec() function is being used instead of the String.prototype.match() function. Why is that?

“If your regex is global, and you are capturing, then you must use exec. Match won’t return all your captures. Match works great for when just matching (not capturing).”

— Stack Overflow answer by barlop

So just remember to use the .exec() function instead of the .match() function when trying to use numbered or named capture groups.