Translation: Crazy geek

Medium.freecodecamp.org/simple-rege…

Disclaimer: Reprint is prohibited without permission

Have you always wanted to learn regular expressions, but been put off because of their complexity? In this article, I’ll show you five easy-to-learn regex techniques that you can use immediately in your favorite text editor.

Text editor Settings

While almost all text editors now support regular expressions, I’m using Visual Studio Code for this tutorial, but you can use any editor you like. Also note that you usually need to turn on the RegEx switch somewhere near the search input box. Here’s how to do this in VS Code:

You need to enable RegEx by selecting this option

1) .– Matches any character

Let’s get started. Dot symbol. To match any character:

b.t
Copy the code

The re matches “bot”, “bat”, and any three-character word starting with b and ending with T. But if you want to search for dot notation, you need to escape it with ‘, so the following re only matches the exact text “b.t” :

b\.t
Copy the code

2) . *– Match anything

Here. Means * “any character” and * means “any number of times this symbol repeats the previous content.” * Put them together (.*) means * “Repeat any symbol any number of times.” * For example, you can use it to find matches that start or end with some text. Suppose we have a javascript method that looks like this:

loadScript(scriptName: string, pathToFile: string)
Copy the code

We want to find all calls to this method, where pathToFile points to any file in the folder “lua”. The following regular expressions can be used:

loadScript.*lua
Copy the code

This means, “Matches all strings that start with “loadScript” and end with “lua”.”

3) ?— Non-greedy matches

After *? The symbol and other matching rules mean “as few matches as possible”. In the previous figure, each match yielded two “lua” strings, and everything didn’t match until the second “lua”. If you want to match the first occurrence of “lua”, you can use the following re:

loadScript.*? luaCopy the code

This means, “Matches anything that starts with “loadScript” followed by any character until the first occurrence of “lua”.

loadScript.*? Lua: Matches everything starting with loadScript, up to the first occurrence of “lua”

4) ‘() ### — capture groups and backreferences

Ok, now we can match some text. But what if we want to modify part of the text that we find? This is where capture groups come in.

Suppose we modify the loadScript method and now need to insert another parameter between its two original arguments. Let’s name this new parameter id, and the new function prototype should look like this: loadScript(scriptName, ID, pathToFile). We can’t use the regular replacement functionality of a text editor here, but regular expressions can help.

In the figure above you can see the result of running the following regular expression:

loadScript\(.*? ,. *? \)Copy the code

This means: “Match anything that starts with “loadScript(” followed by anything until the first one is encountered, and then anything until the first one is encountered)”

The only thing that might seem odd to you is the \ symbol. They are used to escape parentheses.

Because symbols (and) are special characters that regular expressions use to capture matching text parts, we need to match the actual parenthesis characters, so we need to escape them.

In the previous expression, we used.*? Symbols define two parameters of a method call. To make each parameter a separate capture group, add (and) symbols before and after them:

loadScript\((.*?) , (. *?) \)Copy the code

If you run this re, you will see no change. This is because it matches the same text. But now we can call the first parameter \$1 and the second parameter \$2. This is called a backreference, and it will help us do what we want: add another argument between the two arguments:

Search input:

loadScript\((.*?) , (. *?) \)Copy the code

This is the same as the previous re, but maps the parameters to reverse capture groups 1 and 2, respectively.

Alternative input:

loadScript(The $1,id,$2)
Copy the code

This means that * “replace each matched text with the text “loadScript(“, capture group 1,” ID “, capture group 2 and) “. Note that you do not need to escape the parentheses in the replacement input. *

5) []– character classes

You can list the characters to be matched in a particular position in the [and] symbol. For example, [0-9] matches all numbers from 0 to 9. You can also list all the numbers explicitly: [0123456789] — same meaning as before. You can also use letter dashes. [A-z] will match all lowercase Latin characters, [A-z] will match all uppercase Latin characters, and [A-za-z] will match both.

You can also use * after a character class, as after a., which in this case means: “Match any number of characters in this class.”

Afterword.

You should know that there are several ways to write regular expressions. I’m talking about the javascript RegEx engine here. Most modern engines are similar, but there may be some differences. Typically these differences include escape characters and backreference tags.

You can open a text editor right now and start using some of these techniques right away. You’ll see that many refactoring tasks can be done faster than ever before. Once you’ve mastered these techniques, it’s time to explore more regular expressions.

Welcome to pay attention to the front-end public number: front-end pioneer, access to front-end engineering practical toolkit.