REGULAR EXPRESSIONS IN JAVASCRIPT

Knowing about regular expressions is very important when we work with data because they allow us to do particular checks on a string, such as whether there is a certain combination of characters, whether there are phone numbers, e-mail addresses, and so on. Thanks to the methods provided by javascript we can extract this information and put it into an array. A typical use is validating form fields, managing a password etc. Instead of operating directly on the javascript code we will initially do our tests on the site regexr.com. whose link I leave you. https://regexr.com/

THE GLOBAL FLAG

Let’s make sure that javascript is selected. The first thing we need to define is a pattern that needs to be indicated within two slashes. After the second slash there is also a g character (global). To understand what this flag is for, let’s clear the pattern and try searching for all occurrences of the letter a.

THE GLOBAL FLAG

As we see all occurrences of the letter a are selected. If we disable the global flag only the first occurrence found is selected, the one found in was. So when we work in non-global mode(g flag) the regular expression engine returns only the first occurrence found in the text. Let us now put an A and see that it is not selected; however, if we check the i (case insensitive) flag we will see that the A will also be selected.

QUANTIFIERS FIRST PART

Quantifiers as the word itself says serve to indicate a quantity. To understand let’s take an example right away. We delete all the text and write ciao. If we write hello as a pattern, it will be matched with the text ciao.

THE QUANTIFIER ?

However, if we put miao, no match will be found because the pattern says: find me one occurrence of m, one occurrence of i, one occurrence of a and one occurrence of o. If we put the quantifier ? after m will be found matching iao, this is because this quantifier tells the regular expressions engine find me 0 or 1 occurrence of the letter m. The rest remains unchanged.

THE QUANTIFIER +

We then have the quantifier + which tells the regular expressions engine, find me at least one occurrence of m followed by one occurrence of i by one occurrence of a and one occurrence of o. Obviously in this case the pattern fails since we have no occurrences of m in the string ciao. If we put as text miao, a match is found and the number of letters m can be one or more (the quantifier + says at least one occurrence in the text).

THE QUANTIFIER *

The other quantifier is the quantifier * which means zero or more occurrences.

SEQUENCE OF CHARACTERS AND METACHARACTERS

We work in global and case insensitive mode, if we want to search for a word, for example, was we type that word as a pattern. Beware, however, the engine does not go looking for the word was but for a sequence of characters consisting of w from a and s. Within the pattern we can use metacharacters that have a special meaning in the pattern. If we put a dot . all characters except new line characters are selected. The wildcard \w looks for all letters from a to z, all numbers from 0 to 9, and underscores. Does not select spaces and carriage returns. The metacharacter \W does the exact opposite-selects spaces, periods and carriage returns. Another very important metacharacter is \d, which finds all numbers within a text from 0 to 9. \D does the opposite, so it finds matches with everything that is not a number. Finally, we have the wildcard \s if we want to select spaces within the text, and \S which selects everything that is not a space, nor new line characters.

QUANTIFIERS SECOND PART

Curly brackets are used to quantify a specific value. For example:

The pattern is verified only with three occurrences of the letter m, the letter i, a and o. In addition to specifying the exact quantity we want we can also specify “from” e.g. we want there to be correspondence between a sequence of at least three m and the sequence i, a, o. The pattern is this:

We can also specify a range, for example, we put {3,5}. Two other components we can write into the pattern are the dollar sign and the circumflex accent ^. The $ finds match if a certain character is at the end of a text. For example.

If we activate the multiline flag, the ga sequence of the first row will also be captured. With the circumflex accent we are going to search at the beginning of the line or over several lines if we activate the multiline flag. This time the symbol must precede the character. The flags allow us to work in a certain mode; therefore, whether or not they are activated depends solely on what we need at that moment.

CHARACTER RANGE AND GROUPS

Defining an abc pattern means telling the engine to search the text for a sequence with those characters. Through the use of square brackets or indifferently from the pipe character we can search for correspondence with one of the given characters.

For example, if we want to select a range of lowercase letters from a to n we write: /[a-n]/g, or the numbers 0 to 5 /[0-5]/g. We can also make multiple selections, for example:

With this pattern we select all letters from a-n including lower or upper case t (case insensitive flag active) and all numbers between 3 and 6. The circumflex accent denotes negation, somewhat like the not in Boolean expressions. For example: /[^a-n]/g means take all the letters that are not in the range [a-n]. If we want to select all points in the text we put it in square brackets. Let’s go back to the range a-n. We now want to find all occurrences between /[a-n]{3}/g only if there are at least three occurrences of letters that are in the range [a-n].

We see that .com is not selected because there are only two letters in the range [a-n]. With round brackets we go to group a portion of the pattern. Once we enclose a pattern in round brackets, for example because we want it to be optional, then we can use a quantifier, e.g. *. Again we can use the quantifier brackets.

OBJECT REGEXP AND LITERAL REGULAR EXPRESSIONS

Javascript natively supports regular expressions through the object RegExp. Doing the console.log(RegExp.prototype); we see that we have a number of properties and methods for working with regular expressions. The method exec finds the match in the text with the defined pattern and returns an array as the result or null. test returns true or false, true in case of match false otherwise.

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Oggetto RegExp</title>
</head>
<body>
    <script type="rocketlazyloadscript">
        let obj = {}/*Quando invochiamo un oggetto letterale, internamente javascript
        esegue new Object(); in modo che l'oggetto letterale erediti da Object.prototype.
        la stessa cosa vale per le espressioni regolari, possiamo definirle sia in
        modo letterale che dalla constructor function RegExp().*/
        let testo = 'Corso Corso JavaScript. Sezione espressioni regolari';
        const reg = /corso/gi;
        const reg2 = new RegExp('corso','gi');
        console.log(Object.getPrototypeOf(reg)===RegExp.prototype);//true
        console.log(RegExp.prototype);
        let ris = reg.exec(testo);
        console.log(ris);/*Non abbiamo corrispondenza flag case insensitive
        non impostato. Mettiamo il flag i. Dopo aver messo il flag vi è match.
        Aggiungiamo al testo una doppia parola Corso. console.log(ris); si vede
        che il motore javascript delle espressioni regolari trova solo la prima
        occorrenza. Per trovare la seconda facciamo:*/
        let ris2 = reg.exec(testo);
        console.log(ris2);
        ris = reg2.test(testo);
        console.log(ris);
    </script>
</body>
</html>

METHODS FOR WORKING WITH REGULAR EXPRESSIONS

Copy to Clipboard

LINKS TO PREVIOUS POSTS

THE JAVASCRIPT LANGUAGE

LINK TO CODE ON GITHUB

GITHUB