DEV Community: Kiara Johnson

Regular Expressions (Regex) in JavaScript Tutorial

Kiara Johnson — Sat, 28 Oct 2023 21:33:47 +0000

Regular Expressions

Regular expressions are a list of characters that define a search pattern for a string of text. They are made up of “literal” and “meta” characters. “Literal” characters indicate a match of a specific character, such as a letter. “Meta” characters have special meanings such as (*) which indicate to include all preceding occurrences in the match. These characters are used to match text. There are several ways you can define the search. Besides literal and meta characters, you can use criteria such as character classes, quantifiers, anchors, and escape sequences.

Summary

I will be using a regular expression to match an email in this tutorial:

/^([a-z0–9_.-]+)@([\da-z.-]+).([a-z.]{2,6})$/

Anchors
Quantifiers
Character Classes
Flags
Grouping and Capturing
Bracket Expressions
Greedy and Lazy Match

Regex Components

Anchors

Anchors do not match a specific character, rather the position of a specific character. Anchors can be used to indicate the before, after, and between positions. In our email example, the (^) anchor is used to indicate that the search pattern must match from the beginning of the expression:

^([a-z0–9_.-]+)

The ($) anchor indicates that the string ends here and all characters must precede it:

([a-z.]{2,6})$

Quantifiers

Quantifiers represent how many characters should be matched in an expression. First, the (+) quantifier is used to match one or more occurrences of lowercase letters, digits, underscores, periods, or hyphens:

([a-z0–9_.-]+)

The (+) is also used to match one or more occurrences of digits, lowercase letters, periods, or hyphens:

([\da-z.-]+)

The quantifier ( {2, 6} ) is used to match a minimum of two characters and a maximum of 6 characters in the preceding group:

([a-z.]{2,6})

Character Classes

Character classes match any character or set of characters that are within a set of brackets. For example, the email regex uses three different instances of character classes. The first set of brackets ensures that the string can be a combination of any number of lowercase letters, numbers, dots, underscores, or hyphens. It specifies characters before the ( @ ) symbol:

[a-z0–9_.-]@

The second set of brackets is used to specify characters after the ( @ ) symbol. It allows the search to contain lowercases letters, numbers, dots, underscores, or hyphens:

@[\da-z.-]

The third set of brackets specifies characters before the literal (.) character. They will match any combination of lowercase letters and dots:

[a-z.]

Grouping and Capturing

Grouping is done by putting regex expressions in parentheses. Capturing groups are used to treat multiple characters as a single unit. There are three different groups in the email regex.

The first group is used to capture one or more occurrences of lowercase letters, digits, underscores, dots, or hyphens within the group:

([a-z0–9_.-]+)

The second group is used to capture one or more occurrences of digits, lowercase letters, dots, or hyphens within the group:

([\da-z.-]+)

The third group is used to capture between two and six occurrences of lowercase letters or dots:

([a-z.]{2,6})

Bracket Expressions

Bracket expressions are characters located between two brackets ( [ ] ). These expressions are used to match one or more characters in a set. In the example, the first bracket expression matches any lowercase, digit, underscore, dot, hyphen, or a combination of them:

[a-z0–9_.-]

The second bracket expression matches any digit, lowercase letter, dot, hyphen, or combination of them:

[\da-z.-]

The third bracket expression matches any lowercase letter or dot.

[a-z.]

Greedy and Lazy Match

Greedy matches match as many qualifiers as it can, while lazy matches match as few qualifiers as it can. Greedy matches use the quantifiers (+) and (*). Lazy matches are noted with the (?) character. The email example uses greedy matching.

Author

My name is Kiara Johnson and I am a new web developer. Check out my Github: https://github.com/Kiararj.

On to Back End!

Kiara Johnson — Fri, 18 Aug 2023 17:09:23 +0000

Two months in to the Full Stack Bootcamp, and we are starting to learn Back End technologies. I had finally started mastering JavaScript and node and express are definitely throwing me for a bit of a loop. Staying strong, though! Still building and enjoying the journey.

Going into week 7, and I'm struggling.

Kiara Johnson — Mon, 24 Jul 2023 02:41:00 +0000

Coding is hard, but I'm still optimistic. I feel when I am listening to lecture and applying it in class I understand the concepts perfectly. But once I open VSCode, outside of class I immediately draw a blank…where do I even start? A few Google searches point me in the right direction sometimes, but for the most part it's difficult for me to build something on my own. I still have hope, but it's definitely frustrating.

Two Weeks into Coding Bootcamp

Kiara Johnson — Sun, 18 Jun 2023 23:26:15 +0000

Two Weeks In

I've just wrapped up the second week of my coding bootcamp and the excitement hasn't worn off, yet. I'm benefiting greatly from having a live person explaining the concepts along with being able to code with them side by side and ask questions as they pop up. The first week was HTML and CSS fundamentals, which I already had a pretty good grasp on after trying out a few intro courses over the past year. Week two was about more complex CSS concepts, such as Flexbox. I thought I had a fairly good grasp on it until I tried coding some from scratch. I'm going to try reading more documentation before trying again. Other than that, I'm feeling great about the course so far. This week's challenge is to create a portfolio using the HTML and CSS we have learned so far. Creating a portfolio is something I've put off for a while since I think mine would not be advanced enough. I'm glad the course is forcing me to do so, since it will be very important in the job search. Next week, we start JavaScript which is the language that has been the toughest for me to learn. I'm hoping this new way of learning will finally make the language click for me.

Joining a Bootcamp

Kiara Johnson — Sun, 04 Jun 2023 15:33:09 +0000

UT Coding Bootcamp

Tomorrow, I start the UT coding bootcamp to accelerate my learning for Web Development. I have been on my coding journey for about a year and a half so far. I've started and joined a few free bootcamps and other free online learning tracks. I've learned along the way that I'm not the best at self teaching myself and I need some form of live instruction/tutoring to keep me on track. To say I'm excited to start this new venture is an understatement. I've completed the prework and built a simple study guide this week with HTML, CSS, and JavaScript. Check it out here: Study Guide.
The prework included learning soft-skills like developing a web developer mindset, how to debug, joining the web developer community, and commenting in your code. I'm excited to see what's in store for me for the next 6 months and what I will accomplish.