preface

Someone in the technical group asked: ask a re can input positive and negative 9 integer 2 decimal, decimal can not enter. So, the eight immortals across the sea, each show his powers!

The big guy in the group replied

Soon, one of the big guys sent in a regular he had written with two decimal places reserved

// This regex uses grouping methods, first matching a minus sign, then a number, then a decimal point, and finally 2 decimal places

/^(\-)*(\d+)\.(\d{2}) +. * $/Copy the code

It was obvious that the big guy’s regular could not meet the demand of asking the students, so another big guy gave his regular

// This re is used first. The non-greedy pattern of the sign matches the minus sign, then the nine digits, then the? Whether a sign match has a decimal point/ ^ -? [09 -] {9} (\ [09 -] {2})? $/Copy the code

It was soon pointed out that this could only be fixed 9 digits, and that the numbers could not be fixed

// This is a bit useful, can match plus or minus 9 integers 2 decimals, decimal can not be entered/ ^ -? [09 -] {1.9} (\ [09 -] {1.2})? $/Copy the code

If the first digit of a number is 0, the first digit of a number cannot be 0

If the first digit can’t be 0, then it’s good to add a judgment, so the re is changed to

// The first digit can be 1 to 9, but cannot be 0/ ^ -? [19 -] {1} [09 -] {0.8} (\ [09 -] {1.2})? $/Copy the code

The speed of light (almost second hair), bar essence (😀) ask: if is the situation of a few zero, or is the integer 0

Big guy has no choice but to give

// Add the concept of and or not to the grouping and non-greedy matching, matching integers, or two decimal places of tenths, or two decimal places of N integers/ ^ -? (((19 -] [09 -] *) | (((0]\.\d{1.2} | [19 -] [09 -]*\.\d{1.2$/})))Copy the code

But the big guy estimated that he did not see the problem clearly, there is no limit to the number of integers, so the big guy issued a regular, gradually complicated

// Match two decimal places that cannot be 0, or two decimal places that cannot be 0, or 0/ ^ (-? [19 -] {1} [09 -] {0.8} (\ [09 -] {1.2})? | (0(\.[09 -] {1.2})) | (0) $/Copy the code

There is a big guy feeling that the above re are a bit long, give a short one

// This big guy likes to use set, match the set of plus and minus signs, match the set of arbitrary numbers, match the set of decimal points /[+-]? [d \] {1, 9} (. \ [d \] {1, 2})? /Copy the code

Combined with the above big guy’s regular, someone gives

// Sets match plus and minus signs, match non-zero starting 2-digit decimals, or zero starting decimals/ ^ (+ -)? (((19 -] [09 -] {0.8}) |0) (\ [09 -] {1.2})? $/Copy the code

The discussion ended here, I wait sprout new see is trembling, completely dare not speak.

Use the numeric type to enter the test. The first 0 will be removed automatically

How does the front end write the re

In a front-end project, there are many places where you need a re, so how do you write a re?

A lot of people have said that you don’t have to remember re, and yes, most of you don’t. However, it is necessary to remember how to write the re. Here I summarize 7 rules

  • 1. Any complex re can be simplified by grouping with () signs
  • 2, | this symbol is a good thing, or or or, regular came out
  • 3, ^ start, $end
  • 4. If you want the regex to match all of the regex searches, add a g (/g) at the bottom of the /
  • 5, if case insensitive add I, that is/I
  • 6, Use search engines wisely, or give a search term: regular expression lookup table
  • 7, it is their own writing can not come out, search for written, or to ask the big guy in the technology group, if there is no big guy reply, send a red envelope

Regular expression optimization

After we can write our own re, we need to consider how to write an efficient re, for example:

Let's say we have a string
const string = "TypeError: Cannot read property 'fundAbbrName' of undefined at Proxy.render (eval at";

// We want to intercept TypeError: to (eval, using re
const reg = / (? :TypeError\:)(.*?) (? =\(eval)/

Copy the code

Using RegexBuddy detection takes 283 steps

Modify:

const reg = /TypeError\:(.*?) \(e/
Copy the code

Testing with RegexBuddy takes 212 steps

To optimize, change one word, change the * to the +

const reg = /TypeError\:(.+?) \(e/
Copy the code

The number of steps has been reduced to 209 now

Add a qualifier \s

const reg = /TypeError\:\s(.+?) \(e/
Copy the code

We lost two more steps, and now we only need 207

Let me change the qualifier

const reg = /\w+\:\s(.+?) \(e/
Copy the code

We’re within 200 steps. 199 steps

The ultimate optimization

const reg = /\w+\:(.+)\(/
Copy the code

Only 35 step

From the above examples, we can learn a few things about regular optimization:

  • When capturing groups, use non-capturing parentheses (? ), but sometimes use unnecessary (? 🙂 will cause a waste of performance instead
  • You can improve the efficiency of the regex by using some matching rules, such as \w+ instead of TypeError
  • If the match is confirmed at least once, replace the asterisk with a + sign
  • If you confirm the number of matches, replace the + sign with {n,m}
  • In most cases, more constraints will improve the efficiency of the regex
  • Try to use non-greedy models, okay? However, in some cases, it is more efficient not to use the non-greedy model

The last

Oneself level is limited, the place of mistake hopes everybody big guy points out again!

I also wrote about regex. Remember an interview question, regular expressions (? What does =a) mean? You guys can check it out when you’re free.