DEV Community

April Skrine
April Skrine

Posted on • Updated on

 

Simple, beginner steps: RegEx and strings.

I've been working on learning Regex the past couple days. Regular expressions (RegEx) are used in programming languages to match parts of strings. You create patterns to help you do that matching. Here's my beginner crash course:

Define your Regex

Regex is annotated like: /someRegExHere/

So let's say we wanted to find if 'Hello' existed in a string.

const someString = "Hello, World!"
let ourRegex = /Hello/
Enter fullscreen mode Exit fullscreen mode

We've got our string, and we've defined our Regex. There are multiple ways to use regex, but for now I've been using the Javascript .test() method. The test method is going to take our regex and apply it to a string that we pass as an argument. It will return true or false if our defined pattern finds a match, or not.

const someString = "Hello, World!"
let ourRegex = /Hello/
let result = ourRegex.text(someString)
Enter fullscreen mode Exit fullscreen mode

Test returns true!

I've also used .match(), which actually extracts the matches found. The syntax is the opposite of .test()-- you call .match on the string and pass the regex as the argument.

Writing regex patterns:

There is A LOT to learn with Regex. Here's a cheatsheet of some I've learned (so far):

  • OR Looking for multiple possible matches.
    let ourRegex = /Hello|Goodbye/

  • Ignoring case Matching different cases (i.e. A, a) The 'i' flag goes outside the //
    let ourRegex = /Hello|Goodbye/i

  • Finding multiple matches Matching repeats of your regex. The 'g' (global) flag goes outside the //
    let ourRegex = /Hello/ig

  • Wildcard Matches anything. Essentially a 'wildcard' character. This could match things like her, hen, etc
    let ourRegex = /He./i

  • Character sets Allow you to define a group of characters we're trying to match, placing them inside square brackets.
    let ourRegex = /b[ae]g/i
    This would match bag and beg, but not big, bug or bog.

  • Character sets with range You can also define ranges, for letters or numbers.
    let ourRegex = /[a-g]at/i
    let ourRegex = /[0-9]/g
    Combine them, too as needed:
    let ourRegex = /[0-9a-g]/gi

  • NON match - negated character sets Use a carrot to define what you DON'T want to match. This would match everything NOT a number or vowel:
    let ourRegex = /[^0-9aeiou]/gi

  • Repeating characters Use a + to match ONE or more repeating instances (consecutively).
    let ourRegex = /s+/gi

  • Repeating characters Use a * to match ZERO or more repeating instances (consecutively).
    let ourRegex = /Aa*/gi

  • Quantity specifiers Instead of + or * you can specify your own range with {}
    let ourRegex = /Hell\syeah{3,10}/g
    This would match only strings of "Hell yeahhh" with 3-10 h's on the end

Quantity can also only have a lower limit:
let ourRegex = /Hell\syeah{3,}/g

  • Start of string Match something only in the beginning of string. Carrot goes outside of brackets, etc
    let ourRegex = /^April/
    Would match April at the beginning of a string. (aka 'starts with')

  • End of string Match something only at the end of string. $ at the end
    let ourRegex = /end$/
    Would match if the string ends in 'end'. (aka ends with)

  • Alphabet, number and _ shorthand \w is equal to [A-Za-z0-9_]
    let ourRegex = /\w/

  • OPPOSITE Alphabet, number and _ shorthand \W is equal to everything BUT [A-Za-z0-9_]
    let ourRegex = /\W/g

  • Digits \d is the shorthand equal to [0-9]
    let ourRegex = /\d/

  • OPPOSITE Digits \d is the shorthand equal to everything BUT [0-9]
    let ourRegex = /\D/g

  • Whitespace \s matches whitespace, as well as form feed, new line characters and tab
    let ourRegex = /\s/g

  • OPPOSITE Whitespace \s matches everything but whitespace
    let ourRegex = /\S/g

  • All or none Check for the possible existence of an element
    let ourRegex = /colou?r/
    This would match 'color' and 'colour'


I'll definitely be adding more so keep checking back for the cheatsheet and tips to grow!

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!