技术文章 > JScript多语言语法加亮引擎

JScript多语言语法加亮引擎

2018-07-17 22:56

文档管理软件,文档管理系统,知识管理系统,档案管理系统的技术资料:
<html>
<head>
<title>语法加亮</title>
</head>
<style>
.sourceCode
{
color:#000000;
background:#FFFFFF;
width:100%;
height:200px;
border:1px solid #000000;
font-size:12px;
padding:0px;
}
#HtmlCode .keyWord1
{
color:#0000FF;
}

#HtmlCode .keyWord2
{
color:#FF0048;
}

#HtmlCode .keyWord3,
#HtmlCode .keyWord4,
#HtmlCode .keyWord5
{
color:#0000FF;
}
#HtmlCode #stringCSS,
#stringCSS .keyWord1,
#stringCSS .keyWord2,
#stringCSS .keyWord3,
#stringCSS .keyWord4,
#stringCSS .keyWord5
{
color:#008000;
}

#lineCSS
{
width:48px;
border-right:1px solid #000000;
text-align:right;
margin-right:8px;
padding-right:4px;
}
#HtmlCode #commentCSS,
#commentCSS .keyWord1,
#commentCSS .keyWord2,
#commentCSS .keyWord3,
#commentCSS .keyWord4,
#commentCSS .keyWord5
{
color:#FF0000;
}
#commentCSS #lineCSS
{
color:#000000;
}

</style>
<script language=“javascript“>
//ms-help://MS.MSDNQTR.v80.en/MS.MSDN.v80/MS.WEBDEV.v10.en/script56/html/js56jsobjregexp.htm
//ms-help://MS.MSDNQTR.v80.en/MS.MSDN.v80/MS.WEBDEV.v10.en/script56/html/js56jsmthreplace.htm

var htmlMode = false;
var codeType = “CSharp“;

//关键字匹配正则
var keyWordRegex;
//字符串匹配正则
var stringRegex1;
var stringRegex2;

var lineCommentRegex;
var multiLineCommentRegex;
var lineRegex;
function InitRegex()
{
switch(codeType)
{
case “CSharp“:
keyWordRegex = new RegExp();
stringRegex1 = new RegExp();
stringRegex2 = new RegExp();

lineCommentRegex = new RegExp();
multiLineCommentRegex = new RegExp();

lineRegex = new RegExp();
keyWordRegex.compile(/\b(as|auto|base|break|case|catch|const|continue|default|do|else|event|explicit|extern|false|finally|fixed|for|foreach|goto|get|if|implicit|in|internal|lock|namespace|new|null|operator|out|override|params|private|protected|public|partial|readonly|ref|return|sealed|stackalloc|static|switch|this|throw|true|try|unsafe|using|virtual|void|while|set)\b|\b(bool|byte|char|class|decimal|delegate|double|enum|float|int|interface|long|object|sbyte|short|string|struct|uint|ulong|ushort)\b/g);
stringRegex1.compile(/“[^“\\\r\n]*(\\.[^“\\\r\n]*)*“/g);
stringRegex2.compile(/@“[^“\\]*(\\.[^“\\]*)*“/g);

lineCommentRegex.compile(“//.*$“, “gm“);
multiLineCommentRegex.compile(“/\\*[.\\b\\w\\W]*\\*/“, “g“);
lineRegex.compile(/^.*(\n|$)/gm);
break;
case “VBDotNet“:
break;
case “CPP“:
break;
case “XML“:
break;
case “JScript“:
break;
}
}
function Execute()
{
//var startTime = new Date();
if(htmlMode) htmlMode = false;

InitRegex();
var temp = document.getElementById(“code“).innerText;
//将$符号转为$$,因为后面使用了$作为标记
temp = temp.replace(/\$/g, “$$$$“);
//替换空白符与特殊字符
temp = temp.replace(/&/g, “&“);
temp = temp.replace(/ /g, “ “);
temp = temp.replace(/\t/g, “    “);
temp = temp.replace(/</g, “<“);
temp = temp.replace(/>/g, “>“);

//把代码拆分成行,然后每行间加入行号和标签
var _lines = temp.split(“\n“);
var _newCode = new Array();
for(var i=0; i<_lines.length; i++)
{
_newCode.push(“ $LINE “);
_newCode.push(i+1);
_newCode.push(“ $LINEE “);
_newCode.push(_lines[i]);
_newCode.push(“\n“);
}
//重新组合行
temp = _newCode.join(“ “);
//alert(temp);
//匹配关键字
temp = temp.replace(keyWordRegex, “ $$KW1 $1 $$KWE $$KW2 $2 $$KWE $$KW3 $3 $$KWE $$KW4 $4 $$KWE $$KW5 $5 $$KWE“);

//匹配字符串
temp = temp.replace(stringRegex1, “ $$STR1$& $$STRE“);
temp = temp.replace(stringRegex2, “ $$STR2$& $$STRE“);

//
temp = temp.replace(lineCommentRegex, “ $$COM1$& $$COME“);
temp = temp.replace(multiLineCommentRegex, “ $$COM2$& $$COME“);
//清除冗余的关键字加亮代码
temp = temp.replace(/[^\$]\$KW\d [^\$]\$KWE/g, ““);
temp = temp.replace(/[^\$]\$KW\d[^\$]\$\d[^\$]\$KWE/g, ““);
//将匹配结果替换为HTML标签
temp = temp.replace(/\n/g, “<br />\n“);
//temp = temp.replace(/[^\$]\$BR /g, “<br />\n“);
temp = temp.replace(/[^\$]\$KW1 /g, “<span class=“keyWord1“>“);
temp = temp.replace(/[^\$]\$KW2 /g, “<span class=“keyWord2“>“);
temp = temp.replace(/[^\$]\$KW3 /g, “<span class=“keyWord3“>“);
temp = temp.replace(/[^\$]\$KW4 /g, “<span class=“keyWord4“>“);
temp = temp.replace(/[^\$]\$KW5 /g, “<span class=“keyWord5“>“);
temp = temp.replace(/[^\$]\$KWE/g, “</span>“);
temp = temp.replace(/[^\$]\$STR1/g, “<span id=“stringCSS“>“);
temp = temp.replace(/[^\$]\$STR2/g, “<span id=“stringCSS“>“);
temp = temp.replace(/[^\$]\$STRE/g, “</span>“);

temp = temp.replace(/[^\$]\$COM1/g, “<span id=“commentCSS“>“);
temp = temp.replace(/[^\$]\$COM2/g, “<span id=“commentCSS“>“);
temp = temp.replace(/[^\$]\$COME/g, “</span>“);
temp = temp.replace(/([^\$]\$LINE ) /g, “<span id=“lineCSS“>“);
temp = temp.replace(/([^\$]\$LINEE ) /g, “</span>“);
//还原$符号
temp = temp.replace(/\$\$/g, “$$“);

document.getElementById(“HtmlCode“).innerHTML = temp;
//alert(“耗时:“ + (new Date().getTime()-startTime.getTime()) + “ms“);
}
</script>
<body>
<input type=“button“ onClick=“if(htmlMode){HtmlCode.innerHTML = HtmlCode.innerText; htmlMode=false;}“ value=“View“/>
<input type=“button“ onClick=“if(!htmlMode){HtmlCode.innerText = HtmlCode.innerHTML; htmlMode=true;}“ value=“Html“/>
<input type=“button“ onClick=“Execute()“ value=“Execte“/>
<br/><br/>
<div id=“HtmlCode“ class=“sourceCode“>
</div>
<TextArea id=“code“ style=“width:100%; height:200px;“ Text=“再在此输入代码!!!“ onKeyUp=“Execute()“></TextArea >
</body>
</html>