Little script to learn Regular Expressions

For front-end users, if you say all the front-end users, their features are that they use a variety of technologies and have a large cross-domain nature: they have designed a user experience analysis system, developed with codes ...... It looks mottled and complex. As a front-end engineer, it seems that many technologies are not proficient, but at least they need to be competent in order to "attack. The so-called "code development" at the front end can be considered as a very broad concept, CSS, JS, As, SQL, and other development languages ...... As a front-end developer, you must master many skills. The RegEx expression (Regexp) is such an outstanding skill. The reason why it is described as "prominent" is that the regular expression is not only very useful, in addition, the idea and control process are significantly different from the development languages we are familiar. As for the principles in computer science, we can refer to the "theory of automatic machines". Of course, we will not go deep into the discussion of academic issues here. In short, people have repeatedly stressed that regular expressions are of great value and should be well learned. I personally agree with this, and feel that, first of all, you do not have to be familiar with the concept part. You can take an example experiment directly on the machine. Through examples, you can easily observe the meaning of the regular metacharacters, and then look at the concepts and definitions to understand more. In this part, we need to emphasize the meaning represented by the metacharacters of the regular expressions.
1.1 drops to be proficient.

For convenience of memory, there are still some fixed combinations, such [/S/S] * Situations, such as [/D/d] and [/W], may not be fully remembered. However, in the final analysis, they are still reciprocal relations, which must be kept in mind.

After remembering a single metacharacter, consider the meaning of the combination of multiple metacharacters. A single metacharacters are easy to remember. The meaning of a combination of multiple metacharacters is ever-changing, and many of them are details, such as candidates for simple classes [] and complex models (|) sometimes there is a difference. Reference: http://www.iteye.com/topic/239904#661142

In addition, it should be noted that a few simple examples should not be met during the experiment. As the example changes, the written regular expressions are often quite different. So we should look for different examples, find out the rules based on the character format, and write regular expressions. Of course, our goal is to write the correct Regular Expression and match the match. Then optimize. Even for the same match, their regular expressions are often very different, that is, they vary from person to person, and the differences between them are quite different. Therefore, this optimization effort is available.

I met these two functions. I found a small script on the Internet to optimize the front-end CSS, format CSS, and handle indentation. However, I found that the principle is inseparable from the use of regular expressions, and it is easier to spread knowledge when the task is simple. So I took the opportunity to learn something and try to write comments-and ask everyone to find out something incorrect.

/** <Br/> * compression of CSS styles <br/> * @ Param {string} Code <br/> * @ return {string} <br/> */<br /> compress: function (CODE) {<br/> code = code. replace (// \ n/ig, ''); // remove the line feed <br/> code = code. replace (/(\ s) {2,}/ig, '$ 1'); // change multiple spaces (more than two) to one space <br/> code = code. replace (// \ t/ig, ''); // remove the tab <br/> code = code. replace (/\ n \}/ig, '\}'); // line feed +} change without line feed <br/> code = code. replace (/\ n \ {\ s */ig, '\ {'); // {+ line feed without line feed <br/> code = code. replace (/(\ s) \ s * \}/ig, '$1 \}'); // remove the space between the content and} <br/> code = code. replace (/(\ s) \ s * \ {/ig, '$1 \ {'); // remove the space between the content and {<br/> code = code. replace (/\ {\ s * (\ s)/ig, '\ {$1'); // remove the space between {and content <br/> return code; <br/>}< br/>

/** <Br/> * Format CSS styles <br/> * @ Param {string} Code <br/> * @ return {string} <br/> */<br />, format: function (CODE) {<br/> code = code. replace (/(\ s) {2,}/ig, '$ 1'); // multiple spaces (more than two) change to a space </P> <p> code = code. replace (/(\ s) \ s * \ {/ig, '$1 {'); // wrap the lines between {and {previous content <br/> code = code. replace (/\*\/(. [^ \} \ {] *)}/ig, '\ * \/\ N $1}'); // if there is content following the comment, wrap the following content <br/> code = code. replace (// \/\ */ig, '\ n \/\ *'); // start with a line feed. <br/> code = code. replace (/; \ s * (\ s)/ig, '; \ n \ t $ 1'); // pair; and; line feed between the following content <br/> code = code. replace (/\} \ s * (\ s)/ig, '\} \ N $1 '); // line feed between the content after} And} <br/> code = code. replace (/\ n \ s * \}/ig, '\ n \}'); // If there are multiple spaces in front, do not use these spaces <br/> code = code. replace (/\ {\ s * (\ s)/ig, '\ {\ n \ t $1 '); // line feed between {and {content. <br/> code = code. replace (/(\ s) \ s * \/ig, '$1 \*\/'); // end annotation line feed <br/> code = code. replace (/\ * \/\ s * ([^ \} \ {] \ s)/ig, '\ * \/\ n \ t $1 '); // if there is content before the comment, wrap the content below <br/> code = code. replace (/(\ s) \}/ig, '$1 \ n \}'); // line feed between the content above} and the content above} </P> <p> code = code. replace (/(\ n) {2,}/ig, '\ n'); // multiple line breaks are changed to a single line break <br/> code = code. replace (/:/ig, ':'); // Colon: there is a space between them <br/> code = code. replace (// ig, ''); // two spaces are converted into one space <br/> return code; <br/>}

 

We recommend the regular expression tips and tutorials circulating on the Internet:
In fact, regular expressions are also Snoop, And you can sharpen your head to carry your money. (It refers to the starting symbol ^ and the ending symbol $)
Special symbols cannot be recognized. You can use inverted bars to lead the road. (special symbols such)
Backward bars are represented by W, numbers, and letters (/W, numbers, and letters;/d, and numbers)
Backward bars are followed by small D, which is only represented by numbers;
The reverse bar is followed by a, and an alarm symbol is opened;
Backward bars are followed by Small B, and the word is split or unsigned;
The inverted bar is followed by a small t, and the tabulation symbol is clear;
The reverse bar is followed by a small R. The carriage return symbol is displayed;
The inverted bars are followed by small S. The space symbol is very important;
The lower-case password and upper-case password are too many;
The back of the upbar is followed by a large number of characters and numbers;
The reverse bars are followed by the big S, and the blank space is on the edge;
Backward bars are followed by Big D, and numbers are now on the edge;
The inverted box is followed by a large B, excluding the start and end;

A single character must be repeated. Three symbols are used for help. (* + ?)
0 stars plus 1 to infinity, the question mark is only 0 and 1; (* Table 0-n; + Table 1-N ;? Table 0-1 repetition)
You can learn more in curly brackets and have strong repeated operations. ({n} {n ,}{ n, m })
To repeat the string, enclose the string. (ABC) {3} indicates that the string "ABC" is repeated three times)
Special set customization, brackets to help you;
Escape characters do not work, so they are queued one by one;
There are so many issues to be unable to cope with. Please help me on the horizontal bar. ([1-5])
Parentheses ([^ A] indicates any character except ")
1. The vertical function is not small, and the two sides are replaced by regular expressions. ("/" is the same key on the keyboard)
1. portrait can be used many times, and complicated definition is very convenient;
Garden brackets for multiple purposes;
References a specified group in reverse order, and the number delimiter corresponds to it. ("/B (/W +) the number "1" in/B/S +/1/B references the previous "(/W + )")
Custom group names are supported. question marks are added with Angle brackets. ("(? /W +) "defines"/W + "as a group, and the group name is" word ")
Square brackets are used for multiple purposes, and all positions are specified based on it;
The equal sign of the question mark (?) to locate the front of the string. ("/B/W + (? = Ing/B) "locate the string before" ing)
To locate the end of the string, insert a smaller sign in the middle; ("(? <=/Bsub)/W +/B "to locate the string after" sub)
Add an exclamation point to the question mark, followed by a string;
All phper knows ,! It indicates the inverse;
If it is not followed by this string, it will all comply with the Report; ("/W * D (?! OG)/W * "," dog "does not match, and" do "Does)
The question mark is less than the exclamation point, followed by a string;
If this string is not included in the previous section, it will all comply with the report;
The asterisk (*) is greedy and a question mark (*) is not greedy;
The plus sign has a guaranteed-performance question mark, which must be repeated at least once;
There are two question marks in the old rule, one round for 0 times;
Followed by curly braces ?, Greedy becomes not greedy;
There are still a lot of installation failures, waiting for the future to increase

Like for phper ...... But it doesn't matter.