如何在JavaScript中格式化/整理/美化

如何在JavaScript中格式化/整理/美化HTML？ I have tried doing a search/replace for angle brackets (<, >) and indenting accordingly.但它當然不會考慮HTML中的JS或CSS等。如何在JavaScript中格式化/整理/美化

我想這樣做的原因是我做了一個內容編輯器（CMS），它具有所見即所得和源代碼視圖。所見即所得編輯器編寫的代碼通常是單行的問題。所以我想要一個JavaScript，可以根據需要將其格式化爲更具可讀性的形式。

這裏是我到目前爲止有：

function getIndent(level) { 
    var result = '', 
     i = level * 4; 
    if (level < 0) { 
     throw "Level is below 0"; 
    } 
    while (i--) { 
     result += ' '; 
    } 
    return result; 
} 

function style_html(html) { 
    html = html.trim(); 
    var result = '', 
     indentLevel = 0, 
     tokens = html.split(/</); 
    for (var i = 0, l = tokens.length; i < l; i++) { 
     var parts = tokens[i].split(/>/); 
     if (parts.length === 2) { 
      if (tokens[i][0] === '/') { 
       indentLevel--; 
      } 
      result += getIndent(indentLevel); 
      if (tokens[i][0] !== '/') { 
       indentLevel++; 
      } 

      if (i > 0) { 
       result += '<'; 
      } 

      result += parts[0].trim() + ">\n"; 
      if (parts[1].trim() !== '') { 
       result += getIndent(indentLevel) + parts[1].trim().replace(/\s+/g, ' ') + "\n"; 
      } 

      if (parts[0].match(/^(img|hr|br)/)) { 
       indentLevel--; 
      } 
     } else { 
      result += getIndent(indentLevel) + parts[0] + "\n"; 
     } 
    } 
    return result; 
}

來源

2010-10-12 Petah

有時是最好的提問/回答是題外話。 – NilsB 2015-07-23 12:44:40

@NilsB垃圾這是關於主題，實際上它已被關閉作爲脫離主題，然後再次打開 – Petah 2015-07-23 20:34:49

[這裏是超簡單的HTML格式化在JavaScript]（https://jsfiddle.net/buksy/rxucg1gd/） – Buksy 2016-05-31 08:21:03

編寫html在一行上會更快地下載到瀏覽器，所以我不知道我會想它格式化。也許是格式化版本或優化版本的選項。

至於這個問題......你可以在完成如此多的動作之後做一個ajax調用，然後將代碼發送到服務器進行格式化並顯示在屏幕上的另一個框中。基本上它會是這個網站的實時版本，http://infohound.net/tidy/

來源

2010-10-20 11:55:43 Eric

是的，它會稍微快一點（比如0.0001秒）。但考慮到所見即所得編輯器旨在只知道一點關於HTML的客戶端，HTML格式使得它更容易很多。另外在將數據發送到服務器進行格式化方面，這遠非理想。 – Petah 2010-10-20 12:15:08

jQuery創建者John Resig寫了一個快速和輕量級的HTML parser in javascript。如果您正在尋找可以直接添加到CMS的解決方案，那麼您可以使用此解析器作爲基礎編寫一個簡單的美化程序。所有你需要做的就是再次輸出添加空格和換行的元素，只要你喜歡，使用內置的API：

HTMLParser(htmlString, { 
    start: function(tag, attrs, unary) {}, 
    end: function(tag) {}, 
    chars: function(text) {}, 
    comment: function(text) {} 
});

另外一個這種方法的好處是，你可以用同樣的HTMLParser閱讀HTML回到你的所見即所得模式，或者與用戶的HTML樹交互。 HTMLParser也提供了一個HTMLtoDOM方法。

來源

2010-10-21 16:37:00

我相信chrome和firebug的調試代碼顯示引擎都是用JS編寫的。雖然這可能比你想要搞的更重。

來源

2010-10-24 03:52:28

@lovasoa How to format/tidy/beautify in JavaScript是一個很好的解決方案。
堅如磐石，比vkBeautify甚至CodeMirror更好（很難使用AMD），很容易

<script src='http://lovasoa.github.io/tidy-html5/tidy.js'></script> 
<script> 
    options = { 
    "indent":"auto", 
    "indent-spaces":2, 
    "wrap":80, 
    "markup":true, 
    "output-xml":false, 
    "numeric-entities":true, 
    "quote-marks":true, 
    "quote-nbsp":false, 
    "show-body-only":true, 
    "quote-ampersand":false, 
    "break-before-br":true, 
    "uppercase-tags":false, 
    "uppercase-attributes":false, 
    "drop-font-tags":true, 
    "tidy-mark":false 
} 

var html = document.querySelector("body").outerHTML; 
var result = tidy_html5(html, options); 
console.log(result); 
</script>

來源

2015-05-16 21:08:17 rickdog

家http://www.htacg.org/tidy-html5/ --- github上https://github.com/htacg/ ---配置選項http://www.htacg.org/tidy- HTML5/quickref.html – rickdog 2015-05-16 21:14:43

-2

Resig的格式化失敗，一個很簡單的測試案例：

在http://ejohn.org/apps/htmlparser/

在在輸入框中輸入：

<script src="/files/htmlparser.js"></script> 
<script> 
var x = 1; 
</script>

輸出框呈現：

<script src="/files/htmlparser.js"></script> 
<script></script> 
var x = 1;

來源

2015-05-17 00:24:52 rickdog

而你失敗了，爲什麼downvote回答這個問題 – blex 2017-09-29 14:44:17

您還可以，如果你有node.js的安裝

運行npm install -g uglify-js在全球範圍內安裝uglifyjs，檢查here的文檔中使用的命令行工具。

然後你就可以uglify index.min.js -b -o index.js

來源

2015-05-22 06:47:44 nickleefly

，這是非常容易使用 – nickleefly 2015-12-02 08:46:59

我quess是因爲您的解決方案是發展論壇和瀏覽器裏面沒有運行時我認爲這是意圖。 – user766304 2017-08-31 10:49:03

如何在JavaScript中格式化/整理/美化

回答

相關問題