Javascript实现的CSS代码高亮显示

相比JavaScript，CSS的语法就简单多了，主要是处理注释、字符串、CSS样式名称、CSS样式值、缩进和换行，具体详情请看代码。

Javascript实现CSS代码高亮显示

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;
}
*/

This'S Testing……

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 ""+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;
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • jsp网页搜索结果中实现选中一行使其高亮

    我在做搜索结果时,为了好看需要将选中的行变的高亮些,我使用了一个onclick 事件: 复制代码 代码如下: var assno=""; function check(obj,che,rwid){ if(obj.checked==true){ document.getElementById(rwid).style.background ="blue"; assno=document.getElementById(che).value; alert(assno); }

  • 用JS将搜索的关键字高亮显示实现代码

    用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助 复制代码 代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.

  • angularjs实现搜索的关键字在正文中高亮出来

    angularjs实现搜索的关键字在正文中高亮出来

    1.定义高亮 filter 我们希望搜索的关键字在正文中高亮出来,正文内容就是过滤器的第一个参数,第二个参数就是搜索关键字,这样,我们的过滤器将会有两个参数了. 高亮的原理很简单,将需要高亮的内容使用 span 标记隔离出来,再加上一个高亮的 class样式 进行描述就可以了. app.filter("highlight", function($sce, $log){ var fn = function(text, search){ $log.info("text: &quo

  • 两种简单实现菜单高亮显示的JS类代码

    记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类. 其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路也比较简单,即通过判断点击,给点击项加载高亮样式. 第一种判断当前URL值高亮类代码: 复制代码 代码如下:

  • javascript高亮效果的二种实现方法

    js高亮方法一: 复制代码 代码如下: <script> function HighLight(nWord){ if(nWord!=''){ var keyword = document.body.createTextRange(); while(keyword.findText(nWord)){ keyword.pasteHTML("<span style='color:red;'>" + keyword.text + "</span>&

  • javascript 关键字高亮显示实现代码

    关键字高亮显示 我们是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的聚集场所. 提供最新的网络编程.脚本编程.网页制作.网页设计.网页特效,为站长与网络编程从业者提供学习资料. 脚本,vbscript,正则表达式,jquery,dos,bat,批处理,javascript,Photoshop,HTML,div+css,ASP,PHP,ASP.NET

  • js 玩转正则表达式之语法高亮

    学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解. 那么我们来分析下两位大神 次碳酸钴 和 Barret Lee 语法高亮实现. 先说 Barret Lee 的这篇 <几个小例子教你如何实现正则表达式highlight高亮> 之前看的时候只觉的神奇,特别是下面那个一步一步分开匹配的例子,更是霸气测漏,不过作者也说了,分开只是为了演示方便,可以很直观的看到这一步匹配了什么,不然一步到位匹配完成,你都不知道发生了什么就处理完毕了.来看下他的正则 复

  • JavaScript实现的搜索及高亮显示功能示例

    JavaScript实现的搜索及高亮显示功能示例

    本文实例讲述了JavaScript实现的搜索及高亮显示功能.分享给大家供大家参考,具体如下: 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者将不匹配的隐藏掉 效果图: html: <div class="contracts-header">名称: <input type="text" value="" id="sea

  • 用js查找法实现当前栏目的高亮显示的代码

    当前栏目高亮显示        JS判断当前URL对当前栏目高亮显示,重点是用到了indexOf来判断两个字符串中第一次出现的位置,如果没有出现就返回-1,出现就返回 其它,并与返回其它结果的那个字符串所在元素定义一个class. HTML 复制代码 代码如下: <div id="nav">   <ul>   <li><a href="http://www.jb51.net/html/list/index_127.htm" 

  • Angularjs实现搜索关键字高亮显示效果

    需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字 细节分析: 1.每次执行搜索操作,需清空上一次结果 2.需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路: 利用正则表达式匹配关键字 使用javascript字符串替换的方式,将关键字替换成<span class='red'>关键字</span> 为了避免出现当关键字为 'p' 时候,将标签<p>替换成<<span>p</span>

随机推荐