JavaScript #18: Regex in JavaScript

Regex is a common concept in all programming languages. If you are a newbie learning about Regex or want to re-learn this knowledge, this is the series of articles for you.

In this article we will also discuss the basics of Regex.

Table of contents:

Let’s go to the content
What is Regex?
Distinguish betten test() and match methods
Flag i and g in regex:
Use “.” in regex
Check letter in the middle of word
Check every single letter and number
Practical application
Conclusion

What is Regex?

Regex is sort name of Regular expression.

A regular expression is a pattern of characters.

The pattern is used to do pattern-matching “search-and-replace” functions on text.

In JavaScript, a RegExp Object is a pattern with Properties and Methods.

Distinguish between test() and match() methods

Let's have a look at the example below:

let str = 'Hello world'

let regex = /world/

We have a string of characters called Hello world. The structure of a regex consists of two "/" "/", the content inside and the flags. Here we have a regex called /world/. Let's see how test() and match() methods work?

let testResult = regex.test(str)

let matchResult = str.match(regex)

console.log(testResult) // => true

console.log(matchResult) // => Array [ "world" ]

For the test() method, the syntax is regex.test() and the parameter is the character string to be tested. The returned result will be a boolean data type. The match() method will be str.match() and take as an argument a regex. The return result of match() will be an array containing characters containing pattern.

So, we can use it according to each case. If we need to check if a string contains the conditions we set or not, we can use the test() method. If we want to get an array of characters that meet the pattern we originally mentioned, we will use the match() method.

Flag i and g in regex:

Let’s look at example!

let str = 'World worlD'

let regex = /world/i

let testResult = regex.test(str)

console.log(testResult) // => true

If you want to check if a condition in Regex exists in a string, regardless of lowercase or uppercase. You will use the i flag outside of “//”.

Now let's add the g flag to the regex. Let's see the results.

let str = 'World worlD'

let regex = /world/ig

let matchResult = str.match(regex)

console.log(matchResult) // => Array [ "World", "worlD" ]

If there is no g flag, the match() method returns the first word found. If we add the g flag, the result will be all the words that satisfy the condition found in that character string.

Use “.” in regex

In case you remember exactly length of word, but you forgot first letter, you can use “.” like example:

let str = 'I have a brown dog, and he has a green fog. And he likes grog'

let regex = /.og/ig

let matchResult = str.match(regex)

console.log(matchResult) // => Array [ "dog", "fog", "rog" ]

You can see the pattern of the regex is /.og/. The result will return the word with the exact length of the pattern. In this case we have dog, fog, and grog. For the word dog and fog, the length is three and the result is correct. From grog the result only returns rog. This pattern you can use when you know the exact length of the word you want to receive. Same for “.” placed at the end.

let str = 'He goes to hill. He say hi and he hit him.'

let regex = /hi./ig

let matchResult = str.match(regex)

console.log(matchResult) // => Array [ "hil", "hi ", "hit", "him" ]

You can see that the returned result is still the same length as we originally set. If "." In the middle, what will happen?

let str = 'bug, big, baag, begg, bbog'

let regex = /b.g/ig

let matchResult = str.match(regex)

console.log(matchResult) // => Array [ "bug", "big", "beg", "bog" ]

Words that seem similar, however do not contain the pattern that we set out, are not accepted. And the returned result is still true to the length we set at the beginning and the pattern we set.

Check letter in the middle of word

In the example above, when you know the exact length of the word and you search for words with the same pattern. In this section you will be limited to the search for letters. Only the letters you specify will be searched, otherwise they will not be added to the returned results.

let str = 'bug, big, bag, beg, bog, bxg, bhg'

let regex = /b[auioe]g/ig

let matchResult = str.match(regex)

console.log(matchResult) // => Array [ "bug", "big", "bag", "beg", "bog" ]

You can see that the syntax to search for is that letters "b" and "g" are certain to be present, while letters surrounded by "[]" may or may not be present. The words in the sentence are compared with our pattern. If words match our pattern, they will be accepted, and other words will be ignored.

For this pattern you can limit the letters that need to be checked. Other than using “.” Just match with the result.

Check every single letter and number

As shown in the example above. Whether the letters in each word match every letter in "[]". If we check an alphabet, we need a more concise way of writing.

let str = 'bug, big, bag, beg, bog, bxg, bhg'

let regex = /b[a-z]g/ig

let matchResult = str.match(regex)

console.log(matchResult) // => Array [ "bug", "big", "bag", "beg", "bog", "bxg", "bhg" ]

With the pattern “[a-z]”, the words will be checked if all the characters are between a and z. If there is a match, it will be added to the returned result.

Similar to checking numbers, you will also have a pattern of "[0-9]" to check if the letters are in the range 0 to 9 or not.

let str = 'b1g, b2g, b3g, b4g, b5g, b6g, b7g'

let regex = /b[0-9]g/ig

let matchResult = str.match(regex)

console.log(matchResult) // => Array [ "b1g", "b2g", "b3g", "b4g", "b5g", "b6g", "b7g" ]

Words that satisfy the condition are included in the resulting array.

If we want to combine both search with numbers and search with letters, what will happen?

let str = 'b1g, b2g, b3g, b4g, b5g, b6g, b7g, "bug", "big", "bag", "beg", "bog"'

let regex = /b[0-9a-z]g/ig

let matchResult = str.match(regex)

console.log(matchResult) // => Array [ "b1g", "b2g", "b3g", "b4g", "b5g", "b6g", "b7g", "bug", "big", "bag", … ]

The structure will still be the pattern within “[]” checked character by character. Now there is a combination of “0-9a-z”. The test condition is whether the character is from a to z or 0 to 9.

Another case would be if not wanting words containing the characters from a to z and from 0 to 9.

let str = 'b1g, b7g, bug, bog, b~g, b*g'

let regex = /b[^0-9a-z]g/ig

let matchResult = str.match(regex)

console.log(matchResult) // => Array [ "b~g", "b*g" ]

You would put a “^” inside “[]” and put it before the pattern “0-9a-z”. And the words to be searched will not contain letters from a to z and from 0 to 9.

Practical application

We will apply the knowledge above to solve a small problem. We have a list of words, we need to choose the words whose pattern is "b*g" with "*" only accepting vowels or numbers, the other letters are not ignored. Now let's analyze. Pattern has a structure of "b*g", in code it will be implemented like this:

let regex = /b[]g/ig

Next, “*” takes only vowels or number values. We can use the following way:

let regex = /b[auioe0-9]g/ig

Our Pattern is now built. Now let's check if this pattern is working or not?

let regex = /b[auioe0-9]g/ig

let words = 'big, bag, bug, beg, bog, bxg, bsg, bbg, bbbsg, b7g, b1g, b9g, b0g'

console.log(words.match(regex))

// => Array [ "big", "bag", "bug", "beg", "bog", "b7g", "b1g", "b9g", "b0g" ]

Awesome! Words that match our pattern are included in the returned results. The rest of the words are omitted. So, we have fulfilled our request.

Conclusion

We have gone through part one about regex, we already know that test() method returns boolean data type, match() method will return array containing the results of letters or words containing letters in our pattern. Besides that, we also went through some basic patterns.

If you have any ideas, feel free to comment below. Thank you for joining with me. Have a good day!