Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to achieve regular expression JavaScript code highlighting, the article is very detailed, has a certain reference value, interested friends must read it!

Today, I want to change the highlight color matching of JS, and I have been holding back this regular expression all afternoon.

The old thing below is a regular expression. Don't freak out when you see it.

/ (\ /\ /. * |\ /\ * [\ S\ s] +?\ *\ /) | (["']) (?:\\. | [^\\ n]) *?\ 3) |\ b (break | continue | do | for | in | function | if | return | switch | this | try | catch | var | while | with | case | typeof | instance | delete | void)\ b | Object | Array | String | Number | Boolean | Function RegExp | Date | Math | window | document | navigator\ b |\ b (location | location)\ b |\ b (location | true)\ b |\ b (location | location)\ b (location | location)\ b (true | true)\ b | (?) [^\ W\ d] |\ $\ w] * | 0 [true] [0 / W] + | \ d + (?:\.\ d +)? (?: [eE]\ d +) | (?: [^\)\]\}] | ^) (\ / (!\ *) (?:\. | [^\\ /\ n]) +?\ / [gim] *) | [\ S\ s] / g

Now, we can analyze it slowly. If you take a closer look at this regular expression, you will find that they are connected by many regular expressions with |. Now, let's use it to split it up and analyze it one by one.

(\ /\ / .* |\ / * [\ S\ s] +?\ *\ /)

This is the second, and this regular expression is used to match strings. Strings can be in single and double quotes, so we match either of them. You need to enclose it in parentheses to indicate that it is a get match (the "get" of "get match" is a noun), because you also need to match this character at the end. At the end of the matching string, you can use the backward reference\ 3 to match the character at the beginning of the string, that is, the type of quotation mark at the beginning. If you count from the beginning of the whole regular expression, you will find that the parenthesis outside ["] is the third get match in the whole regular expression. This is the beginning and end of the string, and in the middle, because the string can contain escapes, we skip the character after the backslash as soon as we encounter it, because the backslash contains an escape. But this is just a matching escape, so we're going to use or operation | concatenate a matching non-escaped expression, and that's [^\]. But this matches any character that is not a backslash, it can contain newlines, and strings in JS are not allowed to be written as newlines. So we need to add a\ nto make it mismatch newline. Because we use or to connect, and the priority of or is very low, we need to put parentheses next to it to correct the priority. If you use normal parentheses, it will take up a get match, so we will use (?:) to complete a non-get match.

\ B (break | continue | do | for | in | function | if | else | return | this | throw | try | catch | finally | var | while | with | case | new | typeof | instance | delete | void)\ b |\ b (Object | Array | String | Number | Boolean | Function | RegExp | Date | Math | document | navigator | navigator)\ b |\ b (navigator | location)\ b |\ b (location | location)\ b (location | location |)\ b

These are the 3rd, 4th, 5th and 6th. These are just matching keywords and are grouped because of the different colors needed. There's nothing to say. Skip it.

(?: [^\ W\ d] |\ $) [\ $\ w] *

This is the seventh, and its purpose is to match the normal variable name. If the characters of the variable name are not consumed, the one who matches the number later may output the number match in the variable name. So this step is necessary. You will find that there is no match in this step, because the color of the variable name is the default color, we do not get it. According to JS's naming convention, variable names cannot start with a number, so we use [^\ W\ d] |\ $to match the beginning of a variable. After that, you can match numbers, letters, underscores, dollar signs, any time. So the variable name is consumed.

(0 [xX] [0-9a-fA-F] + |\ d + (?:\.\ d +)? (?: [eE]\ d +)?)

This is the eighth one that matches the number. Since there are two ways to express numbers, we have to write them separately. | is written in hexadecimal numbers on the left. On the right is the common numeral writing, which can include decimals and scientific counting. Since both decimal and scientific counting are optional, we bracket it, followed by a question mark as an optional match.

The copy code is as follows:

(?: [^\)\]\}] | ^) (\ / (?!\ *) (?:\. | [^\\ /\ n]) +? / [gim] *)

This is the ninth one that matches the regular expression. There is a non-get match in front of it, and the match is not the end of parentheses. Because if there are parentheses, then the diagonal bar may represent a division sign rather than a regular expression. Then there is regular expression matching, which is similar to string matching, except that there is an extra [gim] * at the end. These are the three matching patterns of regular expressions, and they also belong to the category of regular expressions, so we need to match and get it.

[\ s\ s]

The last one is to match all the characters that are not matched above, and we have to match every character. Because they all need to do a HTML escape.

In this way, the analysis of the long regularity is finished. The following is an example of an implementation.

Body {font:14px/18px Consolas;} / / reads the current code var code=document.getElementById ("code") [xss_clean]; / / corrects the browser differences in line breaks, removing the newline and space code=code.replace (/\ r\ n | [\ r\ n] / g, "\ n"). Replace (/ ^\ s + |\ swrapped CPG, "") / / start primary matching code=code.replace (/ (\ /\ / .* |\ / * [.\ s] +?\ *\ /) | ([["']) (?:\\. | [^\\ n]) *?\ 3) |\ b (break | continue | do | for | function | if | else | return | this | try | catch | finally | while | with | case | typeof | instance | void)\ b |\ b (Object | Array String | Number | Boolean | Function | RegExp | Date | Math | window | document | document | navigator)\ b |\ b (navigator | navigator)\ b |\ b (navigator | location)\ b |\ b (navigator | location)\ b | (?) [^\ W\ d] |\ $[\ w] * | (0) [/ w] [0-9a-fA-F] + |\ d + (?:\.\ d +)? (?: [eE]\ d +) | (?: [^\)\]\}] | ^) (\ / (?!\ *) (?:\\. | [^\\ /\ n]) +?\ / [gim] *) | [.\ s] / g Function () {var a _ r _ I _ r _ I _ r _ s A matching arguments; / / the location to which the loop is matched (for)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.