如何在JavaScript中进行格式化/整洁/美化
如何在JavaScript中格式化/整理/美化HTML？ 我曾尝试search/replace尖括号（ < ， > ）和相应的缩进。 但是当然在HTML里面不包括JS或者CSS等。
我想这样做的原因是我做了一个内容编辑器（CMS），它具有所见即所得和源代码视图。 所见即所得编辑器编写的代码通常是单行的问题。 所以我想要一个JavaScript，可以将其格式化为更可读的forms。
这里我到目前为止：
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; }
@lovasoa 如何在JavaScript中格式化/整洁/美化是一个很好的解决scheme。
坚如磐石，比vkBeautify甚至CodeMirror（难以使用AMD）好得多，而且非常容易
<script src='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>
如果您安装了node.js，也可以使用命令行工具
运行npm install -g uglify-js uglify -js来全局安装uglifyjs， 在这里查看文档。
那么你可以uglify index.min.js -b -o index.js
jQuery创build者John Resig 在javascript中编写了一个快速轻量级的HTMLparsing器 。 如果你正在寻找一个可以直接添加到你的CMS的解决scheme，那么你可以使用这个parsing器作为一个基础来编写一个简单的美化器。 所有你需要做的就是重新输出元素添加空格和换行符，只要你喜欢，使用内置的api：
HTMLParser(htmlString, { start: function(tag, attrs, unary) {}, end: function(tag) {}, chars: function(text) {}, comment: function(text) {} });
这种方法的一个额外的好处是你可以使用相同的HTMLParser来将HTML读回你的WYSIWYG，或者与用户的HTML树进行交互。 HTMLParser也提供了一个HTMLtoDOM方法。
我相信Chrome和Firebug的debugging代码显示引擎都是用JS编写的。 这可能比你想要搞乱更重的责任。
在一行写html会更快下载到浏览器，所以我不知道我会希望它的格式。 也许是格式化版本或优化版本的选项。
至于这个问题…你可以做这么多的行动之后，一个Ajax调用，并将代码发送到服务器进行格式化，并显示在屏幕上的另一个框。 基本上这将是这个网站的实时版本， http://infohound.net/tidy/
Resig的格式化程序失败了一个非常简单的testing用例：
在http://ejohn.org/apps/htmlparser/
在input框中input：
<script src="/files/htmlparser.js"></script> <script> var x = 1; </script>
输出框呈现：
<script src="/files/htmlparser.js"></script> <script></script> var x = 1;
