Javascript实现CSS代码高亮显示 -- [DIV+CSS]─ 深山工作室提供网络投票系统|微信公众号投票|微信公众号小程序|抖音小程序|百度小程序|微信公众号开发|企业网站建设

Javascript实现CSS代码高亮显示

深山行者个人网站 2009/12/22 14:07:43 深山行者字体:大中小浏览 8214

以下为详细代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Javascript实现CSS代码高亮显示1</title>
<style type="text/css">
/*
*/
body{
	font-size:12px;
	line-height:1.8;
	font-family:'Courier New', Courier, monospace;
}
#area{
	width:320px;
	height:120px;
}
</style>
</head>
<body>
<textarea id="area">
body{
	font-size:12px;
	line-height:1.8;
	font-family:'微软雅黑';
}
/*
	web：http://www.dovapour.com.cn/
    mail：dovapour@gmail.com
  	QQ：362380046
*/
#area{
	width:320px;
	height:120px;
	line-height:1.5;
	font-family:"Courier New", Courier, monospace;
}
/*
ul{
	margin:0;
    padding:0;
    list-style:none;
}
table{
	border-collapse:collapse;
    border-spacing:0;
}
*/
</textarea>
<button id="btn">测试</button>
<div id="pre" style="color:#F0F;"></div>
<script type="text/javascript">
function $(id) {
	return document.getElementById(id);
};
$("btn").onclick=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 "<span style=\"color:#060;\">"+m+"</span>"});
	
	//CSS样式值
	code=code.replace(/:(.+);/g,function(m,n){return ":<span style=\"color:#00F;\">"+n+"</span>;"});
	
	//CSS样式名称
	code=code.replace(/[{}]/g,function(m){
		if(m=="{"){
			return "{<span style=\"color:#006;\">";
		}else{
			return "</span>}";
		}
	});
	
	//注释
	code=code.replace(/_(\d+)_/g,function(m,n){return "<span style=\"color:#999;\">"+commentList[n]+"</span>"});
	
	//处理\t
	code=code.replace(/^(\t+)/gm,function(m){
		return (new Array(m.length+1)).join("&nbsp;&nbsp;&nbsp;&nbsp;");									
	});
	
	//处理空格
	code=code.replace(/^( +)/gm, function(m) {
		return (new Array(m.length + 1)).join("&nbsp;");
	});
	
	//处理换行
	code=code.replace(/\r?\n/g,"<br />");
	
	$("pre").innerHTML=code;
}
</script>
</body>
</html>

前一页:IE中奇怪的左右border断线现象

后一页:仿taobao效果拼音字母检索功能

相关阅读: 网站需要SEO 基本的SEO建站要点; 用Javascript仿flash焦点图片效果支持IE与火狐; 两个ASP中防止SQL注入式攻击; 东莞市潮流假期旅行社有限公司; 纯CSS制作的网页中的lightbox效果; 在网页标题栏上或收藏夹前面显示网站ico小图标的方法; 旅行社网站管理系统免费版 V2.4; 深山旅行社网站管理系统 v1.7

更多信息>>栏目类别选择: 百度小程序开发; 微信小程序开发; 微信公众号开发; uni-app; asp函数库; ASP; DIV+CSS; HTML; python

更多>>同类信息: jquery设置或获取修改classname; 利用css3.0写出一个音乐播放的唱片碟盘的效果; 利用css中的scale()实现放大缩小效果; 利用background-color:#000000a8在背景颜色16进制代码之后加字母加上数字让背景色透明; css背景使用base64编码或者将base64编码放在img图片标签中; 利用css3中的-webkit-font-smoothing把网页文字的毛边去掉

更多>>最新添加文章: dw里面查找替换使用正则删除sqlserver里面的CONSTRAINT; Android移动端自动化测试：使用UIAutomatorViewer与Selenium定位元素; 抖音直播音挂载小雪花懂车帝小程序; javascript获取浏览器指纹可以用来做投票; 火狐Mozilla Firefox出现：无法载入您的Firefox配置文件它可能已经丢失或是无法访问问题解决集合处理办法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路径; python通过代码修改pip下载源让下载库飞起; python里面requests.post返回的res.text还有其它的吗

更多>>随机抽取信息: 纯div+css制作的弹出菜单-05; 旅行社手机网站模板11; asp实现获得当前文章的上一篇信息与下一篇信息功能及代码; 可以用作后台的超级强的变色表格; 旅行社网站模板默认风格10; JAVA得到网卡物理地址(Windows和Linux)

更多标签热门标签

右击 dt margin 定律文字调色 JS效果字符逗号 script font-size strong 拖动数组 xhtml Excel cookies 页面渐隐快捷键 absolute 圆角注册表 relative V3.1 个人滤镜滚动条 DOCTYPE 源文件 label 标签学习 li 特效 position Java 强聊代码右击失效 html 第几楼文件类型标语源码色彩详解面板 important 单选