html图片高亮显示,css代码高亮显示的js实现代码(图文)

完整代码如下：

复制代码 代码示例:

Js实现CSS代码高亮显示_www.jquerycn.cn

body{

font-size:12px;

line-height:1.8;

font-family:'Courier New', Courier, monospace;

}

#area{

width:320px;

height:120px;

}

body{

font-size:12px;

line-height:1.8;

}

#area{

width:320px;

line-height:1.5;

font-family:"Courier New", Courier, monospace;

}

/*

ul{

margin:0;

padding:0;

}

*/

检测看看效果咯

function $(id) {

return document.getElementById(id);

};

$("btn").οnclick=function(){

var code=$("area").value;

//处理注释：注释替换成 _数字_

var startIdx=endIndex=-1;

var at=0;

var commentList=[];

while(true){

startIndex=code.indexOf("/*",at);

if(startIndex==-1)break;

endIndex=code.indexOf("*/",startIndex);

if(endIndex==-1)break;

at=endIndex+2;

commentList.push(code.substring(startIndex,at));

code=code.replace(commentList[commentList.length-1],"_"+(commentList.length-1)+"_");

}

//字符串

code=code.replace(/(['"]).*\1/g,function(m){return ""+m+""});

//CSS样式值

code=code.replace(/:(.+);/g,function(m,n){return ":"+n+";"});

//CSS样式名称

code=code.replace(/[{}]/g,function(m){

if(m=="{"){

return "{";

}else{

return "}";

}

});

//注释

code=code.replace(/_(\d+)_/g,function(m,n){return ""+commentList[n]+""});

//处理\t

code=code.replace(/^(\t+)/gm,function(m){

return (new Array(m.length+1)).join("    ");

});

//处理空格

code=code.replace(/^( +)/gm, function(m) {

return (new Array(m.length + 1)).join(" ");

});

//处理换行

code=code.replace(/\r?\n/g,"
");

$("pre").innerHTML=code;

}

效果如下图所示：