preface

Re, of course, is an incredibly powerful tool. If you look carefully, you can see re in source code (in various languages), editors, developer tools, command lines, and more. Learning to use regex is not only fun, but also a shortcut to productivity.

Basic concept

The common concepts of re can be found in the following table, mainly memorizing character types, anchor points, escape characters, quantifiers, etc.

The basic usage should be quickly understood, but the following describes the various regular assertions.

assertions

The practicability of assertions is equivalent to providing an anchor point for a regular expression, which is frequently used by the author in daily work practice.

Positive antecedent assertion

Pattern: x (? =y)

Matches x expression, but x must be followed by y expression.

Negative antecedent assertion

Pattern: x (? ! y)

Matches x expression, but x cannot be followed by y expression.

Positive postmortem assertion

Model: (? <=y)x

Pretty obvious, x expression matches, but y expression must appear before x.

Negative posthoc assertion

Model: (? <! y)x

Pretty obvious, x expression matches, but y expression cannot precede x.

\ 1

\1 is actually the last match to the grouping reference.

For example, I want to match Huahua in I like JJLin and Huahua~, as shown in the picture:

Of course, the following ways can also be achieved:

  1. Use the quantifier + or *

  2. Or use the global search flag G

  3. Scope of use {2}

However, while all roads lead to Rome, you still need to pay attention to the number of Hua matches. For example, methods 1 and 2 will match as much as possible.

Use a regular

The RegExp object in JavaScript

The exec method

The exec() method performs a search match in a specified string. Returns a result array or NULL.

/ (?<=appear\s)(\w+)[^\d]+(\d+)/g.exec("apple yummy.appear angel id 1030"); / / = > ["angel id 1030", "angel", "1030", index: 20, input: "apple yummy, appear angel id 1030", groups: undefined]
Copy the code

You can see that the first entry of the array is all the strings that matched. Next, the matching grouping (\w+) -> Angel, (\d+) -> 1030 is shown.

Of course, I personally find exec to be the easiest place to stumble: when an exec method uses the “G” flag, it can be executed multiple times to find a successful match in the same string.

To rewrite the above example, we store the re as a variable:

const regexAngelAndId = / (? <=appear\s)(\w+)[^\d]+(\d+)/g;

regexAngelAndId.exec("apple yummy, appear angel id 1030");
// => ["angel id 1030", "angel", "1030", index: 20, input: "apple yummy, appear angel id 1030", groups: undefined]
regexAngelAndId.lastIndex;
/ / = > 33
regexAngelAndId.exec("apple yummy, appear angel id 1030");
// => null
regexAngelAndId.lastIndex;
/ / = > 0
Copy the code

You can see that. When we save as a regular literal, the lookup will start at the location specified by the lastIndex property of the regular expression. Test () also updates the lastIndex property. Therefore, the same value can never be found the second time, and the result is automatically null.

It is important to keep this in mind when using exec.

The test method

The test() method performs a search to see if the regular expression matches the specified string. Returns true or false.

const regexAngelAndId = / (? <=appear\s)(\w+)[^\d]+(\d+)/g;

regexAngelAndId.test("apple yummy, appear angel id 1030");
// => true
regexAngelAndId.lastIndex;
/ / = > 33
regexAngelAndId.test("apple yummy, appear angel id 1030");
// => false
regexAngelAndId.lastIndex;
/ / = > 0
Copy the code

Similarly, the exec method needs to pay attention to the “G” flag.

These two methods are common in JavaScript, so keep them in mind.

Regular expression static properties

  • RegExp.$1-$9
  • RegExp.input ($_)
  • RegExp.lastMatch ($&)
  • RegExp.lastParen ($+)
  • RegExp.leftContext ($`)

The following are all static properties on regular objects, which are generally used infrequently (or did I not notice?). , refer to the MDN document – RegExp for details.

Of course, there are many other methods and properties that are self-documenting.

String objects in JavaScript

Using re on string objects is also a very common operation. You probably know that replace and match can use regees, but search, split, and even the newer matchAll methods can help you use regees on strings.

The interesting thing here is the matchAll method, which has emerged as a perfect replacement for the regexp.exec () method of looping matches.

Using matchAll returns an iterator. You can use for… Of, the extended operator, or array.from (). It’s very convenient.

The best way to learn about these apis is to refer to the MDN document-string

The editor

There is also a use for regex in our vscode!

For example, we need to look globally for console.error in the file and replace it. You can use the following operations. (Normal text lookups don’t do this.)

The prerequisite is to check the option to use the re (red arrow)

Or a single file lookup replacement is also possible.

The browser

In familiar browsers, you can use re to filter network requests.

Of course, if there are very large numbers of logs, the re can also help us to locate a log quickly.

Of course, as an editor, the source panel of the console also has regular lookup.

The command line

This section describes grep, the most commonly used text processing tool on the command line. (Other than sed and AWK). Grep The full name is “Global search Regular Expression and Print out the line”.

By definition, grep can be combined with re for text matching.

Suppose we have the following text:

$ cat tinytext
apple yummy
appear angle
and wisper: "ANGLE"
Copy the code

We want the line that matches the word Angle

$ grep "angle" tinytext
appear angle
Copy the code

Success!

If we want to ignore case sensitivity, we can add “-i” or “–ignore-case” options. By default, grep is case sensitive.

$ grep -i "angle" tinytext
appear angle
and wisper: "ANGLE"
Copy the code

Many times, we don’t want to match rows, but keywords, with “-o” or “–only — matching” options.

$ grep -io "angle" tinytext
angle
ANGLE
Copy the code

Grep supports basic regular expressions. You can use extended regular expressions with either the “-e” or “–extended-regexp” options.

For example, if we wanted to match the word before yummy, I thought about it a little bit and wrote the following rule: Match at least one a-Z character, followed by a space and one word of yummy.

$ grep -oE "[a-z]+(? =\syummy)" tinytext
grep: repetition-operator operand invalid
Copy the code

But the unfortunate discovery failed. Grep is not supported by default. =” operator. But don’t worry, you can upgrade our toolkit on the MAC by using the following command.

$ brew insall grep ... . All commands have been installed with the prefix"g".
Copy the code

So we get the ggrep tool, and we can add “-p” or “–perl-regexp” using a Perl-compatible regular engine? =” operator).

$ ggrep -oP "[a-z]+(? =\syummy)" tinytext
apple
Copy the code

Success!

Those of you who use command line processing tools a lot will recognize the usefulness of grep.

Matches the IP address in ifconfig

I often need to know the IP address of my laptop while developing projects. At this point, I would type in ifconfig and do a visual search, wasting a few seconds each time, to find the IP address.

The grep command takes effect

$ ifconfig | ggrep -oP "(? < = inet \ s) \ d {1, 3} \. (\ d {1, 3}) {3}"
127.0.0.1
192.168.31.254
Copy the code

The IP address has been obtained. Procedure But 127.0.0.1 is something we don’t really need. Invert-match invert-match invert-match invert-match invert-match invert-match invert-match invert-match

$ ifconfig | ggrep -oP "(? < = inet \ s) \ d {1, 3} \. (\ d {1, 3}) {3}" | ggrep -vP "127[\d\.]+"
172.20.10.13
Copy the code

ChengChengCheng! Simply ~ we can configure the above command to bash alias get-ip=’… ‘, I won’t go into details here. I mentioned it in my previous blog.

$a get - IP 192.168.31.254Copy the code

Matches the NODE application process PID of the corresponding port

For example, we need to find the Node application process PID on port 8001.

We run the lsof -i TCP :8001 command

$ lsof -i tcp:8001
COMMAND   PID        USER   FD   TYPE            DEVICE SIZE/OFF NODE NAME
node    87701 yanguangjie   23u  IPv6 0x42c450e30b40bcb      0t0  TCP *:vcom-tunnel (LISTEN)
Copy the code

Use grep to match the NODE application PID.

$ lsof -i tcp:8001 | ggrep -oP "(? :node[^\d]+)\d+(? =\s)" | egrep -o "\d+"
87701
Copy the code

What’s the use of matching PID out? Forcibly kill it, of course!

$ kill -9 $(lsof -i tcp:8001 | ggrep -oP "(? :node[^\d]+)\d+(? =\s)" | egrep -o "\d+")
Copy the code

Of course, if you feel that the above way is slightly troublesome, you can write a tool based on the above script to reduce the repetitive work.

Here the author wrote a simple tool k-port, if interested students can go to see and use.

$NPM install -g k-port $k-port 8001,8003 total ports: ['8001'.'8003' ]

get PID 2152 by port: 8001
kill PID 2152 ok.
get PID 2164 by port: 8003
kill PID 2164 ok.
Copy the code

Finds all specified versions of the NPM package

Quickly filter out all alpha versions of React.

$ npm view react versions | ggrep -oP "[^\s]+alpha[^\s]+"
Copy the code

summary

So far, this is only a superficial introduction to the limited number of ways I know how to use regex, of course, so welcome to add. Regularity is a practical tool, or art. Get more hands-on practice and use.

Thanks for reading ~

The resources

  • Learn regex the easy way
  • Regular_Expressions | MDN
  • awesome-regex
  • regexr
  • regexpr
  • Regular Expressions Quick Reference