[regexr](https://regexr.com) is a powerful tool for debugging existing regexes and creating new ones. In this lesson, we'll use the app to create a regex that matches Twitter-style mentions in a string. It will go over a few regex concepts including capture groups, character sets, and flags.

https://app.egghead.io/api/v1/lessons/javascript-construct-a-regex-to-match-twitter-mentions-with-regexr/subtitles

Construct a Regex to Match Twitter Mentions with Regexr

Instructor: [0:00] RegExr is a tool for debugging existing regexes and creating new ones. By default, you need a text area with example content and a regex that matches all capitalized words.

[0:10] In order to start working on our own regex, we'll go ahead and replace the example content with our own. This content contains Twitter style mentions, which we'll attempt to parse out with our own regex.

[0:22] Now we'll begin creating our own regex. First, we need to create a matching group that contains the @ symbol. In our example content, we'll now see that all the @ signs are highlighted.

[0:33] Next, we'll see the tools category where there's an explain section provided. It will show the capture group, and then the character that we're currently capturing.

[0:42] A username always starts with an alphabet character. We can create a regex character set to only match A through Z as the first character. Once that character is met, it can be anything that's alphanumeric. You create another character set that matches A through Z and zero through nine.

[0:59] We can now see we're getting close. However, we don't match to the end of the actual username. However, we can achieve that by using the plus quantifier. This will continue matching anything that's alphanumeric.

[1:10] All mentions are being matched. You can see we have our capturing groups that start with the @ character, and then two character sets. One for the first alphabet character, and then the rest for the alphanumeric characters.

[1:24] Lastly, we have the quantifier that continues matching the entire username. We do have one more thing to address. Currently, we only match lower-case alphabet characters. We can fix this by adding a case-insensitive flag to our Regex.

[1:40] Now everything looks good. You can also go ahead and click list in the tool section and see all of our matches.

Construct a Regex to Match Twitter Mentions with Regexr

Share this video with your friends