How to highlight JavaScript code in Regular Expressions

Today, I want to change the highlighted color of JS. This regular expression is generated in the afternoon.
The old elders are a regular expression. Don't be scared when you see it.

Copy codeThe Code is as follows:
/(\/. * | \/\ * [\ S \ s] +? \ * \/) | (["']) (? : \. | [^ \ N]) *? \ 3) | \ B (break | continue | do | for | in | function | if | else | return | switch | 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 | window | document | navigator | location) \ B | \ B (true | false) \ B | \ B (null | undefined | NaN) \ B | (? : [^ \ W \ d] | \ $) [\ $ \ w] * | (0 [xX] [0-9a-fA-F] + | \ d + (? : \. \ D + )? (? : [EE] \ d + )?) | (? : [^ \) \] \}] | ^ )(\/(?! \*)(? : \. | [^ \/\ N]) +? \/[Gim] *) | [\ S \ s]/g

Now, we can analyze it slowly. If you look at this regular expression carefully, you will find that many regular expressions are connected with |. Now, we use | to separate and analyze them one by one.

Copy codeThe Code is as follows:
(\/. * | \/\ * [\ S \ s] +? \*\/)

This is the second one. This regular expression is used to match strings. Strings can be in single quotes and double quotes, So we match either of them. Enclose it in parentheses to indicate that it is a get match ("Get match" is a noun), because it needs to be matched at the end. You can use backward reference \ 3 to match the character starting with the string at the end of the match, that is, the type of quotation marks at the start. If you start from the beginning of the entire regular expression, you will find that the brackets outside ["'] are the third matching in the whole regular expression. This is the header and tail of a string. The middle part can contain escape characters. Therefore, once a backslash is encountered, it is skipped, because the backslash contains an escape character. However, this is only a matching escape, so we need to use the or operation | to connect a non-escape expression, that is, [^ \]. However, this is to match any character without a backslash. It can contain line breaks, while strings in JS cannot be written as line breaks. Therefore, we need to add \ n so that it does not match the line feed. Because we use or to connect, or has a very low priority, we need to add parentheses next to it to correct the priority. If we use normal brackets, we will use one to obtain matching information. Therefore, we need to use (? :) To complete a non-get match.

Copy codeThe Code is as follows:
\ B (break | continue | do | for | in | function | if | else | return | switch | 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 | window | document | navigator | location) \ B | \ B (true | false) \ B | \ B (null | undefined | NaN) \ B

These are 3rd, 4, 5, and 6, which only match some keywords and are grouped due to different colors. That's nothing to say. Skip.

Copy codeThe Code is as follows:
(? : [^ \ W \ d] | \ $) [\ $ \ w] *

This is the seventh step. It matches common variable names. If the characters in the variable name are not consumed, the matching numbers in the variable name may be output. This step is required. You will find that this step does not get any matching, because the color of the variable name is the default color, we do not get it. According to the naming rules of JS, the variable name cannot start with a number, so we use [^ \ W \ d] | \ $ to match the beginning of a variable. It can be followed by digits, letters, underscores, and dollar signs, at any time. In this way, the variable name is consumed.

Copy codeThe Code is as follows:
(0 [xX] [0-9a-fA-F] + | \ d + (? : \. \ D + )? (? : [EE] \ d + )?)

This is the eighth matching number. Since there are two ways to express numbers, we need to separate them. | The left side is a hexadecimal number. The right side is a normal number writing method, which can contain decimals and scientific notation. Since decimals and scientific notation are optional, we enclose them in parentheses and add question marks as optional matching.

Copy codeThe Code is as follows:
(? : [^ \) \] \}] | ^ )(\/(?! \*)(? : \. | [^ \/\ N]) +? \/[Gim] *)

This is the ninth matching regular expression. There is a non-get match before, and the end of the match is not parentheses. Because if there are Parentheses, the Diagonal Bar may represent a division sign rather than a regular expression. The following is the matching of the regular expression, which is similar to the matching of the string, except that there is an additional [gim] *. This is the matching mode of a regular expression and belongs to the category of a regular expression. Therefore, we need to match and obtain it.

Copy codeThe Code is as follows:
[\ S \ s]

The last one is to match all the characters not matched above. We must match each character. Because they all require an HTML Escape.
In this way, the long regular expression is analyzed. The following is an example of implementation.

Copy codeThe Code is as follows:
<Style> body {font: 14px/18px Consolas ;}</style>
<Script id = "code">
// Read the current Code
Var code = document. getElementById ("code"). innerHTML;
// Modify the browser differences of line breaks and remove the line breaks and spaces at the beginning and end.
Code = code. replace (/\ r \ n | [\ r \ n]/g, "\ n "). replace (/^ \ s + | \ s + $/g ,"");
// Start primary match
Code = code. replace (/(\/. * | \/\ * [. \ s] +? \ * \/) | (["']) (? : \. | [^ \ N]) *? \ 3) | \ B (break | continue | do | for | in | function | if | else | return | switch | 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 | window | document | navigator | location) \ B | \ B (true | false) \ B | \ B (null | undefined | NaN) \ B | (? : [^ \ W \ d] | \ $) [\ $ \ w] * | (0 [xX] [0-9a-fA-F] + | \ d + (? : \. \ D + )? (? : [EE] \ d + )?) | (? : [^ \) \] \}] | ^ )(\/(?! \*)(? : \. | [^ \/\ N]) +? \/[Gim] *) | [. \ s]/g, function (){
Var a, l, I, s;
A = arguments;
// Position matched by the loop
For (I = 1; I <= 9; I ++) if (s = a [I]) {
S = htmlEncode (s );
// Each matched position is colored.
Switch (I ){
Case 1: // comment
Return s. fontcolor ("#998877"). italics ();
Case 2: case 3: // string
Return s. fontcolor ("# AA5544 ");
Case 4: // keywords
Return s. fontcolor ("#333388 ");
Case 5: // built-in object
Return s. fontcolor ("# 5555AA ");
Case 6: // Boolean Value
Return s. fontcolor ("# DD6600 ");
Case 7: // null
Return s. fontcolor ("# BB4433 ");
Case 8: // number
Return s. fontcolor ("# CC3322 ");
Case 9: // Regular Expression
// This is special, and the matching and obtaining are somewhat different.
// When matching, there is a non-get match before, so we need to keep the non-get match part
Return htmlEncode (a [0]). replace (s, s. fontcolor ("#33AA33 "));
};
};
// Escape the output directly if no matching is obtained
Return htmlEncode (a [0]);
});

// Output result
Document. write (code );

// HTML escape Functions
Function htmlEncode (e ){
Var I, s;
For (I in s = {
"&":/&/G, "":/"/g," '":/'/g,
"<":/</G, ">":/>/g, "<br/>": // \ n/g,
"": // G, "": // \ t/g
}) E = e. replace (s [I], I );
Return e;
};
</Script>

Because I am catching up with this article today, I have no time to optimize this code. There should be many small vulnerabilities, but the overall idea is like this. In this way, code highlighting can be directly matched by regular expressions in JS or other languages.