`

javascript语法着色和检查代码，非常的简单不到60行

JavaScriptIEXHTML脚本HTML 
阅读更多
Html代码 复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">     
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">     
  3. <head>     
  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     
  5.     <title>SyntaxHighlighter Build Test Page</title>     
  6. </head>     
  7.     <body>     
  8.     <h3>SyntaxHihglighter Test</h3>     
  9.     <pre id="showCode">  
  10.     var hi = "hi!";   
  11.     function test()      
  12.     {      
  13.         var a = 5;      
  14.         if(a<10)      
  15.         {      
  16.             return 10;      
  17.         }      
  18.         else      
  19.         {      
  20.             return avar b = a;     
  21.         }   
  22.         dvar b = a;   
  23.     }      
  24.     </pre>     
  25.      
  26.     <script type="text/javascript">     
  27.      
  28.     function hightLight(str)   
  29. {   
  30.     var start_var = false;   
  31.     if(str.substring(0,3) == "var")   
  32.     {   
  33.         start_var = true;   
  34.     }    
  35.     var keywords_green = "= { }".split(" ");   
  36.     var keywords_blue = "function new return var typeof instanceof".split(" ");   
  37.     var keywords_red = "break case catch continue default delete else finally for if switch this throw try void while with ;".split(" ");   
  38.     //user lite keyword no hightLight with: do in   
  39.     strstr = str.replace(/};/g,"};\n");//对只有一行的压缩代码，每个方法换一行，方便查阅   
  40.        
  41.     for(var i = 0; i < keywords_green.length; i++)   
  42.     {   
  43.         var oReg = new RegExp(keywords_green[i], "g");   
  44.         var rp = "<span style='color:green'>" + keywords_green[i] + "</span>";   
  45.         strstr = str.replace(oReg,rp);   
  46.     }   
  47.        
  48.     //给异常的关键字var加上背景颜色，顺序不能变   
  49.     var rp3 = "<span style='background-color:yellow'>$1var</span>";   
  50.     strstr = str.replace(/([^;|{|\t| ])var/g,rp3);   
  51.     if(start_var)   
  52.     {   
  53.         alert(str);   
  54.         //去掉第一个以var开头的背景颜色   
  55.         strstr = str.replace(/<span style='background-color:yellow'>var<\/span>/,"var");   
  56.     }   
  57.     for(var i = 0; i < keywords_blue.length; i++)   
  58.     {   
  59.         var oReg = new RegExp(keywords_blue[i], "g");   
  60.         var rp = "<span style='color:blue'>" + keywords_blue[i] + "</span>";   
  61.         strstr = str.replace(oReg,rp);   
  62.     }   
  63.     for(var i = 0; i < keywords_red.length; i++)   
  64.     {   
  65.         var oReg = new RegExp(keywords_red[i], "g");   
  66.         var rp = "<span style='color:red'>" + keywords_red[i] + "</span>";   
  67.         var rp2 = "$1<span style='color:red'>" + keywords_red[i] + "</span>(";   
  68.            
  69.         //if for are use more and other code not in keyword are use it   
  70.         if(keywords_red[i] == "if")   
  71.         {   
  72.             strstr = str.replace(/if(\s?)\(/g,rp2);   
  73.         }   
  74.         else if(keywords_red[i] == "for")   
  75.         {   
  76.             strstr = str.replace(/for(\s?)\(/g,rp2);   
  77.         }   
  78.         else   
  79.         {   
  80.             strstr = str.replace(oReg,rp);   
  81.         }   
  82.     }   
  83.        
  84.     strstr = str.replace(/\n/g,"<br />");   
  85.     strstr = str.replace(/\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;");//for ie can't with four space   
  86.     return str;   
  87.  }   
  88.  function init()   
  89.  {   
  90.     var obj = document.getElementById("showCode");   
  91.     var str = obj.innerText || obj.textContent;//innerHTML会吧<>转义成&lt;&gt;导致无法加亮分号   
  92.     obj.innerHTML = hightLight(str);   
  93.  }   
  94.  init();   
  95.     </script>     
  96. </body>     
  97. </html>     
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    <title>SyntaxHighlighter Build Test Page</title>  
</head>  
    <body>  
    <h3>SyntaxHihglighter Test</h3>  
    <pre id="showCode">
	var hi = "hi!";
	function test()   
	{   
		var a = 5;   
		if(a<10)   
		{   
			return 10;   
		}   
		else   
		{   
			return avar b = a;  
		}
		dvar b = a;
	}   
    </pre>  
  
    <script type="text/javascript">  
  
    function hightLight(str)
{
	var start_var = false;
	if(str.substring(0,3) == "var")
	{
		start_var = true;
	} 
	var keywords_green = "= { }".split(" ");
	var keywords_blue = "function new return var typeof instanceof".split(" ");
	var keywords_red = "break case catch continue default delete else finally for if switch this throw try void while with ;".split(" ");
	//user lite keyword no hightLight with: do in
	str = str.replace(/};/g,"};\n");//对只有一行的压缩代码，每个方法换一行，方便查阅
	
	for(var i = 0; i < keywords_green.length; i++)
	{
		var oReg = new RegExp(keywords_green[i], "g");
		var rp = "<span style='color:green'>" + keywords_green[i] + "</span>";
		str = str.replace(oReg,rp);
	}
	
	//给异常的关键字var加上背景颜色，顺序不能变
	var rp3 = "<span style='background-color:yellow'>$1var</span>";
	str = str.replace(/([^;|{|\t| ])var/g,rp3);
	if(start_var)
	{
		alert(str);
		//去掉第一个以var开头的背景颜色
		str = str.replace(/<span style='background-color:yellow'>var<\/span>/,"var");
	}
	for(var i = 0; i < keywords_blue.length; i++)
	{
		var oReg = new RegExp(keywords_blue[i], "g");
		var rp = "<span style='color:blue'>" + keywords_blue[i] + "</span>";
		str = str.replace(oReg,rp);
	}
	for(var i = 0; i < keywords_red.length; i++)
	{
		var oReg = new RegExp(keywords_red[i], "g");
		var rp = "<span style='color:red'>" + keywords_red[i] + "</span>";
		var rp2 = "$1<span style='color:red'>" + keywords_red[i] + "</span>(";
		
		//if for are use more and other code not in keyword are use it
		if(keywords_red[i] == "if")
		{
			str = str.replace(/if(\s?)\(/g,rp2);
		}
		else if(keywords_red[i] == "for")
		{
			str = str.replace(/for(\s?)\(/g,rp2);
		}
		else
		{
			str = str.replace(oReg,rp);
		}
	}
	
	str = str.replace(/\n/g,"<br />");
	str = str.replace(/\t/g,"&nbsp;&nbsp;&nbsp;&nbsp;");//for ie can't with four space
	return str;
 }
 function init()
 {
 	var obj = document.getElementById("showCode");
	var str = obj.innerText || obj.textContent;//innerHTML会吧<>转义成&lt;&gt;导致无法加亮分号
	obj.innerHTML = hightLight(str);
 }
 init();
    </script>  
</body>  
</html>

 

运行结果：

SyntaxHihglighter Test

    var hi = "hi!"; 
    function test() 
    { 
        var a = 5; 
        if(a<10) 
        { 
            return 10; 
        } 
        else 
        { 
            return avar b = a; 
        } 
        dvar b = a; 
    }  

发现javaEye的语法着色功能有bug，我原来的str = str.replace(/};/g,"};\n");变成strstr = str.replace(/};/g,"};\n"); 了！给多了个str，重新编辑html代码也给弄乱了，把源代码上传给大家了。

 

语法着色我自己测试过了，这个其实很简单，就是把关键字替换一下而已，那些关键字替换成什么颜色完全可以自定义，语法着色不是我的目的，我的目的是作为压缩脚本后的语法检查。
因为不规范的写法在脚本压缩成一行和去掉多余空格后经常会报错，例如赋值符后的变量没有以;号结束，else后面没有{}包含起来等，在压缩后的脚本通过语法着色可以比较容易知道在那个地方出错了。

分享到：
| 重构与整容，设计模式和明星是两者的最终目 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JAVA上百实例源码以及开源项目源代码

    JAVA+JSP的聊天室 8个目标文件 简单 JavaScript万年历 显示出当前时间及年份，还可以选择年份及月份和日期 Java编写的HTML浏览器 一个目标文件 摘要:Java源码,网络相关,浏览器 Java编写的HTML浏览器源代码，一个很...

    CodeColorist

    除了FireFox和IE之外的浏览器都不支持格式文本的复制，您可以切换到 HTML（UBB）视图复制HTML（UBB）代码； 6. 如果生成的代码有异常，您可以单击编辑按钮返回修改； 7. 在博客、论坛编辑框中粘贴，您就可以发布您的...

    statax:用于StataJavaScript和LaTeX语法突出显示器

    关于语法着色对于统计教学的重要性。 Stata Journal，19（1），83-86。Statax：适用于StataJavaScript和LaTeX语法荧光笔引擎 是Stata的语法突出 。 该软件包包括两个单独的引擎（JavaScript和LaTeX），以突出显示...

    VbsEdit,获评很好的vbs编辑器

    VbsEdit支持带有语法着色、智能感知、代码片段的VBScript，这个VBScript编辑器拥有您需要的一切！ VbsEdit是一个VBS编辑器，也是一个WSF编辑器和一个HTA编辑器。 它可以在没有管理员权限的情况下安装。评估版永不...

    【最新版】CotEditor_3.9.2.dmg【亲测可用】最好的适用于macOS的纯文本编辑器

    使用预定义的语法提取指定的行，然后可以跳到相应的行。 分割编辑器 将一个窗口拆分为多个窗格，以同时查看文档的不同部分。 角色检查器 检查文档中每个选定字符的Unicode字符数据，并在弹出窗口中显示它们。 ...

    JAVA上百实例源码以及开源项目

    　Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...

    java开源包8

    同时保持蒸提供全面的支持，无缝集成的IDE（语法着色，代码导航，重构等）的语法和操作代码完全分离。最大限度地减少时间和费用开发自定义的DSL（领域特定语言在Java）要求。 日志服务器 Apache Flume.tar Flume 是...

    java开源包10

    同时保持蒸提供全面的支持，无缝集成的IDE（语法着色，代码导航，重构等）的语法和操作代码完全分离。最大限度地减少时间和费用开发自定义的DSL（领域特定语言在Java）要求。 日志服务器 Apache Flume.tar Flume 是...

    java开源包1

    同时保持蒸提供全面的支持，无缝集成的IDE（语法着色，代码导航，重构等）的语法和操作代码完全分离。最大限度地减少时间和费用开发自定义的DSL（领域特定语言在Java）要求。 日志服务器 Apache Flume.tar Flume 是...

    java开源包11

    同时保持蒸提供全面的支持，无缝集成的IDE（语法着色，代码导航，重构等）的语法和操作代码完全分离。最大限度地减少时间和费用开发自定义的DSL（领域特定语言在Java）要求。 日志服务器 Apache Flume.tar Flume 是...

    java开源包2

    同时保持蒸提供全面的支持，无缝集成的IDE（语法着色，代码导航，重构等）的语法和操作代码完全分离。最大限度地减少时间和费用开发自定义的DSL（领域特定语言在Java）要求。 日志服务器 Apache Flume.tar Flume 是...

    java开源包3

    同时保持蒸提供全面的支持，无缝集成的IDE（语法着色，代码导航，重构等）的语法和操作代码完全分离。最大限度地减少时间和费用开发自定义的DSL（领域特定语言在Java）要求。 日志服务器 Apache Flume.tar Flume 是...

    java开源包6

    同时保持蒸提供全面的支持，无缝集成的IDE（语法着色，代码导航，重构等）的语法和操作代码完全分离。最大限度地减少时间和费用开发自定义的DSL（领域特定语言在Java）要求。 日志服务器 Apache Flume.tar Flume 是...

    java开源包5

    同时保持蒸提供全面的支持，无缝集成的IDE（语法着色，代码导航，重构等）的语法和操作代码完全分离。最大限度地减少时间和费用开发自定义的DSL（领域特定语言在Java）要求。 日志服务器 Apache Flume.tar Flume 是...

    java开源包4

    同时保持蒸提供全面的支持，无缝集成的IDE（语法着色，代码导航，重构等）的语法和操作代码完全分离。最大限度地减少时间和费用开发自定义的DSL（领域特定语言在Java）要求。 日志服务器 Apache Flume.tar Flume 是...

    java开源包7

    同时保持蒸提供全面的支持，无缝集成的IDE（语法着色，代码导航，重构等）的语法和操作代码完全分离。最大限度地减少时间和费用开发自定义的DSL（领域特定语言在Java）要求。 日志服务器 Apache Flume.tar Flume 是...

    java开源包9

    同时保持蒸提供全面的支持，无缝集成的IDE（语法着色，代码导航，重构等）的语法和操作代码完全分离。最大限度地减少时间和费用开发自定义的DSL（领域特定语言在Java）要求。 日志服务器 Apache Flume.tar Flume 是...

Magicbox
Global site tag (gtag.js) - Google Analytics