5 minutes to teach you how to learn JavaScript regular expressions

Source: Internet
Author: User

The importance of regular expression in the actual development process and the technical interview process is self-evident, this article just teaches you how to learn the regular expression in a few minutes, the principle and the operating mechanism is not introduced.

First: What is a regular

A regular expression is a pattern used to describe a certain amount of text that matches the same canonical style of text. In JavaScript, a RegExp object is used to represent a regular expression (that is, Regular eexpression), which is a powerful tool for performing pattern matching on strings. We can see the instructions given by the show.

 

Second: Creating a regular expression

Create regular expressions in JavaScript in 2 ways, both implicitly and explicitly . (GI will give an explanation)

Implicitly created:

1 var regexp=/Regular Expression/gi;  

Explicitly created:

1 var regexp=New regExp ("Regular expression", "GI");

Two ways to create it we already know the basic building method of regular expressions. i.e./regular expression/gi;

Before we introduce the rules and syntax of regular expressions, let's take a look at the two methods of the RegExp class in JavaScript, so that we can explain the code in the following article, and see the documentation for more details.

①match: Found a match for one or more regular expressions.

The explanation given by the "the Match ()" method can retrieve the specified value within a string, or find a match for one or more regular expressions. The method is similar to IndexOf () and lastIndexOf (), but it returns the specified value instead of the position of the string.

②replace:

The replace () method is used to replace other characters with some characters in a string, or to replace a substring that matches a regular expression.

In view of the RegExp method more, here we temporarily listed two, convenient after the use of the article.

Third: Grammar explanation

I will help you understand the specific syntax of the regular, ask the question, and then solve the code according to the gradual way.

 ① matches the existence of an ABC string in the string and returns

Regular Expression/abc/gi

Code:

1 var content=Id.innertext;         Gets the string content that needs to be matched 2var myreg=/abc/gi;                Regular expression 3 res=content.match (myreg);             4  for (var i=0;i<res.length;i++) {5     window.alert (i+ "" +res[0]);    Res Details Reference Document      6 }

As can be known, we want to match a specific string, just write a matching string between two characters.

  ② matches strings in 1221, 112233, 010-11223344 form

When we need to match the above string, we use the first method is not applicable. Before you tell the new method, let's start with some superficial knowledge of how to match numeric representations and reverse references.

Match numbers we use \d to indicate that what is included in a JavaScript regular expression () is a subexpression , such as: \ (\d) (\d) \gi where the first parenthesis represents the first subexpression , and the second bracket indicates the second Sub-expression . Now give a 1221 regular expression, for

/(\d) (\d) \2\1/gi;   1221  2334  5667 numbers in a similar format

The above \2\1 people do not understand what meaning, this involves the concept of reverse reference, \2 that matches the second sub-expression of the same content (that is, the second and third numbers are the same), \1 that the match is the same as the first sub-expression ( where The first number is the same as the fourth number ).

When we understand the concept of reverse referencing, it is easy to match the expressions in the next 2 formats.

112233 format:

/(\d) \1 (\d) \2 (\d) \3/gi;      112233  334422 numbers in a similar format

010-11223344 format:

/(\d) {3}-(\d) \2 (\d) \3 (\d) \4 (\d) \5/gi;        

The regular expression, (\d) {3}, is represented as 3 digits.

Example:

How much will we get if we match 1111111 with 1{3}? What will be the result of matching 1111111 with 1{3,4}? Write a program that confirms your conjecture. ({3,4} indicates a match of at least 3, up to 4)

Seeing here, I hope that the reader can use the method I have described above to prove my conjecture, because it involves two rules of JavaScript regular matching.

Answer:

1{3} match 1111111 gets 111 111. This is because when a match is matched to a string, the match is automatically started from the next character.

      1{3,4} match 1111111 gets 1111 111. JavaScript matches the time to follow a greedy principle, that is, as many matches as possible, when more than the match is not satisfied, only to return to the second, where it can match to 1111 will first match 4 1, matching is not matched 111.

  ③+, *, explanation

+: Indicates 1 matches to any number of times

Such as:

/a+/gi;             // match a to a maximum/(\d) +/gi;           //   match the number one to a maximum

*: Indicates 0 matches to any number of times

Such as:

/a*/gi;             /(\d) */gi       ; /a1*/gi;             // if the match a111   get a111

?: Indicates a match 0 times to 1 times

/a1?/gi;              // if the match a111  get A1

  ④{}, [], ^, $ explanation

{}: As mentioned above, indicates the specific amount

[]: Indicates range

Such as:

/[a-z]/gi;                       // matches  any 1 characters of A to Z, equivalent to/[a-z]{1}/gi/[a-z]{2}/gi;                    // match  any 2 characters from A to Z

^: "matches the starting position of the target string", if the word characters in [] brackets , meaning " negative "

Such as:

/[^a-z]/gi;       // any one character that is not a to Z /[^0-9]/gi;             // not 0 to 9 of any one character /^[a-za-z0-9]{2}/gi;       // 2 characters starting with a number or letter

$: Indicates "match end of target string"

  ⑤ Other character representations

\d: The opposite of \d, matching non-numeric, that is equivalent to [^0-9]

\w: matches any English character

The opposite of \w:\w, matching non-English characters, which is equivalent to [^a-za-z0-9_]

\s: Matches any whitespace character (spaces, tabs, etc.)

\s: The opposite of \s, which matches any non-whitespace character

. : matches all characters except \ n, if you want to match, you need to use \. (That is, match. For/\./gi)

  ⑥ characters that need to be escaped:

As in the ⑤. Shown when a match is required. , we need to add the escape character. To summarize, the matching characters in JavaScript need to have the escape character. 

    .  *  +  ( )  $  /  \  ? [  ]  ^  {  }

⑦ Selection Match |

In a regular match, sometimes you need to match more than one regular expression, you need to use the selection match |, can be seen as the meaning of programming "or"

Such as:

/[a-z]{3}| [A-z] {2}/g;           // matches 3 characters from A to Z, or 2 characters from A to Z can be

IV: Last Additions

Explain what GI means in regular expressions. At the end of the article is to help people directly understand the relevant content of the regular, faster way to use it.

GI is an instance attribute in the RegExp class: There are actually Gims four, of which:

G: global meaning, which means match globally

I: The meaning of ignoreCase , which means ignoring the case

M: multiple means that multiple lines of matching, that is, consider line wrapping, that is, match the string after the newline as a new string match

S: source means return the expression text string specified when creating an instance of RegExp object

Fill in the corresponding attributes as needed when matching regular matches.

Finally, I hope this article can really help those who study regular expression of people, small white one, superficial remarks, I hope you do not spray.

To everyone a JS authentication form URL, there are some regular expression validation, you can learn to stabilize the knowledge: http://www.jb51.net/article/4976.htm

5 minutes to teach you how to learn JavaScript regular expressions

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.