Introduction

Starting off with regular expressions let's first take sometime to understand how they work at the basic level and then try to relate this with all what we've heard in the previous Introductory chapter.

So let's begin without wasting any more of this time...

Simple searching

If you arrived at this course from the Regexp Chapter jn JavaScript Strings then you would already know how to use regular expressions within JavaScript.

Anyways even if you haven't then also we have got you covered...

Consider the code below:

var str = "Coding is amazing";
var newStr = str.replace("Coding", "Baking"); // "Baking is amazing"

It demonstrates a very basic string replacement example using the replace() method. Notice the first argument here - it is a string, and nothing fancy which tells us that the searching is string-based. Well and good!

Now let's try this same example with regexp-based searching. We'll construct an extremely simple regular expression to match the same word "Coding" as before.

var str = "Coding is amazing";
var regex = /Coding/; // the regular expression
var newStr = str.replace("coding", "baking"); // "Baking is amazing"

And finally you are witnessing that fancy thing in line 2, which we were talking about earlier. This is what we call a regular expression.

How to write it, how to understand it, what is its syntactical rules, how else can it be layed out? Verily all these questions will be going though your mind, but don't worry; we'll answer each of them as this chapter and this course progresses.

For now let's explore the basics of regular expressions in detail now.

RegExp syntax and literals

In JavaScript we can construct a regular expressions in two ways - either the literal way or the constructor way.

Let's first see how the former works.

In the literal way, we have two forward slashes // just like we have in a single line comment; in between them the pattern of the expression and outside the second slash optional flags. In some technical notation we can express a literal regexp as follows:

/pattern/flags

Just like we have a literal way to create arrays using square brackets [], create objects using curly braces {} and so on, we have a literal way to create regular expressions using forward slashes //.

The pattern is the actual thing that takes part in the matching process, whereas the flags serve to only modify the searching behaviour.

The developer constructs the pattern and whatever is inside it is exactly what is matched against in the test string. Nothing outside the pattern is considered in the actual match, although it is considered in the expression.

This means that flags that are not part of the pattern, aren't actually matched against in the test string. They are however considered in the main expression - they change the default searching behavior.

You'll slowly and gradually understand all these small definitions and descriptions as you progress through this course.

So what is the default searching behaviour?

Well, by default, regexp searches are case-sensitive and stop at the first match. Try the following examples.

// regexp are case-sensitive by default
var str = "Hello world!";
var regex = /hello/;
var newStr = str.replace(regex, "Changed"); // "Hello world";

Notice that since there is exactly no such word "hello" in the string str above, the replace() method won't find anything and consequently replace none.

Now for the second default behavior consider the code below:

// regexp match only the first occurence by default
var str = "Hello world! Once again: Hello world!";
var regex = /Hello/;
var newStr = str.replace(regex, "Changed"); // "Changed world! Once again: Hello world!";

Here only the first occurence is replaced by the expression unlike string-based searching which replaces all occurrences.

And this is the default mechanism for any regular expression you will construct. Fortunately it can be modified using flags as we shall see in the next Flags chapter. So now finally we know, at least, the basic structure of a regular expression created literally.

As you'll get your hands more spread around regular expressions in JavaScript, you'll find the literal form to be far easier and quicker to write than the constructor form as well as the most common way to write a regular expression.

In the coming chapters almost all of the examples we will see, will use the literal syntax so make sure to learn this section thoroughly, although there isn't much to learn in it!

RegExp() constructor

As discussed earlier, there is a constructor way too to create regular expression in JavaScript. That constructor is RegExp().

Its first argument is the pattern of the expression given as a string whereas the second argument is its sequence flags, once again in the string format.

new RegExp(pattern, flags)

If you don't know about JavaScript constructors then consider reading our JavaScript constructors chapter.
var str = "Hello world!";
var regex = new RegExp("Hello");
var newStr = str.replace(regex, "Changed"); // "Changed world";

Now due to the fact that in the constructor, the pattern is given as a string, transitioning from a literal form to an equivalent constructor form might sometimes require extra work to be done.

For example adding a backslash \ in a literal would mean adding only one backslash, whereas in a constructor we'll have to add two backslashes - the first one will be escaped by the string and we'll be left with the second one only.

We'll explore the RegExp() constructor in more detail in the Constructor chapter and see it's caveats and purpose as compared to the literal form.

In conclusion

So this chapter was just a brief introduction to the basics of regular expressions. In the ones coming we will see more details to these basics and get our hands over to some real expression simplest ones aren't real!!!