自己写了个javascript语法着色的代码，非常的简单不到50行 - coos

群组首页 → 开源软件 → coos → 知识库 → coos → 自己写了个javascript语法着色的代码，非常的简单不到50行

原创作者: zdz8207 阅读:6883次评论:8条更新时间:2011-05-26

<!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后面没有{}包含起来等，在压缩后的脚本通过语法着色可以比较容易知道在那个地方出错了。

Ajax异步请求测试--返回时间没有明显规律

hightLightJs.rar (1.4 KB)
下载次数: 81

评论共 8 条请登录后发表评论

8 楼 cuixiping 2010-01-26 12:27

bug:
1.不能识别注释、字符串、正则表达式
2.如果关键字列表中，包含span, style, color, green, blue, red这些楼主代码格式化中用到的词，就会面目全非了。

现在语法着色做的最好的，我觉得还是editplus，可以着色10组关键字，可以着色数字，字符串，操作符等等，分的非常细。