Regular Expressions for Dummies

Welcome to my new video series, “Regular Expressions for Dummies”. Over the course of ten videos or so, I’m going to teach you how to use regular expressions in your Javascript and PHP applications. As always, I’ll assume you know absolutely zip. If you haven’t already, subscribe to our RSS feed, or follow me on Twitter to stay up to date on new releases.

Day 1: Introduction

Be sure to click on the “Full Screen Toggle”.

Quiz

Use the following string when determining your answers.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

1: How would I match every occurrence of “Lorem” on the page?

2: What is the short-hand syntax for [0-9]?

3: What is the difference between using “i” and “g” after the final forward slash.

4: How would I select EVERY character that is not a space?

5: Challenge. How would I select only the first three words from the string above? (i.e. “Lorem ipsum dolar”)



37

Comments
  • Jorge Mudry says:

    Great!! Tks for this excellent new serie of screencast!!

  • Michael Rice says:

    Sweet screencast!

  • Meshach says:

    WOAH WOAH WOAH!!!

    Jeffrey’s at it again..

    How does he do it?!? :)

    Thanks for the screencast Jeffrey! Really looking forward to more. ;)

  • Mexx says:

    Awesome screencast. This Quiz reminds me to my favorite PHP Learning Book. It also had tasks to be solved after each session! Great way of learning!

  • Jorge Mudry says:

    @Mexx what book is that?

  • Jorge Mudry says:

    You can download the desktop version from here http://www.gskinner.com/RegExr/desktop/

  • Vasili says:

    Awesome screencast. I’m loving the idea of the quiz at the end of each day. :)

  • Great new series for us dummies :)

  • Titus says:

    Yay regex <3

  • Gilad says:

    Jeffrey – amazing.

    i was wrong – great tutorial and that tool is amazing!

    tho, i”m always curious about something (hope its ok to ask)
    why more RSS subscribers = more money?
    how envato makes money from RSS ?

  • Meshach says:

    @Mexx: Curious as to what your favorite php book is?

  • Shaun C. says:

    You’re a natural teacher, Jeff! Keep up the great work.

  • Monkeytail says:

    Lorem ipsum dolor

    ^[\w-\s]{17}

    Can’t figure out how to match 3 ‘words’ vs. 17 alphanum characters + whitespace

  • Crysfel says:

    RegExp are awesome!! every developer should know this already ;)

  • emilio says:

    1.- /lorem/ig = 2 results
    2.- \d
    3.- i = case not sensitive, g take all the text
    4.- /\S/g
    5.- i dont know :(

  • DesignerGeek says:

    Hi, Great video tutorials. This is indeed a great contribution to the web-dev community. I followed all of the jQuery tuts as well. Keep it up.

    One little request, please provide a download link to the video file so many of us can download the video and watch them offline.

    Thanks.

  • ^(\w+\W\w+\W\w+) works for me mating the first 3 words…

    Great tutorials – will be watching the rest for sure!

  • qalih says:

    Great stuff, looking forward to the rest of the series. I realise you got alot on your plate with a PHP series possibly an intermediate one and this regex series. Any chance of doing one of the relational model more specifically normalisation and examples of how to get a relation to third normal form.

    @Gilad – The bigger the number of feed subscribers the bigger the audience for advertisers to show their product to. Its an unbiased way to get higher ad placement money from advertisers. Ofcourse that may not be the only reason.

  • very very nice screen cast loved it looking forward for more on this series.

    Answers are

    1. /Lorem/g
    2. \d
    3. g will check for every occurance of your token where token is suppose “Lorem” and i will only match the last character before ‘+’ till letter till word ends.
    4.\S
    5. /Lorem ipsum dolor/

  • Paweł Krukowski says:

    This should work for the fifth: (\w+\s??){3}

  • Gaurav says:

    1. /Lorem/

    2. /\d/g

    3. i for ignoreCase and g for Global occurrence

    4. /\S/g

    5. (\w+\s){3}

    Great Tutorial !!!

  • Javi says:

    Challenge accepted

    /(\w+\ ){2}\w+/ -> matched “Lorem ipsum dolor”

    /(\w+\ ){3}/ -> matched “Lorem ipsum dolor ”

    More over, if someone insert some extra white espace, this should be better
    /(\w+\ +?){2}\w+/

    I am really looking forward to seeing Jeffrey’s solution.

  • Mattias Jansson says:

    Seems like you can do it in a lot of different ways.
    Here is my contribution:

    5. ^(.\w+){3}

  • Dirk says:

    Another great screencast. You should have become a teacher! Keep up the fantastic work.

  • Mexx says:

    @Jorge, @Meshach: I assume that this book isn’t interesting for you guys ‘cos its in German. But if someone is interested anyway I can highly recommant it due to its fantastic style of teaching. Makes PHP incredibly easy to learn: http://www.galileocomputing.de/1300?GPP=nlch

  • Thomas says:

    Jeffrey, at 19:00, you say:

    “It’s not going to match the whole thing so it’s gonna fail.”

    That is wrong. It’s NOT gonna fail. If you want to match the whole string you’ll have to use ^ and $. (Or compare the matching substring to the original string, which is inconvenient and counterintuitive)

  • Great screencast and nice find on that Flex webapp. Always wanted to learn regex and this will surely help.

  • geCkO says:

    greaT!!!

  • Meshach says:

    @Mexx:

    Ahh… To bad.. I don’t speak German. Would there be an English version?

  • Tom says:

    Would this be correct for question 5:

    /(\w*\s){3}/

    ?

    Fantastic screencast as usual.

  • Daniel says:

    Very nice screencast! Good job!

  • Alec says:

    Thanks for this! Have been working with regular expressions for some time, but never really took the time to actually learn how it works. Some simple things are clear to me, but for the more advanced stuff it’s still trial and error. The screencast is awesome and a really big help!

    Btw, I like Mattias Jansson’s solution for 5: ^(.\w+){3}

  • milad says:

    tnx,great guide.

  • David says:

    That gskinner site helped out tremendously! I had to find the expression for the new j.mp url addresses that bit.ly just rolled out this week, finally figured it out. Thanks

  • Ahmad Alfy says:

    Wow, I downloaded the desktop version and I am happy there’s something new to learn! Can you guys explain how you solved the 5th challenge :) ?