D4mations.com

Regular Expressions in JavaScript – #1 REGEX ULTRA BASICS



A regular expression (or regex) is way to find strings within strings. It’s small code that when applied to a string, will give other strings – either the whole string or parts of the string. This video gives you the ULTRA BASICS of REGEX.

Regexes most common use cases are:
What can we use them for?

1. Validation
If something is formatted correctly. Like verifying if someone has inputted the correct things in a form like an email address or a postal code

2.Extraction
Extract parts of a string that we would like to use. Say find how many times someone wrote “david” in a text.

Replacement
Find all parts of the string with “david” and replace them with something else like “devtips”.

You will learn:
– creating regex in two ways in JavaScript: slash notation or with the constructor new RegExp()
– escaping the special characters
– the special characters and how they work: ^, $, *, +, [a-z], [0-9], w, d for example

Companion code used in the episode

Or try one of these tools to experiment with regexes. They all do basically the same, it’s just a matter of taste:
https://www.regexpal.com/
https://www.regexpal.com/
https://regex101.com/

Read more on MDN, it’s the best resource:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Original source

d4mer

, , , , , , , , , , , , , , , , ,

42 responses to “Regular Expressions in JavaScript – #1 REGEX ULTRA BASICS”

  5. Sorry but I found this super confusing, I didn't understand what the special characters meant or why you were using them, opening and starting a string. Would have liked a bit more context as to the structure/grammar of a regex expression.

  6. Great video, Regex is a lot simpler than it looks. Although I still don't understand why a* ([ ][aaaa]) and a? ([ ]b[a]b[a]) match an empty character at the beginning, when there's no empty character there?

  11. When I tried "end$" REGEX on "match end at the end" in ur REGEX code codepen site , it is highlighting "match 'end' at the end" instead of "match end at the 'end' ".
    How can I verify "end" at the last one is present?

  17. Hi i have took many course online for the past few month to learn web development. from my learning experience i realise that there are lots of great courses out there but that almost all of them does the same things. when i finish all these courses i felt that i am ready and i have the basic in skills, i try to begin my preparation of building projects and portfolio but i was overwhelm by all this design and effects from this websites that people are able to do, i think there are lots of cool effects there and maybe i suggest u can took some inspiration from making tutorial from this web site on your channel? https://www.cssdesignawards.com

  19. Great explanation David!
    Nice to see this topic covered many explanations of regex are go to stack overflow and get a snippet… there you go regex lol
    Thanks for giving a real explanation of the how and why!

  21. Used to be, once upon a time, everyone used the regex library from Henry Spencer, of U Toronto. The Perl programming language expanded what regex could do, so nowadays, languages either import the Perl regex library or re-implement it .. or a subset of it.

    So it you find regexp powerful, learn Perl and find out what more you can do with regular and not quite regular expressions.

  30. Enjoyable Video, hope you will feature non-greedy operators for somthing like
    /<.*?>/ matches "<foo>" in "<foo> <bar>", whereas /<.*>/ matches "<foo> <bar>.

    As for feedback:

    I really liked the react js series, something similar would be awesome like already suggested.
    1) start to finish web app
    2) framework like polymer progressive web app

    Using codepen is awesome, it is so easy revisit the given example
    🙂

Leave a Reply