牛人写的：格式化混排的JS代码的JS

最新推荐文章于 2024-03-15 09:48:19 发布
转载 最新推荐文章于 2024-03-15 09:48:19 发布 · 691 阅读 · 0
文章标签：

#function #delete #class #generator #null #object

本文介绍了一个用于格式化JavaScript代码的实用工具。该工具能够处理包括注释、关键字和缩进在内的多种元素，并提供压缩代码的功能。通过简单的API调用即可实现对文本区域或输入字段内的JavaScript代码进行美化或压缩。
<HTML><HEAD><TITLE>Format</TITLE>
<META content="MSHTML 6.00.2800.1528" name=GENERATOR>
<META content="" name=Author>
<META content="" name=Keywords>
<META content="" name=Description></HEAD>
<BODY>
<SCRIPT language=JavaScript>
<!--
/**//**//**//** 
**    ==================================================================================================  
**    类名：CLASS_FORMATER
**    功能：JS格式化  
**    示例：  
    ---------------------------------------------------------------------------------------------------  
  
            var xx        = new CLASS_FORMATER(code);            

            document.getElementById("display").innerHTML = xx.format(); 
  
    ---------------------------------------------------------------------------------------------------  
**    作者：ttyp  
**    邮件：ttyp@21cn.com  
**    日期：2006-5-21  
**    版本：0.1
**    ==================================================================================================  
**/  

function CLASS_FORMAT(code){
    //哈希表类
    function Hashtable(){
        this._hash        = new Object();
        this.add        = function(key,value){
                            if(typeof(key)!="undefined"){
                                if(this.contains(key)==false){
                                    this._hash[key]=typeof(value)=="undefined"?null:value;
                                    return true;
                                } else {
                                    return false;
                                }
                            } else {
                                return false;
                            }
                        }
        this.remove        = function(key){delete this._hash[key];}
        this.count        = function(){var i=0;for(var k in this._hash){i++;} return i;}
        this.items        = function(key){return this._hash[key];}
        this.contains    = function(key){return typeof(this._hash[key])!="undefined";}
        this.clear        = function(){for(var k in this._hash){delete this._hash[k];}}

    }

    this._caseSensitive = true;

    //字符串转换为哈希表
    this.str2hashtable = function(key,cs){
        
        var _key    = key.split(/,/g);
        var _hash    = new Hashtable(); 
        var _cs        = true;

    
        if(typeof(cs)=="undefined"||cs==null){
            _cs = this._caseSensitive;
        } else {
            _cs = cs;
        }

        for(var i in _key){
            if(_cs){
                _hash.add(_key[i]);
            } else {
                _hash.add((_key[i]+"").toLowerCase());
            }

        }
        return _hash;
    }

    //获得需要转换的代码
    this._codetxt        = code;

    if(typeof(syntax)=="undefined"){
        syntax = "";
    }

    this._deleteComment = false;
    //是否大小写敏感
    this._caseSensitive = true;
    //可以后面加块语句的关键字
    this._blockElement  = this.str2hashtable("switch,if,while,try,finally");
    //是函数申明
    this._function      = this.str2hashtable("function");
    //本行括号内分号不做换行
    this._isFor            = "for";

    this._choiceElement = this.str2hashtable("else,catch");

    this._beginBlock    = "{";
    this._endBlock      = "}";
    
    this._singleEyeElement = this.str2hashtable("var,new,return,else,delete,in,case");
    //得到分割字符
    this._wordDelimiters= "　 ,.?!;://<>(){}[]"' =+-|*%@#$^&";
    //引用字符
    this._quotation     = this.str2hashtable("",'");
    //行注释字符
    this._lineComment   = "//";
    //转义字符
    this._escape        = "/";
    //多行引用开始
    this._commentOn        = "/*";
    //多行引用结束
    this._commentOff    = "*/";
    //行结束词
    this._rowEnd        = ";";

    this._in            = "in";


    this.isCompress        = false;
    this.style            = 0;

    this._tabNum        = 0;


    this.format = function() {
        var codeArr        = new Array();
        var word_index    = 0;
        var htmlTxt        = new Array();

        if(this.isCompress){
            this._deleteComment = true;
        }


        //得到分割字符数组(分词)
        for (var i = 0; i < this._codetxt.length; i++) {       
            if (this._wordDelimiters.indexOf(this._codetxt.charAt(i)) == -1) {        //找不到关键字
                if (codeArr[word_index] == null || typeof(codeArr[word_index]) == 'undefined') {
                    codeArr[word_index] = "";
                }
                codeArr[word_index] += this._codetxt.charAt(i);
            } else {
                if (typeof(codeArr[word_index]) != 'undefined' && codeArr[word_index].length > 0)
                    word_index++;
                codeArr[word_index++] = this._codetxt.charAt(i);                
            } 
        }


        var quote_opened                = false;    //引用标记
        var slash_star_comment_opened   = false;    //多行注释标记
        var slash_slash_comment_opened  = false;    //单行注释标记
        var line_num                    = 1;        //行号
        var quote_char                  = "";       //引用标记类型

        var function_opened             = false;

        var bracket_open                = false;
        var for_open                    = false;

        //按分割字，分块显示
        for (var i=0; i <=word_index; i++){            
            //处理空行（由于转义带来）
            if(typeof(codeArr[i])=="undefined"||codeArr[i].length==0){
                continue;
            } else if(codeArr[i]==" "||codeArr[i]==" "){
                if(slash_slash_comment_opened||slash_star_comment_opened){
                    if(!this._deleteComment){
                        htmlTxt[htmlTxt.length] = codeArr[i];
                    }
                }
                if(quote_opened){
                        htmlTxt[htmlTxt.length] = codeArr[i];                    
                }
            } else if(codeArr[i]==" "){
            //处理换行
            } else if (codeArr[i] == " "){                                                                    
                slash_slash_comment_opened = false;    
                quote_opened    = false;
                line_num++;
                if(!this.isCompress){
                    htmlTxt[htmlTxt.length] = " "+ this.getIdent();    
                }
            //处理function里的参数标记
            } else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&this.isFunction(codeArr[i])){
                htmlTxt[htmlTxt.length] = codeArr[i]  + " ";
                function_opened = true;
            } else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]==this._isFor){
                htmlTxt[htmlTxt.length] = codeArr[i];
                for_open = true;
            } else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]=="("){
                bracket_open    = true;
                htmlTxt[htmlTxt.length] = codeArr[i];
            } else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]==")"){
                bracket_open    = false;
                htmlTxt[htmlTxt.length] = codeArr[i];
            } else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]==this._rowEnd){
                if(!this.isCompress){
                    if(!for_open){
                        if(i<word_index&&(codeArr[i+1]!=" "&&codeArr[i+1]!=" ")){                            
                            htmlTxt[htmlTxt.length] = codeArr[i] + " " + this.getIdent();
                        }else{
                            htmlTxt[htmlTxt.length] = codeArr[i] + this.getIdent();
                        }
                    }else{
                        htmlTxt[htmlTxt.length] = codeArr[i];                    
                    }
                }else{
                    htmlTxt[htmlTxt.length] = codeArr[i];
                }
            } else if(!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]==this._beginBlock){
                for_open    = false;
                if(!this.isCompress){
                    switch(this.style){
                        case 0:
                            this._tabNum++;
                            htmlTxt[htmlTxt.length] = codeArr[i] + " " + this.getIdent();
                            break;
                        case 1:
                            htmlTxt[htmlTxt.length] = " " + this.getIdent();
                            this._tabNum++;
                            htmlTxt[htmlTxt.length] = codeArr[i] + " "+ this.getIdent();
                            break;
                        default:
                            this._tabNum++;
                            htmlTxt[htmlTxt.length] = codeArr[i];
                            break;
                            
                    }
                }else{
                    htmlTxt[htmlTxt.length] = codeArr[i];
                }

            } else if(!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened &&codeArr[i]==this._endBlock){
                if(!this.isCompress){
                    this._tabNum--;
                    if(i<word_index&&codeArr[i+1]!=this._rowEnd){
                        htmlTxt[htmlTxt.length] = " " + this.getIdent() + codeArr[i];
                    }else{
                        htmlTxt[htmlTxt.length] = " " + this.getIdent() + codeArr[i];
                    }
                }else{
                    if(i<word_index&&codeArr[i+1]!=this._rowEnd){
                        htmlTxt[htmlTxt.length] = codeArr[i] + this._rowEnd;
                    }else{
                        htmlTxt[htmlTxt.length] = codeArr[i];
                    }
                }
            //处理关键字
            } else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened && this.isBlockElement(codeArr[i])){     
                htmlTxt[htmlTxt.length] = codeArr[i];
            //处理内置对象(后面加一个空格)
            } else if (!slash_slash_comment_opened&&!slash_star_comment_opened && !quote_opened && this.isSingleEyeElement(codeArr[i])){    
                if(codeArr[i]==this._in){
                    htmlTxt[htmlTxt.length] = " ";
                }
                htmlTxt[htmlTxt.length] = codeArr[i] + " ";
            //处理双引号（引号前不能为转义字符）    
            } else if (!slash_star_comment_opened&&!slash_slash_comment_opened&&this._quotation.contains(codeArr[i])){                                                    
                if (quote_opened){
                    //是相应的引号
                    if(quote_char==codeArr[i]){
                        htmlTxt[htmlTxt.length] = codeArr[i];                    
                        quote_opened    = false;
                        quote_char      = "";
                    } else {
                        htmlTxt[htmlTxt.length] = codeArr[i];            
                    }
                } else {
                    htmlTxt[htmlTxt.length] =  codeArr[i];
                    quote_opened    = true;
                    quote_char        = codeArr[i];
                }                    
            //处理转义字符
            } else if(codeArr[i] == this._escape){    
                htmlTxt[htmlTxt.length] = codeArr[i]; 
                if(i<word_index-1){
                    if(codeArr[i+1].charCodeAt(0)>=32&&codeArr[i+1].charCodeAt(0)<=127){
                        htmlTxt[htmlTxt.length] = codeArr[i+1].substr(0,1);
                        htmlTxt[htmlTxt.length] = codeArr[i+1].substr(1);
                        i=i+1;
                    }
                }            
            //处理多行注释的开始
            } else if (!slash_slash_comment_opened && !slash_star_comment_opened&&!quote_opened&&this.isStartWith(this._commentOn,codeArr,i)){                                             
                slash_star_comment_opened = true;
                if(!this._deleteComment){
                    htmlTxt[htmlTxt.length] = this._commentOn;
                }
                i = i + this.getSkipLength(this._commentOn);    
            //处理单行注释
            } else if (!slash_slash_comment_opened && !slash_star_comment_opened&&!quote_opened&&this.isStartWith(this._lineComment,codeArr,i)){                                                
                slash_slash_comment_opened = true;
                if(!this._deleteComment){
                    htmlTxt[htmlTxt.length] =  this._lineComment;
                }
                i = i + this.getSkipLength(this._lineComment);    
            //处理忽略词
            } else if (!slash_slash_comment_opened && !slash_star_comment_opened&&!quote_opened&&this.isStartWith(this._ignore,codeArr,i)){                                                
                slash_slash_comment_opened = true;
                htmlTxt[htmlTxt.length] = this._ignore;
                i = i + this.getSkipLength(this._ignore);                    
            //处理多行注释结束    
            } else if (!quote_opened&&!slash_slash_comment_opened&&this.isStartWith(this._commentOff,codeArr,i)){                                
                if (slash_star_comment_opened) {
                    slash_star_comment_opened = false;
                    if(!this._deleteComment){
                        htmlTxt[htmlTxt.length] =  this._commentOff;
                    }
                    i = i + this.getSkipLength(this._commentOff);        
                }
            } else {
                //不是在字符串中
                if(!quote_opened){
                    //如果不是在注释重
                    if(!slash_slash_comment_opened && !slash_star_comment_opened){    
                            htmlTxt[htmlTxt.length] = codeArr[i];                        
                    //注释中                            
                    }else{
                        if(!this._deleteComment){
                            htmlTxt[htmlTxt.length] = codeArr[i];
                        }
                    }
                }else{
                            htmlTxt[htmlTxt.length] = codeArr[i];
                }
            }
            
        }

        return htmlTxt.join("");
    }

    this.isStartWith = function(str,code,index){

        if(typeof(str)!="undefined"&&str.length>0){        
            var cc = new Array();            
            for(var i=index;i<index+str.length;i++){
                cc[cc.length] = code[i];
            }
            var c = cc.join("");
            if(this._caseSensitive){
                if(str.length>=code[index].length&&c.indexOf(str)==0){
                    return true;
                }
            }else{
                if(str.length>=code[index].length&&c.toLowerCase().indexOf(str.toLowerCase())==0){
                    return true;
                }
            }
            return false;

        } else {
            return false;
        }
    }

    this.isFunction = function(val){
        return this._function.contains(this._caseSensitive?val:val.toLowerCase());
    }
    
    this.isBlockElement = function(val) {        
        return this._blockElement.contains(this._caseSensitive?val:val.toLowerCase());
    }

    this.isChoiceElement = function(val) {        
        return this._choiceElement.contains(this._caseSensitive?val:val.toLowerCase());
    }

    this.isSingleEyeElement = function(val) {
        return this._singleEyeElement.contains(this._caseSensitive?val:val.toLowerCase());
    }

    this.isNextElement = function(from,word){
        for(var i=from;i<word.length;i++){
            if(word[i]!=" "&&word[i]!=" "&&word[i]!=" "&&word[i]!=" "){                
                return this.isChoiceElement(word[i]);
            }
        }
        return false;
    }

    this.getSkipLength = function(val){    
        var count = 0;
        for(var i=0;i<val.length;i++){
            if(this._wordDelimiters.indexOf(val.charAt(i))>=0){
                count++;
            }
        }
        if(count>0){
            count=count-1;
        }
        return count;
    }

    this.getIdent=function(){
        var n = [];
        for(var i=0;i<this._tabNum;i++){
            n[n.length] = " ";
        }
        return n.join("");
    }
}

function doformat(o){
    var htmltxt = "";

    if (o == null){
        alert("domNode is null!");
        return;
    }

    var _codetxt = "";
    
    if(typeof(o)=="object"){
        switch(o.tagName){
            case "TEXTAREA":
            case "INPUT":
                _codetxt = o.value;
                break;
            case "DIV":
            case "SPAN":
                _codetxt = o.innerText;
                break;
            default:
                _codetxt = o.innerHTML;
                break;
        }
    }else{
        _codetxt = o;
    }

    var _syn = new CLASS_FORMAT(_codetxt);
    htmltxt = _syn.format();
    return  htmltxt;
}


function go()
{
    var code    = document.getElementById("code").value;
    var xx      = new CLASS_FORMAT(code);    
    var a       = new Date();

    if(document.getElementById('cboOperate').selectedIndex==1){
        xx.isCompress=true;
    }else{
        xx.style = parseInt(document.getElementById('cboStyle').value);
    }
    document.getElementById("display").value = xx.format();
    alert("共花：" + (new Date().getTime()-a.getTime()) + "ms");
}
//-->
</SCRIPT>
<TEXTAREA id=code rows=12 cols=100>
/*
这个是一个类
*/


function    xx   (num,str){//说明
var a = num;this.aa = a;
this.bb = function(){alert(str);}
this.cc = function(){for(var i=0;i<10;i++){document.title=i;}}};

xx.prototype.dd= function(){alert("d  d        kd");}

var a = new xx(100,"hello"),b=new xx(0,"ttyp");
if(1>2)  {   alert();
 }
 else {
 alert(" hell ");
 }

a.bb();
b.dd();
alert(a.aa);

</TEXTAREA> <BR>
<select id="cboOperate" onchange="if(this.selectedIndex==1)document.getElementById('cboStyle').disabled=true;else document.getElementById('cboStyle').disabled=false;">
    <option value="0">格式化</option>
    <option value="1">压缩</option>
</select>
<select id="cboStyle">
    <option value="0">经典</option>
    <option value="1">微软</option>
</select>
<INPUT onclick=go() type=button value=go><br>
<textarea id=display rows=12 cols=100>
</textarea>
</BODY></HTML>
skynice
关注
JS和Html格式化工具，附源码
08-20
JS和Html格式化工具，附源码
JS-HTML格式化工具代码，web源码版
11-15
JS-HTML格式化工具代码，web版，可以直接用浏览器打开运行，可自定义缩进，可以进行js，css格式化，还有进行js，css压缩
js格式化工具
03-05
js格式化，有两个哦， 博文链接：https://ruyuntao.iteye.com/blog/181723
[转]JavaScript格式化代码程序
heiyeluren的blog（黑夜路人的开源世界）
12-13 3745
 发现一个不错的JavaScript写的格式JavaScript代码的程序，能够压缩代码，也能够格式化，功能不错。 HTML>HEAD>TITLE>FormatTITLE>META content="MSHTML 6.00.2800.1528" name=GENERATOR>META content="" name=Author>META content="" name=Keywo
JavaScript的js文件压缩和格式化工具
我是谁的专栏
12-04 1613
JavaScriptcompressor.com这个网站可是大名鼎鼎啊。以前在找到过压缩 Javascript 代码的程序，一直在用，感觉效果不错。域名是： http://javascriptcompressor.com/ 它有几项功能： 在线压缩 Javascript 源码可以分不同的压缩级别；比如，一般情况下，即缺省情况，它只是把空格、换行、多余的注释等等清理掉，如果选择了“Base62
doctor-jones: 中西文混排格式化工具集解析
4. 代码文件格式化工具：特别为开发者设计，可以格式化.js、.ts、.jsx、.tsx、.vue等文件中的字符串，使得代码中的文本内容更加规范和美观。 5. Chrome插件：用户可以在Chrome浏览器中安装doctor-jones插件，用于...
Jigsaw: 探索JavaScript混排布局技术
资源摘要信息:"Jigsaw:js混排布局" 知识点概述： Jigsaw项目是使用JavaScript实现的动态布局框架，它允许开发者创建一个能够自动根据屏幕大小和内容的变动而进行元素排列和位置调整的混排布局。这种布局通常用于...
图像语义分割技术：破解图文混排页面的数据提取.pdf
最新发布
04-23
无论是数据科学领域的数据分析与可视化，还是 Web 开发中的网站搭建，Python 都能游刃有余。无论你是编程小白，还是想进阶的老手，这篇博文都能让你收获满满，快一起踏上 Python 编程的奇妙之旅！
《Android开发视频教程》第九集：Button图文混排的按钮.zip
07-25
《Android开发视频教程》第九集：Button图文混排的按钮.zip
混排js焦点图.rar_混排js焦点图
09-24
在本案例中，"闻图文混排js焦点图"是一款专门实现这一效果的JavaScript代码库，它带有缩略图和索引按钮功能，为用户提供了更直观的交互体验。 焦点图的核心功能在于切换显示不同的内容块，而"混排"则意味着这些内容...
JS格式化工具
07-18
1.格式化JS工具，支持语法高亮显示。 2.动态输入框，调整语法。
JS格式化工具 JS编辑格式化
11-03
JS格式化工具 非常方便的JS内容格式化工具
JS-HTML-Format(JS及HTML代码格式化工具集合)
04-15
自己收集整理了一些轻巧的Js,Html代码格式化工具
JS代码格式化（HTML代码）
09-27
JS代码格式化（HTML代码），非常有用，在开发网站时，对乱乱的JS整理一下，不错。
js 格式化工具
weixin_30364325的博客
04-22 153
<html> <head> <title>JS格式化工具</title> <metahttp-equiv="content-type"content="text/html;charset=gb2312"/> <style> *{padding:0px;margin:5px;font-size:1...
【亲测免费】 JsFormat: 快速、便捷的 JavaScript 代码格式化工具
gitblog_00006的博客
03-15 1777
JsFormat: 快速、便捷的 JavaScript 代码格式化工具 JsFormat 是一款高效、轻量级的 JavaScript 代码格式化工具。它允许开发者快速地将代码整理得更加规范、易于阅读。 应用场景与功能介绍 自动格式化代码：只需一键操作，即可将你的 JavaScript 代码按照预设规则进行美化。 自定义配置：你可以根据自己的喜好调整代码格式化的具体规则，包括缩进风格、空格数量等。...
JS、HTML和CSS在线格式化工具
zf900901298的专栏
11-27 1137
通常情况下，我们从某网站下载某个工程，打开的代码都是压缩的，而且.js文件和HTML页面都是凌乱不堪的。下面我给大家推荐几款好用的格式化软件，可是都是英文的，但是比起中文的格式化软件，我们还是佩服老外呀！ 1.CSS 在线格式化工具：code beautifier 2.JS和HTML在线格式化工具：jsbeautifier
谁可以推荐一款js格式化的工具？
最爱pupi
02-07 549
最近碰到了一个问题，需要给FCKEditor增加视频上传功能，想要好好研究一下fckeditor的代码。可是fckeditor的作者给debug他们的代码增加了一个小门槛，有两个关键的js文件，fckeditorcode_gecko.js和fckeditorcode_ie.js被压缩了。可读性和可debug性都非常差 。 也找了几个js的格式化工具，如Javascript code impr...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值