首頁 > 其他

工作之餘——看js代碼（HTML Beautify）

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

項目突然經update後就不能build了。鬱悶。

問了老大，說是==

 

於是無聊的我看了http://www.cnblogs.com/sanshi的部落格

覺得cnblogs這個blog不錯。。。。

希望csdn能後繼續努力。

 

 

在http://www.cnblogs.com/sanshi上發現了html beauty。下來自己研究了下。。。

研究了一半，老大說要安裝新的server。。。。

等中午吃飯的時候再看下。。。。

具體代碼如下。還是比較簡單。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>自己實現HTML-Beautify</title>
  
    <script src="jquery-1.3.2.js" type="text/javascript"></script>

 
    <script type="text/javascript">

        見 <body>
     
    </script>

</head>
<body>
    <h1>
        自己實現HTML-Beautify</h1>
    <textarea style="width: 600px; height: 300px;" id="content">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head><title>Untitled Page</title></head><body><h1>Page Header</h1><ul><li>list item 1</li><li>list item 2</li><li>list item 3</li><li>list item 4</li></ul></body></html>
    </textarea>
    <br />
    <input type="button" id="format" value="Format" />
    <br />
    <br />
    學習HTML-Beautify.js之後，我們發現使用JavaScript對HTML進行解析也並不神秘， 首先是逐字元進行分析，從中提取標記（Token），在HTML只存在兩種類型的標記-標籤和本文，
    然後對這些Token進行文法分析，主要是縮排量是多少。
    <br />
    在有這些基本概念後，今天我們就自己來實現這個小程式：
    <pre>
    // 我在Html Beautifier的一個簡單嘗試
    function HtmlBeautify(source, indent_value) {
        this.source = source;
        this.indent_value = indent_value;
        this.result = "";

        this.parse();
    }

    // 分析併產生輸出到this.result
    HtmlBeautify.prototype.parse = function() {
        var that = this;
        // 當前分析到哪個字元，當前標記值，標記類型，輸出數組，縮排層級
        var pos = 0, token_value = "", token_type = "",
        output = [], indent_level = 0;

        // 把這些標籤作為Single Tag
        var single_token = "br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed".split(',');

        // 輸出當前標記（換行+縮排量+標記值）
        function outputToken() {
            output.push("/n");
            for (var i = 0; i &lt; indent_level; i++) {
                output.push(that.indent_value);
            }
            output.push(token_value);
        }

        // 擷取下一個標記（首先擷取本文，如果本文為空白則擷取標籤）
        function nextToken() {
            var token_value_array = [], val = "";

            // "&lt;"之前的所有內容作為本文標籤
            while ((val = that.source[pos]) !== "&lt;") {
                if (pos &gt;= that.source.length) {
                    token_type = "END";
                    return;
                }

                token_value_array.push(val);
                pos++;
            }

            token_value = $.trim(token_value_array.join(""));
            if (token_value === "") {
                // 如果本文標記為空白，則擷取標籤標記
                nextTokenTag();
            } else {
                token_type = "CONTENT";
            }
        }

        function nextTokenTag() {
            var token_value_array = [], val = "", tagName = "";

            // 擷取標籤標記，直到遇到"&gt;"
            do {
                val = that.source[pos];
                token_value_array.push(val);
                pos++;
            } while (val !== "&gt;");

            token_value = $.trim(token_value_array.join(""));
            // 當前標籤的名稱（小寫）
            tagName = getTagName();

            if (token_value[1] === "/") {
                // token_value以"&lt;/"開始，則認為是結束標籤
                token_type = "END_TAG";
            } else if (contains(tagName, single_token) || token_value[token_value.length - 2] === "/") {
                // 如果標籤在single_token或者token_value以"/&gt;"結尾，則認為是獨立標籤
                // 這種判斷沒有考慮這種情況："&lt;br&gt;&lt;/br&gt;"
                token_type = "SINGLE_TAG";
            } else {
                token_type = "START_TAG";
            }
        }

        function getTagName() {
            var tagName = token_value.substr(1, token_value.length - 2);
            var spaceIndex = tagName.indexOf(" ");
            if (spaceIndex &gt; 0) {
                tagName = tagName.substr(0, spaceIndex);
            }
            return tagName.toLowerCase();
        }

        function contains(val, array) {
            for (var i = 0; i &lt; array.length; i++) {
                if (val === array[i]) {
                    return true;
                }
            }
            return false;
        }

        // parse的主體函數，迴圈擷取下一個Token
        while (true) {
            nextToken();
           
            // 當前Token為結束標記
            if (token_type === "END") {
                break;
            }

            switch (token_type) {
                case "START_TAG":
                    // 我們對縮排的控制非常簡單，開始標籤後縮排一個單位
                    outputToken();
                    indent_level++;
                    break;
                case "END_TAG":
                    // 結束標籤前減少一個單位縮排
                    indent_level--;
                    outputToken();
                    break;
                case "SINGLE_TAG":
                case "CONTENT":
                    outputToken();
                    break;
            }
        }
        // 去除最前面的"/n"
        this.result = output.join("").substr(1);
    };

    $(function() {
        $("#format").click(function() {

            // 執行個體化HtmlBeautify，傳遞需要解析的HTML片段和縮排字串
            var beautify = new HtmlBeautify($("#content").val(), "    ");
            $("#content").val(beautify.result);

        });
    });
    </pre>
</body>
</html>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More