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

This article introduces how to use regular expressions in JavaScript to achieve a syntax highlighting function of the basic knowledge summary and points for attention, has a certain reference value, friends in need can refer to.

What are the characteristics of Java? what are the characteristics of Java? what is the 1.Java language that represents the static object-oriented programming language? it implements the object-oriented theory and allows programmers to carry out complex programming in an elegant way of thinking. 2.Java has the characteristics of simplicity, object-oriented, distributed, security, platform independence and portability, dynamic and so on. 3. Using Java, you can write desktop applications, Web applications, distributed systems, embedded system applications, and so on.

The code is as follows:

(/ ^\ s + |\ spaces /) / / match leading and trailing spaces

(/ (["']) (?:\\. | [^\\ n]) *?\ 1 /) / / matching string

(/\ / (?!\ * | span). +\ / (?! span) [gim] * /) / / matching regular span was added by him last time, and I don't think it should appear here.

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

(/ (\ *\ s*) (@\ w+) (? =\ s*) /) / / matches the tag in the comment

(/\ b (break | continue | do | for | in | function | if | return | switch | throw | try | catch | finally | var | while | case | new | instance | delete | void | Object | String | Number | Boolean | Function | RegExp | Date | Math | window | document | navigator | location | true | true | false | false)\ b /) / / match

Brother Hu may not want to repeat the wheel, just want to figure out how to make such a wheel, so he wrote this thing to the end, without in-depth and detailed processing, the work is relatively rough.

Of course, I'm not talking about him, just a simple comment. After all, there are many excellent syntax highlighting plug-ins, so there's no need to repeat them by yourself, just learn the principles.

Let's take a look at the next cobalt carbonate article, "how to highlight the JavaScript code of regular expressions."

In fact, this article has been analyzed in great detail, I can only briefly add.

The thinking of cobalt secondary carbonate has always been more rigorous. I could only read this article for more than an hour. I reanalyzed it this time, and then realized it myself, and it took me half a day to do it.

But it's worth it. I really learned a lot.

Let's take a look at the general logic first.

The copy code is as follows:

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

((["']) (?:\\. | [^\\ n]) *?\ 3) / / matching string

\ 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 / / match keywords

\ B (Object | Array | String | Number | Boolean | Function | RegExp | Date | Math | window | document | navigator | location)\ b / / matches the built-in object

\ b (true | false)\ b / / match Boolean value

\ b (null | undefined | NaN)\ b / / matches various null values. I think this is more appropriate with Boolean values.

(?: [^\ W\ d] |\ $) [\ $\ w] * / / matches a normal variable name

(0 [xX] [0-9a-fA-F] + |\ d + (?:\.\ d +)? (?: [eE]\ d +) / / matching numbers (if the former is not occupied, there will be a problem here)

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

[\ s\ s] / / other arbitrary values that cannot be matched

The description of the last [\ s\ s] in the original text: we must match every character. Because they all need to do a HTML escape.

Then there is a detailed code below.

This is a very good article. I have read it at least 10 times before and after, and I almost fully understood it only two days ago.

However, there are some minor flaws in this code, such as string matching optimization that does not match line breaks.

There is also a number matching is not comprehensive enough can only match 0xff, 12.34, 1e3 these categories, such as .123 12.3e+3 format can not match.

And the keyword order I think can be slightly optimized.

Because the traditional NFA engine only matches from left to right, the operation of the next branch is stopped when the match is reached.

So putting the most common keywords in front can improve part of the performance.

Finally, it is better to use new RegExp to improve the performance of code with a large amount of code.

Here's my regular and simple demo. (in fact, it is only the optimization of the cobalt subcarbonate source code.)

Let's take a look at the regular part:

The copy code is as follows:

(\ /\ /. * |\ /\ * [\ s\ S] *?\ * /) / the matching comment has not been changed

("(?: [^"\] |\ [\ s\ S]) * "|'(?: [^'\\] |\\ [\ s\ S]) *') / / matching comments have been optimized

\ B (true | false | null | undefined | NaN)\ b / / matches Boolean and null values, which are commonly used and grouped in advance

\ B (var | for | if | else | return | this | while | new | function | switch | case | typeof | do | in | throw | try | catch | finally | with | delete | void | break | continue)\ b / / matching keywords, keyword order changed below

\ B (document | Date | Math | window | Object | location | navigator | Array | String | Number | Boolean | Function | RegExp)\ b / / built-in object. The word order has been changed.

(?: [^\ W\ d] |\ $) [\ $\ w] * / / matches the ordinary variable name unchanged

(0 [xX] [0-9a-fA-F] + |\ d + (?:\.\ d +)? (?: [eE] [+ -]?\ d +)? |\.\ d + (?: [eE] [+ -]?\ d +)?) / / matching number, fixed the match

(?: ^ | [^\)\]]) (\ / (?!\ *) (?:\. | [^\\ /\ n]) +? / [gim] *) / / match regular, this is the most complex, there are many situations, I do not have the strength to modify it for the time being

[\ s\ S] / / match other

A grouping of Boolean and null values is combined, and then the regular grouping is optimized, so there are 2 fewer groupings than him.

His 2p3 is a string grouping because (["']) captures the previous quotation marks, which my regular does not do.

This (true | false | null | undefined | NaN) if you don't like to put it in a group, you can do it separately.

Is it the same grouping, just to distinguish between coloring?

Under sublime text, true | false | null | undefined | NaN are all the same color, while notepad++ is only colored with true | false, I just want to say hehe.

All right, it's almost time to give an example.

I'm sure many people turn it off before they see it, or just pull the scroll bar and turn it off.

However, I wrote this for these friends who read it carefully. As long as there is one person to read it, I don't think it will be in vain.

Example:

The copy code is as follows:

/ / single-line comments

/ * *

* Multiline comments

* @ date 2014-05-12 22:24:37

* @ name to test it

, /

Var str1 = "123\" 456 "

Var str2 = '123\' 456'

Var str3 = "123\"

456 "

Var num = 123

Var arr = [12,12.34, .12, 1e3, 1e+3, 1e-3, 12340, 12.34e+3, 12.34e-3, .1234e3]

Var arr = ["12", "12.34", '.12, 1e333,' 1e+3, 1eMuth3), '12340, 12.34e+3, 12.34eMuth3, ".1234e3"]

Var arr = [/ 12 "," 12.34RMB, / "12\ / 34" /]

For (var item0; I

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.