本文章向大家介紹怎么在JavaScript中使用正則表達式實現(xiàn)一個語法高亮功能的基本知識點總結和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。
創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、成都網(wǎng)站設計、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務新密,十多年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:18980820575
Java的特點有哪些 1.Java語言作為靜態(tài)面向?qū)ο缶幊陶Z言的代表，實現(xiàn)了面向?qū)ο罄碚?，允許程序員以優(yōu)雅的思維方式進行復雜的編程。 2.Java具有簡單性、面向?qū)ο?、分布式、安全性、平臺獨立與可移植性、動態(tài)性等特點。 3.使用Java可以編寫桌面應用程序、Web應用程序、分布式系統(tǒng)和嵌入式系統(tǒng)應用程序等。
代碼如下:
(/^\s+|\s+$/) // 匹配首尾空格
(/(["'])(?:\\.|[^\\\n])*?\1/) // 匹配字符串
(/\/(?!\*|span).+\/(?!span)[gim]*/) // 匹配正則 span 是他上次處理加上的，我覺得這里不應該出現(xiàn)
(/(\/\/.*|\/\*[\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/) // 匹配關鍵詞
小胡子哥可能是不想重復造輪子，只是想弄清楚如何造這樣的輪子而已，所以他寫這個東西點到即止，沒有深入詳細的處理，做的比較粗糙。
當然我也不是說他什么，只是簡單評論一下而已，畢竟優(yōu)秀的語法高亮插件多的是，沒必要自己重復造，學習下原理即可。
我們再來分析下 次碳酸鈷 這篇 《如何實現(xiàn)正則表達式的JavaScript的代碼高亮》
其實這篇已經(jīng)分析的非常詳細了，我只能簡單補充說明下。
次碳酸鈷 思維一向比較嚴謹，這篇文章之前我看了一個多小時，只能看個大概，這次重新分析了一遍，然后自己實現(xiàn)了一遍，竟然也花去我半天時間，
不過非常值得，真心學到了很多。
先來看一下大體的邏輯吧。
復制代碼 代碼如下:
(\/\/.*|\/\*[\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 // 匹配內(nèi)置對象
\b(true|false)\b // 匹配布爾值
\b(null|undefined|NaN)\b // 匹配各種空值， 我覺得這個和布爾值一組比較合適。
(?:[^\W\d]|\$)[\$\w]* // 匹配普通的變量名
(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE]\d+)?) // 匹配數(shù)字 (前者不占用，這里就會有問題)
(?:[^\)\]\}]|^)(\/(?!\*)(?:\\.|[^\\\/\n])+?\/[gim]*) // 匹配正則
[\S\s] // 其他不能匹配的任意值
原文對最后一個 [\S\s] 的描述：我們必須匹配到每一個字符。因為它們都需要做一次HTML轉(zhuǎn)義。
然后下面有詳細的代碼。
這是一篇非常不錯的文章，我前前后后至少看了不下10次了，前兩天才差不多完全明白。
不過這個代碼還有一些小小的瑕疵，比如字符串不能匹配折行那種，字符串匹配優(yōu)化。
還有數(shù)字匹配不夠全面只能匹配 0xff, 12.34, 1e3 這幾類，如 .123 12.3e+3 等格式都無法匹配到。
還有關鍵詞順序我覺得可以稍微優(yōu)化下。
因為 傳統(tǒng)型NFA 引擎的只是從左往右匹配，匹配到了就停止下一個分支的操作。
所以把最常出現(xiàn)的關鍵詞放前面，可以提升一部分性能。
最后，最好是 new RegExp 這樣對于代碼量大的代碼性能上會有所提升。
下面就給出我的正則和簡單的demo吧。(其實只是對 次碳酸鈷 源碼的優(yōu)化而已。。)
先來看正則部分：
復制代碼 代碼如下:
(\/\/.*|\/\*[\s\S]*?\*\/) // 匹配注釋 沒改
("(?:[^"\\]|\\[\s\S])*"|'(?:[^'\\]|\\[\s\S])*') // 匹配注釋 優(yōu)化過
\b(true|false|null|undefined|NaN)\b // 匹配 布爾和空值，這幾個比較常用，分組提前
\b(var|for|if|else|return|this|while|new|function|switch|case|typeof|do|in|throw|try|catch|finally|with|instance|delete|void|break|continue)\b // 匹配關鍵詞，關鍵詞順序改了下
\b(document|Date|Math|window|Object|location|navigator|Array|String|Number|Boolean|Function|RegExp)\b //內(nèi)置對象，單詞順序改了下
(?:[^\W\d]|\$)[\$\w]* // 匹配普通的變量名 沒改
(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|\.\d+(?:[eE][+-]?\d+)?) // 匹配數(shù)字，修復了匹配
(?:^|[^\)\]\}])(\/(?!\*)(?:\\.|[^\\\/\n])+?\/[gim]*) // 匹配正則，這個最復雜，情況很多，我暫時沒實力修改
[\s\S] // 匹配其他
合并了布爾和空值一個分組，然后優(yōu)化了正則分組，所以比他減少了2個分組。
他 2，3 是字符串分組，因為 (["']) 捕獲了前面的引號，而我的正則沒這么做。
這個 (true|false|null|undefined|NaN) 如果你不喜歡放在一個分組了，分開也行、
是不是同一個分組，只是為了區(qū)分著色而已。
sublime text 下 true|false|null|undefined|NaN 都是一個顏色，而 notepad++ 則只著色了 true|false ，我只想說 呵呵。
好了，差不多該給例子了。
我相信，不少人在看到這之前已經(jīng)關掉了，或者只是拉了下滾動條然后關掉了。
不過我寫這個就是為了給這些認真看下來的朋友，只要有一個人看，我覺得就不會白寫了。
例子：
復制代碼 代碼如下:
// 單行注釋
/**
* 多行注釋
* @date 2014-05-12 22:24:37
* @name 測試一下
*/
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, 12.34e3, 12.34e+3, 12.34e-3, .1234e3];
var arr = ["12", "12.34", '.12, 1e3', '1e+3, 1e-3', '12.34e3, 12.34e+3, 12.34e-3', ".1234e3"];
var arr = [/12", "12.34/, /"12\/34"/];
for (var i=0; i<1e3; i++) {
var node = document.getElementById("a"+i);
arr.push(node);
}
function test () {
return true;
}
test();
(function(window, undefined) {
var _re_js = new RegExp('(\\/\\/.*|\\/\\*[\\s\\S]*?\\*\\/)|("(?:[^"\\\\]|\\\\[\\s\\S])*"|\'(?:[^\'\\\\]|\\\\[\\s\\S])*\')|\\b(true|false|null|undefined|NaN)\\b|\\b(var|for|if|else|return|this|while|new|function|switch|case|typeof|do|in|throw|try|catch|finally|with|instance|delete|void|break|continue)\\b|\\b(document|Date|Math|window|Object|location|navigator|Array|String|Number|Boolean|Function|RegExp)\\b|(?:[^\\W\\d]|\\$)[\\$\\w]*|(0[xX][0-9a-fA-F]+|\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?|\\.\\d+(?:[eE][+-]?\\d+)?)|(?:^|[^\\)\\]\\}])(\\/(?!\\*)(?:\\\\.|[^\\\\\\/\\n])+?\\/[gim]*)|[\\s\\S]', 'g');
function prettify(node) {
var code = node.innerHTML.replace(/\r\n|[\r\n]/g, "\n").replace(/^\s+|\s+$/g, "");
code = code.replace(_re_js, function() {
var s, a = arguments;
for (var i = 1; i <= 7; i++) {
if (s = a[i]) {
s = htmlEncode(s);
switch (i) {
case 1: //注釋 com
return '' + s + '';
case 2: //字符串 str
return '' + s + '';
case 3: //true|false|null|undefined|NaN val
return '' + s + '';
case 4: //關鍵詞 kwd
return '' + s + '';
case 5: //內(nèi)置對象 obj
return '' + s + '';
case 6: //數(shù)字 num
return '' + s + '';
case 7: //正則 reg
return htmlEncode(a[0]).replace(s, '' + s + '');
}
}
}
return htmlEncode(a[0]);
});
code = code.replace(/(?:\s*\*\s*|(?: )*\*(?: )*)(@\w+)\b/g, ' * $1') // 匹配注釋中的標記
.replace(/(\w+)(\s*\(|(?: )*\()|(\w+)(\s*=\s*function|(?: )*=(?: )*function)/g, '$1$2') // 匹配函數(shù)
return code;
}
function htmlEncode(str) {
var i, s = {
//"&": /&/g,
""": /"/g,
"'": /'/g,
"<": //g,
"
": /\n/g,
" ": / /g,
" ": /\t/g
};
for (i in s) {
str = str.replace(s[i], i);
}
return str;
}
window.prettify = prettify;
})(window);
你們可以用下面的代碼進行測試。
代碼：
復制代碼 代碼如下:
// 單行注釋
/**
* 多行注釋
* @date 2014-05-12 22:24:37
* @name 測試一下
*/
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, 12.34e3, 12.34e+3, 12.34e-3, .1234e3];
var arr = ["12", "12.34", '.12, 1e3', '1e+3, 1e-3', '12.34e3, 12.34e+3, 12.34e-3', ".1234e3"];
var arr = [/12", "12.34/, /"12\/34"/];
for (var i=0; i<1e3; i++) {
var node = document.getElementById("a"+i);
arr.push(node);
}
function test () {
return true;
}
test();
(function(window, undefined) {
var _re_js = new RegExp('(\\/\\/.*|\\/\\*[\\s\\S]*?\\*\\/)|("(?:[^"\\\\]|\\\\[\\s\\S])*"|\'(?:[^\'\\\\]|\\\\[\\s\\S])*\')|\\b(true|false|null|undefined|NaN)\\b|\\b(var|for|if|else|return|this|while|new|function|switch|case|typeof|do|in|throw|try|catch|finally|with|instance|delete|void|break|continue)\\b|\\b(document|Date|Math|window|Object|location|navigator|Array|String|Number|Boolean|Function|RegExp)\\b|(?:[^\\W\\d]|\\$)[\\$\\w]*|(0[xX][0-9a-fA-F]+|\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?|\\.\\d+(?:[eE][+-]?\\d+)?)|(?:^|[^\\)\\]\\}])(\\/(?!\\*)(?:\\\\.|[^\\\\\\/\\n])+?\\/[gim]*)|[\\s\\S]', 'g');
function prettify(node) {
var code = node.innerHTML.replace(/\r\n|[\r\n]/g, "\n").replace(/^\s+|\s+$/g, "");
code = code.replace(_re_js, function() {
var s, a = arguments;
for (var i = 1; i <= 7; i++) {
if (s = a[i]) {
s = htmlEncode(s);
switch (i) {
case 1: //注釋 com
return '' + s + '';
case 2: //字符串 str
return '' + s + '';
case 3: //true|false|null|undefined|NaN val
return '' + s + '';
case 4: //關鍵詞 kwd
return '' + s + '';
case 5: //內(nèi)置對象 obj
return '' + s + '';
case 6: //數(shù)字 num
return '' + s + '';
case 7: //正則 reg
return htmlEncode(a[0]).replace(s, '' + s + '');
}
}
}
return htmlEncode(a[0]);
});
code = code.replace(/(?:\s*\*\s*|(?: )*\*(?: )*)(@\w+)\b/g, ' * $1') // 匹配注釋中的標記
.replace(/(\w+)(\s*\(|(?: )*\()|(\w+)(\s*=\s*function|(?: )*=(?: )*function)/g, '$1$2') // 匹配函數(shù)
return code;
}
function htmlEncode(str) {
var i, s = {
//"&": /&/g,
""": /"/g,
"'": /'/g,
"<": / ">": />/g,
"
": /\n/g,
" ": / /g,
" ": /\t/g
};
for (i in s) {
str = str.replace(s[i], i);
}
return str;
}
window.prettify = prettify;
})(window);
以上就是小編為大家?guī)淼脑趺丛贘avaScript中使用正則表達式實現(xiàn)一個語法高亮功能的全部內(nèi)容了，希望大家多多支持創(chuàng)新互聯(lián)！
重慶分公司
重慶分公司
