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

最新推荐文章于 2020-07-11 13:59:32 发布

飘然的风

最新推荐文章于 2020-07-11 13:59:32 发布

阅读量141

点赞数

分类专栏： javascript 文章标签： JavaScript IE XHTML 脚本 HTML ViewUI

javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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
strstr = 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>";
strstr = str.replace(oReg,rp);
}
//给异常的关键字var加上背景颜色，顺序不能变
var rp3 = "<span style='background-color:yellow'>$1var</span>";
strstr = str.replace(/([^;|{|\t| ])var/g,rp3);
if(start_var)
{
alert(str);
//去掉第一个以var开头的背景颜色
strstr = 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>";
strstr = 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")
{
strstr = str.replace(/if(\s?)\(/g,rp2);
}
else if(keywords_red[i] == "for")
{
strstr = str.replace(/for(\s?)\(/g,rp2);
}
else
{
strstr = str.replace(oReg,rp);
}
}
strstr = str.replace(/\n/g,"<br />");
strstr = str.replace(/\t/g,"    ");//for ie can't with four space
return str;
}
function init()
{
var obj = document.getElementById("showCode");
var str = obj.innerText || obj.textContent;//innerHTML会吧<>转义成<>导致无法加亮分号
obj.innerHTML = hightLight(str);
}
init();
</script>
</body>
</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后面没有{}包含起来等，在压缩后的脚本通过语法着色可以比较容易知道在那个地方出错了。

飘然的风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript语法着色和检查代码，非常的简单不到60行

Html代码 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" ...
复制链接

扫一扫