js设置 HTML 语法高亮
<meta charset="utf-8">
<style>
#myDiv{ border:dashed 1px #ccc; padding:5px; background-color:#f9f9f9; font-size:22px; line-height:28px; font-weight:bolder;}
</style>
<pre id="myDiv">
<style>
#myDiv{
border:dashed 1px #ccc;
padding:5px;
background-color:#f9f9f9;
font-size:22px;
line-height:28px;
}
</style>
<script>
var x = document.getElementById('test');
if(true){
return false;
}
</script>
<!DOCTYPE html>
<html>
<body>
<h1>设置 HTML 语法高亮</h1>
<p>Hello world!</p>
<a href="http://1500km.com">1500千米</a>
</body>
</html>
</pre>
<script>
KMCodeColor(myDiv);
function KMCodeColor(dbnum, mode){
var lang =(mode || "html");
var dbnumObj =(document.getElementById(dbnum)|| dbnum);
var dbnumTxt = dbnumObj.innerHTML;
if(!lang){
lang = "html";
}
if(lang == "html"){
dbnumTxt = htmlMode(dbnumTxt);
}
if(lang == "css"){
dbnumTxt = cssMode(dbnumTxt);
}
if(lang == "js"){
dbnumTxt = jsMode(dbnumTxt);
}
dbnumObj.innerHTML = dbnumTxt;
function extract(str, start, end, func, repl){
var s, e, d = '', a = [];
while(str.search(start)> -1){
s = str.search(start);
e = str.indexOf(end, s);
if(e == -1){
e = str.length;
}
if(repl){
a.push(func(str.substring(s, e +(end.length))));
str = str.substring(0, s)+ repl + str.substr(e +(end.length));
}
else {
d += str.substring(0, s);
d += func(str.substring(s, e +(end.length)));
str = str.substr(e +(end.length));
}
}
this.rest = d + str;
this.arr = a;
}
function htmlMode(txt){
var rest = txt, done = '', php, comment, angular, startpos, endpos, note, i;
comment = new extract(rest, "<!--", "-->", greenColor, "KM_HTML_COMMENT_POS");
rest = comment.rest;
while(rest.indexOf("<")> -1){
note = '';
startpos = rest.indexOf("<");
if(rest.substr(startpos, 9).toUpperCase()== "<STYLE"){
note = "css";
}
if(rest.substr(startpos, 10).toUpperCase()== "<SCRIPT"){
note = "javascript";
}
endpos = rest.indexOf(">", startpos);
if(endpos == -1){
endpos = rest.length;
}
done += rest.substring(0, startpos);
done += tagMode(rest.substring(startpos, endpos + 4));
rest = rest.substr(endpos + 4);
if(note == "css"){
endpos = rest.indexOf("</style>");
if(endpos > -1){
done += cssMode(rest.substring(0, endpos));
rest = rest.substr(endpos);
}
}
if(note == "javascript"){
endpos = rest.indexOf('<'+'/'+'script>');
if(endpos > -1){
done += jsMode(rest.substring(0, endpos));
rest = rest.substr(endpos);
}
}
}
rest = done + rest;
for(i = 0; i < comment.arr.length; i++){
rest = rest.replace("KM_HTML_COMMENT_POS", comment.arr[i]);
}
return rest;
}
function tagMode(txt){
var rest = txt, done = '', startpos, endpos, result;
while(rest.search(/(\s|<br>)/)> -1){
startpos = rest.search(/(\s|<br>)/);
endpos = rest.indexOf(">");
if(endpos == -1){
endpos = rest.length;
}
done += rest.substring(0, startpos);
done += attributeMode(rest.substring(startpos, endpos));
rest = rest.substr(endpos);
}
result = done + rest;
result = greenColor('<')+ result.substring(4);
if(result.substr(result.length - 4, 4)== ">"){
result = result.substring(0, result.length - 4)+ greenColor('>');
}
return blueColor( result );
}
function attributeMode(txt){
var rest = txt, done = '', startpos, endpos, singlefnuttpos, doublefnuttpos, spacepos;
while(rest.indexOf("=")> -1){
endpos = -1;
startpos = rest.indexOf("=");
singlefnuttpos = rest.indexOf("'", startpos);
doublefnuttpos = rest.indexOf('"', startpos);
spacepos = rest.indexOf(' ', startpos + 2);
if(spacepos > -1
&&(spacepos < singlefnuttpos || singlefnuttpos == -1)&&(spacepos < doublefnuttpos || doublefnuttpos == -1)){
endpos = rest.indexOf(' ', startpos);
}
else if(doublefnuttpos > -1
&&(doublefnuttpos < singlefnuttpos || singlefnuttpos == -1)&&(doublefnuttpos < spacepos || spacepos == -1)){
endpos = rest.indexOf('"', rest.indexOf('"', startpos)+ 1);
}
else if(singlefnuttpos > -1
&&(singlefnuttpos < doublefnuttpos || doublefnuttpos == -1)&&(singlefnuttpos < spacepos || spacepos == -1)){
endpos = rest.indexOf("'", rest.indexOf("'", startpos)+ 1);
}
if(!endpos || endpos == -1 || endpos < startpos){
endpos = rest.length;
}
done += rest.substring(0, startpos);
done += redColor(rest.substring(startpos, endpos + 1));
rest = rest.substr(endpos + 1);
}
return greenColor( done + rest );
}
function cssMode(txt){
var rest = txt, done = '', s, e, comment, i, midz, c, cc;
comment = new extract(rest, /\/\*/, "*/", greenColor, "KM_CSS_COMMENT_POS");
rest = comment.rest;
while(rest.search("{")> -1){
s = rest.search("{");
midz = rest.substr(s + 1);
cc = 1;
c = 0;
for(i = 0; i < midz.length; i++){
if(midz.substr(i, 1)== "{"){
cc++;
c++;
}
if(midz.substr(i, 1)== "}"){
cc--;
}
if(cc == 0){
break;
}
}
if(cc != 0){
c = 0;
}
e = s;
for(i = 0; i <= c; i++){
e = rest.indexOf("}", e + 1);
}
if(e == -1){
e = rest.length;
}
done += rest.substring(0, s + 1);
done += cssPropertyMode(rest.substring(s + 1, e));
rest = rest.substr(e);
}
rest = done + rest;
rest = rest.replace(/{/g, indigoColor('{'));
rest = rest.replace(/}/g, indigoColor('}'));
for(i = 0; i < comment.arr.length; i++){
rest = rest.replace("KM_CSS_COMMENT_POS", comment.arr[i]);
}
return fuchsiaColor( rest );
}
function cssPropertyMode(txt){
var rest = txt, done = '', s, e, n, loop;
if(rest.indexOf("{")> -1 ){
return cssMode(rest);
}
while(rest.search(":")> -1){
s = rest.search(":");
loop = true;
n = s;
while(loop){
loop = false;
e = rest.indexOf(";", n);
if(rest.substring(e - 5, e + 1)== " "){
loop = true;
n = e + 1;
}
}
if(e == -1){
e = rest.length;
}
done += rest.substring(0, s);
done += cssPropertyValueMode(rest.substring(s, e + 1));
rest = rest.substr(e + 1);
}
return orangeColor( done + rest );
}
function cssPropertyValueMode(txt){
var rest = txt, done = '', s;
rest = indigoColor(':')+ rest.substring(1);
while(rest.search(/!important/i)> -1){
s = rest.search(/!important/i);
done += rest.substring(0, s);
done += redColor(rest.substring(s, s + 10));
rest = rest.substr(s + 10);
}
result = done + rest;
if(result.substr(result.length - 1, 1)== ";"
&& result.substr(result.length - 6, 6)!= " "
&& result.substr(result.length - 4, 4)!= "<"
&& result.substr(result.length - 4, 4)!= ">"
&& result.substr(result.length - 5, 5)!= "&"
){
result = result.substring(0, result.length - 1)+ indigoColor(';');
}
return greenColor( result );
}
function jsMode(txt){
var rest = txt, done = '', esc = [], i, cc, tt = '', sfnuttpos, dfnuttpos, compos, comlinepos, keywordpos, numpos, mypos, dotpos, y;
for(i = 0; i < rest.length; i++){
cc = rest.substr(i, 1);
if(cc == "\\"){
esc.push(rest.substr(i, 2));
cc = "KM_JS_ESCAPE";
i++;
}
tt += cc;
}
rest = tt;
y = 1;
while(y == 1){
sfnuttpos = getPos(rest, "'", "'", brownColor);
dfnuttpos = getPos(rest, '"', '"', brownColor);
compos = getPos(rest, /\/\*/, "*/", greenColor);
comlinepos = getPos(rest, /\/\//, "<br>", greenColor);
numpos = getNumPos(rest, redColor);
keywordpos = getKeywordPos("js", rest, redColor);
dotpos = getDotPos(rest, indigoColor);
if(Math.max(
numpos[0],
sfnuttpos[0],
dfnuttpos[0],
compos[0], comlinepos[0],
keywordpos[0],
dotpos[0]
)== -1){
break;
}
mypos = getMinPos(numpos, sfnuttpos, dfnuttpos, compos, comlinepos, keywordpos, dotpos);
if(mypos[0] == -1){
break;
}
if(mypos[0] > -1){
done += rest.substring(0, mypos[0]);
done += mypos[2](rest.substring(mypos[0], mypos[1]));
rest = rest.substr(mypos[1]);
}
}
rest = done + rest;
for(i = 0; i < esc.length; i++){
rest = rest.replace("KM_JS_ESCAPE", esc[i]);
}
return indigoColor(rest);
}
function getDotPos(txt, func){
var x, i, j, s, e, arr = ['.','<', ' ', ';', '(', '+', ')', '[', ']', ',', '&', ':', '{', '}', '/' ,'-', '*', '|', '%'];
s = txt.indexOf(".");
if(s > -1){
x = txt.substr(s + 1);
for(j = 0; j < x.length; j++){
cc = x[j];
for(i = 0; i < arr.length; i++){
if(cc.indexOf(arr[i])> -1){
e = j;
return [s + 1, e + s + 1, func];
}
}
}
}
return [-1, -1, func];
}
function getMinPos(){
var i, arr = [];
for(i = 0; i < arguments.length; i++){
if(arguments[i][0] > -1){
if(arr.length == 0 || arguments[i][0] < arr[0]){
arr = arguments[i];
}
}
}
if(arr.length == 0){
arr = arguments[i];
}
return arr;
}
function getKeywordPos(typ, txt, func){
var words, i, pos, rpos = -1, rpos2 = -1, patt;
if(typ == "js"){
words = ['abstract','arguments','boolean','break','byte','case','catch','char','class','const','continue','debugger','default','delete',
'do','double','else','enum','eval','export','extends','false','final','finally','float','for','function','goto','if','implements','import',
'in','instanceof','int','interface','let','long','NaN','native','new','null','package','private','protected','public','return','short','static',
'super','switch','synchronized','this','throw','throws','transient','true','try','typeof','var','void','volatile','while','with','yield'];
}
for(i = 0; i < words.length; i++){
pos = txt.indexOf(words[i]);
if(pos > -1){
patt = /\W/g;
if(txt.substr(pos + words[i].length,1).match(patt)
&& txt.substr(pos - 1,1).match(patt)
){
if(pos > -1 &&(rpos == -1 || pos < rpos)){
rpos = pos;
rpos2 = rpos + words[i].length;
}
}
}
}
return [rpos, rpos2, func];
}
function getPos(txt, start, end, func){
var s, e;
s = txt.search(start);
e = txt.indexOf(end, s +(end.length));
if(e == -1){
e = txt.length;
}
return [s, e +(end.length), func];
}
function getNumPos(txt, func){
var arr = ['<br>', ' ', ';', '(', '+', ')', '[', ']', ',', '&', ':', '{', '}', '/' ,'-', '*', '|', '%', '='], i, j, c, startpos = 0, endpos, word;
for(i = 0; i < txt.length; i++){
for(j = 0; j < arr.length; j++){
c = txt.substr(i, arr[j].length);
if(c == arr[j]){
if(c == "-"
&&(txt.substr(i - 1, 1)== "e" || txt.substr(i - 1, 1)== "E")){
continue;
}
endpos = i;
if(startpos < endpos){
word = txt.substring(startpos, endpos);
if(!isNaN(word)){
return [startpos, endpos, func];
}
}
i += arr[j].length;
startpos = i;
i -= 1;
break;
}
}
}
return [-1, -1, func];
}
function brownColor(x){return '<font color=brown>'+x+'</font>';}
function orangeColor(x){return '<font color=orange>'+x+'</font>';}
function greenColor(x){return '<font color=green>'+x+'</font>';}
function redColor(x){return '<font color=red>'+x+'</font>';}
function indigoColor(x){return '<font color=indigo>'+x+'</font>';}
function blueColor(x){return '<font color=blue>'+x+'</font>';}
function fuchsiaColor(x){return '<font color=fuchsia>'+x+'</font>';}
}
</script>
运行结果