A few small examples teach you how to implement regular expression highlight highlight _ regular expression

When programmers write code without having to deal with strings and "queries," There is a thing called regular expression in the intersection of the two, and this guy can improve programming efficiency with bad words ... You can go and learn a lesson first.

For a simple example of regular use:

Copy Code code as follows:

var m = Location.href.match (/(\w+:) \/{0,3} ([^\/]+) (?:( \/[^\?#]*))? (?:( \? [^#]+|. +))? (?:( #.*))?/);
var res = {
PROTOCOL:M[1],
HOST:M[2],
PATH:M[3],
SEARCH:M[4],
HASH:M[5]
};
Console.log (RES);

Hold for a few minutes = =| |, I also think this is not particularly good understanding (red and black, should be a little clearer), some friends may not know (?: content) is what meaning, there are similar (?! Content) and (? =content) grouped and forward-looking knowledge, suggested to ask the elder brother and Hu.

Example of a regular application demo

Here is a string of handy code, placed in the textarea:

Copy Code code as follows:

/**
* @author Barret Lee
* @date 2013-10-06
* @email barret.china@gmail.com
*/

Outer VAR
var a = "This id outer string";

Closure
Function B () {
Inner Var
var a = "This is inner string";
var g = A.replace (/this is inner string/g, function () {
return new Function ("/*CLOUSURE*/THIS.A") ();
});

/**
* @description closure-regexp Test
* @author Barret Lee
*/
Function C () {
return {
A:A,
G:g
}
}

return C;
}

var s = B () (); S.A, S.G

Regular match, handle the small demo of the above heap string:

Copy Code code as follows:

/**
* @author Barret Lee
* @date 2013-10-06
* @email barret.china@gmail.com
*/

Outer VAR
var a = "This id outer string";

Closure
Function B () {
Inner Var
var a = "This is inner string";
var g = A.replace (/this is inner string/g, function () {
return new Function ("/*CLOUSURE*/THIS.A") ();
});

/**
* @description closure-regexp Test
* @author Barret Lee
*/
Function C () {
return {
A:A,
G:g
}
}

return C;
}

var s = B () (); S.A, S.G

Follow the prompts, the next step more than a few points, you can see the effect can still drop. The main problem here is just a little bit of trouble, dealing with a color that has become elusive for a while.

P.S: Above this thing is only a small test, the code is quite not strong, take the study is practicing ~

Two. Where attention is required

Copy Code code as follows:

Step Config
var config = {
Regs: [
/^\s+|\s+$/g,
/(["'])(?:\ \.| [^\\\n]) *?\1/g,
/\/(?! \*|span). +\/(?!) span) [Gim]*/g,
/(\/\/.*|\/\*[\s\s]+?\*\/)/g,
/(\*\s*) (@\w+) (? =\s*)/g,
/\b...\b/g
],
//...
};

These are my separate to write, mainly in order to do the above demo, easy to single step display. But it is quite unreasonable to write them separately, and to put them in the textarea is a string of strings without any labels, in order to color, each processing a regular will insert some tags in the codes (I am using span), When we're dealing with the next regular, we have to take into account the label we added in the last step, which will greatly increase the difficulty of the development, and the best thing to do is to put the positive into a lump and separate it with |

Copy Code code as follows:

var reg = (/^\s+|\s+$/) | (/(["'])(?:\ \.| [^\\\n]) *?\1/) | (/\/(?! \*|span). +\/(?!) span) [gim]*/) | (/(\/\/.*|\/\*[\s\s]+?\*\/)/) | (/(\*\s*) (@\w+) (? =\s*)/) | (/\b (break|continue|do|for|in|function|if|else|return|switch|throw|try|catch|finally|var|while|with|case|new| typeof|instance|delete|void| Object| array| String| number| boolean| function| regexp| date| math|window|document|navigator|location|true|false|null|undefined| NaN) \b)

The advantage of this is that you can directly

Copy Code code as follows:

Codes.replace (Reg, function () {
var args = arguments;
//...
});

One-time processing, do not worry about the insertion of labels affect the final result, because the label is inserted at the same moment, there will be no interference.

Code highlighting plug-in highlight the basic principle is similar, but his fault-tolerant mechanism and code robustness of this piece is more perfect, I added a configuration file inside the code,

Copy Code code as follows:

var colors = {
String: "#FFA0A0",
Reg: "#16E916",
Note: "#888",
Tag: "Orange",
Keywords: "#B0B0FF"
};

According to their own preferences, can also be modified, similar to the extension, we write code when a little attention to leave a few more interfaces. (But these jobs are very hard to do ~)

Do not make plug-ins, also do not need to know the basic principles and then hands-on practice under the almost.

Three. Summary

Similar to a lot of front-end templates, arttemplate,baidutemplate and so on are the same expression of the incomparable application, it is worth to see the source code, a good study of people have considered those prone to error, the source code are not long, two hundred or three hundred lines. Understand a probably easier, but when the do-it-yourself will always find a lot of details of the problem is not handled well, I was on top of a few 倒弄 on the day = =

Regular expression, it is very convenient to use. Regular skills, you deserve to have ~