Regular expressions represent a pattern that is used to search for or modify a string. To work with regular expressions, JavaScript defines the RegExp object.
Let’s create a test regular expression:
const exp = /hello/;
const exp = new RegExp("hello");
To determine whether a regular expression matches a string, the RegExp object defines the test() method. This method returns true if the string matches the regular expression and false if it doesn’t:
const text = "hello world!";
const exp = /hello/;
const result = exp.test(text);//the test method searches for an expression in a string
console.log(result); // true - method found a match
The exec method performs similar actions, but as a result returns the part of the string that matches the phrase:
let text = "hello world!";
let exp = /hello/;
let result = exp.exec(text);
console.log(result); // hello
A regular expression can include special regular expression syntax elements. One of these elements represents groups of characters enclosed in square brackets. For example:
let text = "helloworld";
let exp = /[eld]/;//this regular expression indicates that this string must have one of three letters
let result = exp.test(text);
console.log(result); // true
If we need to determine the presence of alphabetic characters from a certain range in a string, then we can immediately set this range:
let exp = /[a-x]/;
let exp2 = /[а-я]/;
If, on the contrary, it is not necessary for the string to have only certain characters, then it is necessary in square brackets before enumeration of characters put the sign ^:
let exp = /[^a-x]/;
let exp2 = /[^а-я]/;
If necessary, we can collect combinations of expressions:
const exp = /[mh]о[use]/;
points to those strings that may contain the substrings “mouse“, “house“.
Regular expression flags
Flags allow you to customize the behavior of regular expressions. Each flag represents a single character that is placed at the end of the regular expression. JavaScript uses the following flags:
- global (flag g) – allows you to find all substrings that match the regular expression. By default, when searching for substrings, the regular expression selects the first substring found in the string that matches the expression.Although there can be many substrings in a string that also match the expression. To do this, this flag is used in the form of the symbol g in expressions.
- ignoreCase (flag i) – allows you to find substrings that match the regular expression, regardless of the case of characters in the string. To do this, the character i is used in regular expressions.
- multiline (m flag) – allows you to find substrings that match the regular expression in multiline text. To do this, the symbol m is used in regular expressions.
- dotAll (s flag) – allows you to match a dot in a regular expression with any text character, including a line separator. To do this, regular expressions use the symbol s
i Flag
const text = "hello World";
const exp = /world/;
const result = exp.test(initialtext); // false - World is written in upper case
In this case, you need to change the regular expression by adding the ignoreCase property to it:
const exp = /world/i;//add the i flag at the end
s flag
The s or dotAll flag allows you to match a . (dot) with any character, including the line separator:
const text = "hello\nworld";//words separated by line breaks
const exp = /hello world/;
const result = exp.test(text); // false
However, for example, we want JavaScript to ignore line breaks and have the given text match the regular expression /hello world/. In this case, we can use the s flag:
const text = "hello\nworld";
const exp = /hello.world/s;
const result = exp.test(text); // true
console.log(result); // true
We can use several properties at once:
const exp = /hello.world/si;
Regular expressions in String methods
A number of methods on the String object can take regular expressions as a parameter. The split method can use regular expressions to split strings. For example, let’s split the application by words:
const text = "Hello my name is Alexander";
const exp = /\s/;//split by space
const result = text.split(exp);
result.forEach(value => console.log(value));
//Hello
//my
//name
//is
//Alexander
The match() method is used to find all matches in a string:
const text = "Hello my name is Alexander, my mother named my Alexie";
const exp = /name[a-x]*/gi;//The asterisk character indicates the possibility of an indefinite number of characters
const result = text.match(exp);
result.forEach(value => console.log(value));
//name
//named
The іearch method finds the index of the first occurrence of a match in a string:
const initialText = "hello world";
const exp = /wor/;
const result = initialText.search(exp);
console.log(result); // 6
The Replace method allows you to replace all regular expression matches with a specific string:
let menu = "Breakfast: porridge, tea. Lunch: soup, tea. Dinner: salad, tea.";
const exp = /tea/gi;
menu = menu.replace(exp, "coffee");
console.log(menu);//Breakfast: porridge, coffee. Lunch: soup, coffee. Dinner: salad, coffeee.
Metacharacters and modifiers
Regular expressions can also use metacharacters – characters that have a specific meaning:
Metacharacters
- \d – matches any digit from 0 to 9
- \D – matches any character that is not a digit
- \w – matches any letter, number, or underscore (ranges A-Z, a-z, 0-9)
!works only for latin characters - \W – matches any character that is not a letter, digit, or underscore (that is, not in the following ranges A-Z, a-z, 0-9)
!works only for latin characters - \s – matches a space
- \S – matches any character that is not a space
- . – matches any character
For example, the standard phone number format +1-234-567-8901 matches the regular expression \d-\d\d\d-\d\d\d-\d\d\d\d.
For example, let’s replace the numbers of the number with zeros:
let phoneNumber = "+1-234-567-8901";
let myExp = /\d-\d\d\d-\d\d\d-\d\d\d\d/;
phoneNumber = phoneNumber.replace(myExp, "00000000000");
document.write(phoneNumber);
Modifiers
In addition to the elements of regular expressions discussed above, there is another group of combinations that indicates how characters will be repeated in the line. Such combinations are also called modifiers:
- {n} – matches the nth number of repetitions of the previous character. For example, h{3} matches the substring
“hhh” - {n,} – matches n or more repetitions of the previous character. For example, h{3,} match substrings “hhh”, “hhhh”, “hhhhh”, etc.
- {n,m} – matches n to m repetitions of the previous character. For example, h{2, 4} matches substrings “hh”, “hhh”, “hhhh”
- ? – matches one occurrence of the previous character in the substring or its absence in the substring. For example, /h?ome/ matches the substrings “home” and “ome”.
- + – matches one or more repetitions of the previous character
- * – matches any number of repetitions or no previous character
- ^ – matches the beginning of the string. For example, ^h matches the string “home” but not “ohma” because h must represent the beginning of the string
- $ – matches the end of the string. For example, o$ matches the string “Hello” because the string must end with the letter o
For example, let’s take the same phone number. It matches the regular expression \d-\d\d\d-\d\d\d-\d\d\d\d. However, with the help of the above combinations, we can simplify it: \d-\d{3}-\d{3}-\d{4}
It should also be noted that since the characters ?, +, * have a special meaning in regular expressions, in order to use them in their usual meaning (for example, we need to replace the plus sign in the string with a minus), then these characters must be escaped with a slash:
let phone = "+1-234-567-8901";
let myExp = /\+\d-\d{3}-\d{3}-\d{4}/;
phoneNumber = phoneNumber.replace(myExp, "80000000000");
console.log(phoneNumber);
Separately, consider the use of the combination ‘\b‘, which indicates a match within a word. For example we have next line: “Languages of learning: Java, JavaScript, C++“.
Over time, we decided that Java should be replaced with C#. But a simple replacement will also replace the string “JavaScript” with “C#Script“, which is not allowed.
And in this case, we can replace if the regular expression matches the whole word:
let initialText = "Languages: Java, JavaScript, C++";
let exp = /\bJava\b/g;
let result = initialText.replace(exp, "C#");
console.log(result); // Languages: C#, JavaScript, C++
!works only in Latin
Groups in regular expressions
Groups are used to search for more complex matches in a string. Groups are enclosed in parentheses in regular expressions.
For example, we have the following HTML code which contains an image tag: ‘<img src=”picture.png” />‘. And let’s say we need to isolate paths to images from this code:
let initialText = '<img src= "picture.png" />';
let exp = /[a-z]+\.(png|jpg)/i;
let result = initialText.match(exp);
result.forEach(function (value, index, array) {
console.log(value);//picture.png png
})
The first part before the brackets ([a-z]+\.) indicates the presence in the string of 1 or more characters from the range a-z, after which
point goes.
Since the dot is a special character in regular expressions, it is escaped with a slash.
And then comes the group: (png|jpg). This group specifies that either “png” or “jpg” can be used after the dot.
Getting group values
The advantage of using groups in regular expressions is that we can get the values of each individual group. For example, as you know, different countries use different date formats. What if we want to get a date in year-month-day format and want to convert it to some other format? In this case, for each individual component, we can define our own group:
const exp = /(\d{4})-(\d{2})-(\d{2})/;
const result = exp.exec("2021-09-06");
console.log(result[0]); // 2021-09-06
console.log(result[1]); // 2021
console.log(result[2]); // 09
console.log(result[3]); // 06
console.log(`${result[3]}.${result[2]}.${result[1]}`); // 06.09.2021
The result is an array, where the first element (at index 0) always represents the substring that matched the regular expression. All subsequent elements of this array represent groups. That is, the first group has index 1, the second is index 2 and so on.
Group names
JavaScript allows you to assign a specific name to each group in regular expressions. Using this name, you can then get the value that corresponds to this group.
To set the group name, use the expression:
// (?<group_name> ... )
Let’s look at an example:
const exp = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u;
const result = exp.exec("2021-09-06");
console.log(result.groups); // {year: "2021", month: "09", day: "06"}
console.log(result.groups.year); // 2021
console.log(result.groups.month); // 09
console.log(result.groups.day); // 06
Assertions
Assertions or assertiobs allow you to get a substring that matches a regular expression and that is preceded or, conversely, not preceded by a specific expression.
A positive assertion (when a substring must be preceded by another substring) is defined using the expression:
// (?<=...)
After the equal sign = there is an expression with which the substring must be preceded.
A negative assertion (when a substring must NOT be preceded by another substring) is defined using the expression:
// (?<!...)
After the exclamation point ! there is an expression that should NOT be preceded by a substring.
Let’s look at an example. For example, we want to get only the dollar amount. For this we apply the positive statement:
const text1 = "All costs: $10.53";
const text2 = "All costs: €10.53";
const exp = /(?<=$)\d+(\.\d*)?/;
const result1 = exp.exec(text1);
console.log(result1); // ["10.53", ".53", index: 12, input: "All costs: $10.53", groups: undefined]
const result2 = exp.exec(text2);
console.log(result2); // null
The group (?<=\$) specifies that the line must be preceded by a dollar sign $. If there is none, then the exec() method will not find a match and will return null.