`

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

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

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

相关推荐

    FastColoredTextBoxCF（C#代码语法高亮着色控件源码和样例）

    FastColoredTextBoxCF是一款基于C#语言的高效、功能强大的文本编辑控件，特别适用于实现代码语法高亮和着色。本文将深入探讨FastColoredTextBoxCF的源码、功能特性及其应用示例，帮助开发者更好地理解和使用这个控件...

    EditorX编辑器，语法着色

    3. **记录书签**：在长篇代码中定位关键位置变得简单，通过设置书签，用户可以迅速跳转到已标记的代码行，节省了寻找特定代码的时间。 4. **UMD文件阅读**：支持通用模块定义(UMD)格式的文件阅读，UMD是一种模块化...

    C#实现的比较牛逼的语法高亮着色编辑器

    语法高亮是编辑器的关键特性，FastColoredTextBox支持多种编程语言的语法着色，包括但不限于C#、Java、Python、JavaScript等。通过自定义规则，开发者可以轻松添加对新语言的支持。这些规则通常包括关键字、注释、...

    .net 语法着色控件 支持目前主流的大多数编程语言

    `Fireball.SyntaxDocument.dll`专注于处理和解析代码文档，确保语法着色的正确执行。 另外，像`FreeImage.dll`这样的库，可能用于处理代码编辑器中的图像显示，比如在可视化编程或者代码示例中显示图形。`Fireball....

    使用treesitter为VSCode准确的语法着色

    正则表达式虽然适用于简单的模式匹配，但在处理复杂语法结构时往往力不从心，导致语法高亮可能出现错误或不准确。`tree-sitter`通过解析代码生成AST，可以更准确地识别代码结构，提供更为精细的语法着色方案。 首先...

    SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色

    代码语法着色的实现，能够使得代码阅读起来更加直观，提高文章的可读性和美感。本文将介绍如何使用SyntaxHighlighter和CKEditor插件，来实现代码语法高亮的功能，以便于在网页上插入代码时可以具有良好的展示效果。 ...

    基于java的Eclipse的语法着色插件 Colorer Take.zip

    在Eclipse中，语法着色是提高代码可读性和开发效率的重要特性，它通过不同的颜色来区分代码的不同元素，如关键字、变量、字符串等。"Colorer Take"是一款基于Java的Eclipse插件，专门用于增强Eclipse的语法着色功能...

    jQuery语法高亮插件支持各种程序源代码语法着色加亮

    jQuery语法高亮插件是一种能够对网页上展示的程序源代码进行语法着色加亮的工具。通过这种方式，代码块在视觉上更为突出，便于阅读和理解。这种语法高亮功能通常用于技术文档、论坛、在线教学平台，以及编程相关的...

    xmlbuddy_2.0.9（eclipse插件 XMLBuddy 编辑xml文件）+ lvan110 上传了资源 EclipseColorer-take5_0.8.0（eclipse插件上百种类型的文件按语法着色 ）

    XMLBuddy和EclipseColorer是两个非常实用的Eclipse集成开发环境(IDE)插件，专注于提升XML文件编辑和代码高亮显示的体验。在本文中，我们将深入探讨这两个插件的功能、用途以及如何安装和使用它们。 首先，XMLBuddy...

    WLW插入着色代码块插件CNBlogs.CodeHighlighter

    此插件支持多种编程语言，包括但不限于C#、Java、Python、JavaScript等，能够自动识别语言类型并应用相应的语法高亮样式。这不仅提高了代码的视觉吸引力，也有助于读者更轻松地理解代码逻辑。 使用CNBlogs....

    prettiermarkdown解析在markdown文件中的代码块并高亮着色代码

    Prettier本身并不直接支持代码高亮，但通过与`prettier-markdown`结合，可以在解析Markdown文件时对代码块进行语法高亮。这个过程通常涉及到以下步骤： 1. **解析Markdown**：`prettier-markdown`首先会解析...

    js动态为代码着色显示行号

    在本篇文章中，我们了解到如何利用Javascript在网页上实现代码的动态着色以及行号显示功能。文章中介绍的技术点主要涉及以下几个方面： 1. Javascript插件的使用：通过引入外部的Javascript插件，使得在不离开...

    代码生成文档高亮显示工具

    这个过程在技术领域被称为代码高亮（Syntax Highlighting）或语法着色，是提升代码可读性和美观度的重要手段。通过将源代码转换为HTML格式，用户可以在网页浏览器中方便地查看和分享代码，同时保持清晰的结构和视觉...

    ICSharpCode.TextEditor_2.2实现语法加亮的编辑器（含源代码）

    ICSharpCode.TextEditor_2.2的行号功能可以实时显示每一行的编号，这对于调试和查找错误非常有帮助。此功能的实现主要通过维护一个独立的缓冲区，用于绘制行号，然后将其与实际的文本内容一起显示在界面上。 除了...

    json着色工具(支持远程调用，本地json字符串)

    这意味着用户可以直接将本地的JSON文件拖放到工具中，或者复制粘贴JSON文本，工具会自动进行格式化并着色显示，帮助开发者快速检查JSON数据的正确性和完整性。 另一个重要功能是“支持URL远程调用”。这使得开发者...

    language-javascript-semantic, 面向 Atom的JavaScript语义高亮.zip

    "language-javascript-semantic" 是一个面向Atom文本编辑器的插件，其目的是提供JavaScript的语义高亮，这意味着它不仅仅根据基本的语法结构进行高亮，还会考虑代码的含义和上下文。 Atom是一款开源的、可高度...

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

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

    着色器：着色器

    着色器的应用非常广泛，从简单的2D游戏到复杂的3D模拟，再到数据可视化和艺术创作。通过掌握着色器，开发者可以创造出逼真的视觉效果，实现动态阴影、反射、折射、雾化等特效，甚至可以进行物理模拟。 总的来说，...

    myeclipse编辑js的插件

    2. **语法高亮与格式化**：该插件能对JavaScript代码进行语法着色，使代码更易读。同时，它还具备代码格式化功能，可按照设定的规则整理代码结构。 3. **错误检查与警告**：JSEclipse能实时检查代码中的语法错误和...

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