Regular expressions

@serverSerrverlesskiy

Regular expressions are a formal language for searching and manipulating strings in a text based on the use of metacharacters.

Regular expressions allow you to:

Search for text in a string
Replace substrings in a string
Extract information from a string

JavaScript, along with Perl, is one of the programming languages in which regular expression support is built directly into the language.

Difficulty to use

the complexity of using

The disadvantage of regular expressions is that they often look strange and even intimidating. This is especially true for more complex templates.

let regExp = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Defining regular expressions

The definition of a regular expression is the creation of a template on the basis of which work with strings will take place. In JavaScript, regular expressions are an object that can be defined in two ways.

Literal
Construction

Defining regular expressions using literals. For regular expressions, slashes / ... / are literals, they play the same role as the parentheses `` ... '' when creating strings.

let regExp = /pattern/

If you decide to create regular expressions using literals, then it should be borne in mind that this method of creation does not allow dynamic changes in the specified values. This is due to the fact that regular expression literals cause precompilation when the script is parsed.

Defining regular expressions using a constructor.

let regExp = new RegExp('pattern')

The compilation of the regular expression created using the constructor occurs at the time of the script execution. This way of creating is worth using if your regular expression is being created созда from a dynamically generated string.

Using

pressing the button

Let's look at the use of regular expressions using an example:

let regExp = /banana/

With this code we have created a simple regular expression that searches for the string banana. To test a regular expression, you can use the .test(string) method, the result of the method is a boolean value.

Live Editor

function learnJavaScript() {
  let regExp = /banana/,
    str = 'fanana ranana banana'
  return regExp.test(str) ? 'Yes' : 'No'
}

function learnJavaScript() {
  let regExp = /banana/,
    str = 'fanana ranana banana'
  return regExp.test(str) ? 'Yes' : 'No'
}

Result

In the example, the regular expression looks for the substring banana in the string str.

Anchors

anchor

Anchors tie a pattern to the beginning or end of a line. To bind to the beginning of a line, use ^, and to the end, use $.

Live Editor

function learnJavaScript() {
  let regExp = /^banana/,
    str = 'lime banana orange'
  return regExp.test(str) ? 'Yes' : 'No'
}

function learnJavaScript() {
  let regExp = /^banana/,
    str = 'lime banana orange'
  return regExp.test(str) ? 'Yes' : 'No'
}

Result

Using this pattern / banana / you will search for banana in the whole line. If you need to check for a complete match of a string with a template, you need to use the anchors / ^ banana $ /. The .test () method will return true only if the whole line is banana.

Flags

Flag

Flags are used to enhance regular expression searches.

g - when searching, searches for all matches;
i - search does not depend on case[Z-z];
m - multi-line mode;
s - turns on the dotall mode, in which the dot . can match a line feed character;
y - searches starting from the character that is at the position of the lastindex property** of the current regular expression;
u - enables Unicode support.

Using flags in different ways to create a regular expression pattern

Literal
Construction

let regExp = /pattern/anchor // prettier-ignore

Please note that the flags are integral part of the regular expression. Flags cannot be added or removed later. Also flags can be combined.

Live Editor

function learnJavaScript() {
  let regExp = /banana/i,
    str = 'faNana RanaNA BaNanA'
  return regExp.test(str) ? 'Yes' : 'No'
}

function learnJavaScript() {
  let regExp = /banana/i,
    str = 'faNana RanaNA BaNanA'
  return regExp.test(str) ? 'Yes' : 'No'
}

Result

Try removing the i flag from the example.

let regExp = new RegExp('pattern', 'anchor')

Please note that the flags are integral part of the regular expression. Flags cannot be added or removed later. Also flags can be combined.

Live Editor

function learnJavaScript() {
  let regExp = new RegExp('banana', 'i'),
    str = 'faNana RanaNA BaNanA'
  return regExp.test(str) ? 'Yes' : 'No'
}

function learnJavaScript() {
  let regExp = new RegExp('banana', 'i'),
    str = 'faNana RanaNA BaNanA'
  return regExp.test(str) ? 'Yes' : 'No'
}

Result

Try removing the i flag from the example. The search is now case sensitive.

Total

The topic is very extensive and rarely used by us in development, so if you're interested, you can get acquainted with it in more detail here, here and here.