Regular Expression Summary: advanced application of regular expressions in js

Metacharacters used to specify the number of repetitions can only act on characters or metacharacters next to them. In actual application, we need the sub-mode.

Var reUrl =/^ (http): \/nowamagic \. (net) $/gi; in the last part of the previous article, the submode is involved. Metacharacters used to specify the number of repetitions can only act on characters or metacharacters next to it, in practice, the characters that need to be matched repeatedly are not necessarily only one character or metacharacter, just as the "http" and "net" to be matched in the reUrl are multiple characters, you can use (and) to enclose multiple characters as an independent element.

The regular expression var reMail =/\ w + @ \ w + \. \ w +/I; is not perfect. A valid user name can be letters, numbers, underscores, periods, and domain names cannot be in the form of mail.com, it may also be in the form of mail.mymail.com. Therefore, a more perfect regular expression that matches valid email addresses is as follows:

var reEmail = /(\w+\.)*\w+@(\w+\.)+\w+/i;

The sub-mode allows multiple nesting, which is theoretically unlimited. However, it should be applicable in actual applications.

Backtracking reference

In web development, we often need to match HTML tags. Most HTML tags have a start tag and end tag, for example ,, if we only need to match H1 and DIV, we can easily construct this regular expression:

var reH1 = /.*?<\/h1>/gi;var reDiv = /.*?<\/div>/gi;

However, we do not want to match one or more HTML tags. In fact, we are completely unknown about the specific HTML format. For example, we cannot predict the XML tag, therefore, grouping matching is useless here. Fortunately, in a regular expression, backtracing references allow the regular expression mode to reference the previous matching results. For specific applications, see the following regular expressions matching HTML tags.

var html = "nowamagic";var reTag = /<(\w+\d?)>.*?<\/\1>/gi;document.write(html.match(reTag));//nowamagic

The \ 1 in the last part of the reTag is a backtracing reference. The first sub-mode (\ w + \ d?) is referenced ?), Of course, if there is still a second sub-mode, we can also use \ 2 to reference and ,. Note: The backtracking reference can only reference the previously matched results. The following method is incorrect.

var reTag = /<\1>.*?<\/(\w+\d?)>/gi;

Backtracking references are widely used in replacement operations. For example, we want to automatically add the corresponding hyperlink to all the URLs in a piece of text, that is, replacing the string of the http://nowamagic.net with the form of nowamagic. We can handle it like this:

var url = "http://nowamagic.net";var reUrl = /(http[s]*:\/{2}(\w+\.)+\w+)/gi;//http://nowamagic.netdocument.write(url.replace(reUrl,'$1'));

$1 references the previous sub-mode (http [s] *: \/{2} (\ w + \.) + \ w + ). Note: "$" instead of "\" is used in the replacement operation in javascript "\".

Search before and after

If we need to obtain the text in the h1 tag (the text contained in the h1 tag, excluding h1 itself), how should we write this regular expression? For example, "front-end" does not seem to mention matching a string in all the methods introduced, but only returns strings before or after some characters, this syntax exists in regular expressions.

var fe = "front-end";var reInnerText = /(?<=).*?(?=<\/h1>))/i;

In reInnerText and /.*? <\/H1> The/I matching mode is the same, and the only difference is the returned result ,/.*? <\/H1>/I returns the entire fe string, while reInnerText returns only "front-end". Comparing the two regular expressions, We can find two different expressions :(? <= ),(? = <\/H1> ). (? <=) Defines a Backward Search mode, that is, the matching results only include the "" part ;(? = <\/H1>) defines a forward lookup mode. Only the results before "" are returned for matching results; therefore, reInnerText only returns content between "" and! The syntax of the forward and backward searches is very simple "? = "Is the expression starting "? <=.

Sorry, javascript does not support regular expression backward lookup. In fact, there is a syntax error in writing reInnerText in javascript. If conditions are met, you can use other languages that support pre-and post-search verification, such as PHP.

$title = 'front-end';if(preg_match('/(?<=).*?(?=<\/h1>)/i',$title,$rst)){   echo $rst[0];//front-end}

Conditional search

Regular Expressions also have a feature that is powerful but not frequently used-embedded condition search. The regular expressions that match HTML tags described in the reference section do not take such elements into account, and the following reImg is a regular expression that uses an embedded condition to match img elements.

var reImg = /<(img)?\s+[^>]+(?(1)\/)>/i;

I'm testing it happily ~ · A miracle has occurred! Javascript still does not support regular expression search ~

Additional reading

The topic list of this article is as follows:

1. What is a regular expression?
2. Getting started with regular expressions: match a Fixed Single Character
3. Getting started with regular expressions: matching any single character
4. Getting started with regular expressions: Use character groups
5. Getting started with regular expressions: Use character ranges in character groups
6. Getting started with regular expressions: Use of assense character groups
7. Getting started with regular expressions: matching null characters
8. Getting started with regular expressions: Match one or more characters
9. Regular Expression: matches zero or multiple characters.
10. Regular Expression entry: matches zero or one string.
11. Getting started with regular expressions: Match fixed numbers of Characters
12. Getting started with regular expressions: match the number of characters in a range
13. Getting started with regular expressions: greedy matching
14. Getting started with regular expressions: inert matching
15. Entry to Regular Expressions: two matching Modes
16. Getting started with regular expressions: match word boundaries
17. Getting started with regular expressions: boundary definition and relativity
18. Getting started with regular expressions: Match non-word boundaries
19. Getting started with regular expressions: match the beginning and end of a text
20. Entry to regular expression: submode
21. Regular Expression entry: "or" Match
22. Getting started with regular expressions: replacing with referenced text
23. Getting started with regular expressions: unmatched
24. Regular Expression Summary: Regular Expressions in JavaScript
25. Regular Expression Summary: advanced application of regular expressions in js

This article is available at http://www.nowamagic.net/librarys/veda/detail/1284.