Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Construct a Regex to Match Twitter Mentions with Regexr

    John OtanderJohn Otander
    javascriptJavaScript

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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.