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

Question

如何在 JavaScript 中格式化/整理/美化 HTML？ I have tried doing a search/replace for angle brackets (<, >) and indenting accordingly. 当然不考虑HTML里面是JS还是CSS等。

我想这样做的原因是我制作了一个内容编辑器 (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;
}

Answer 1

我使用这种方法来格式化 HTML。很简单，但确实有效：

function format(html) {
    var tab = '\t';
    var result = '';
    var indent= '';

    html.split(/>\s*</).forEach(function(element) {
        if (element.match( /^\/\w/ )) {
            indent = indent.substring(tab.length);
        }

        result += indent + '<' + element + '>\r\n';

        if (element.match( /^<?\w[^>]*[^\/]$/ ) && !element.startsWith("input")  ) { 
            indent += tab;              
        }
    });

    return result.substring(1, result.length-3);
}

Answer 2

@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>

Answer 3

我需要类似的东西，这是我的解决方案，灵感来自 michal.jakubeczy 提供的方法。为了在<pre> 标签中保留格式，这有点复杂。希望这会对某人有所帮助。

function formatHTML(html) {
    var indent = '\n';
    var tab = '\t';
    var i = 0;
    var pre = [];

    html = html
        .replace(new RegExp('<pre>((.|\\t|\\n|\\r)+)?</pre>'), function (x) {
            pre.push({ indent: '', tag: x });
            return '<--TEMPPRE' + i++ + '/-->'
        })
        .replace(new RegExp('<[^<>]+>[^<]?', 'g'), function (x) {
            var ret;
            var tag = /<\/?([^\s/>]+)/.exec(x)[1];
            var p = new RegExp('<--TEMPPRE(\\d+)/-->').exec(x);

            if (p) 
                pre[p[1]].indent = indent;

            if (['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'menuitem', 'meta', 'param', 'source', 'track', 'wbr'].indexOf(tag) >= 0) // self closing tag
                ret = indent + x;
            else {
                if (x.indexOf('</') < 0) { //open tag
                    if (x.charAt(x.length - 1) !== '>')
                        ret = indent + x.substr(0, x.length - 1) + indent + tab + x.substr(x.length - 1, x.length);
                    else 
                        ret = indent + x;
                    !p && (indent += tab);
                }
                else {//close tag
                    indent = indent.substr(0, indent.length - 1);
                    if (x.charAt(x.length - 1) !== '>')
                        ret =  indent + x.substr(0, x.length - 1) + indent + x.substr(x.length - 1, x.length);
                    else
                        ret = indent + x;
                }
            }
            return ret;
        });

    for (i = pre.length; i--;) {
        html = html.replace('<--TEMPPRE' + i + '/-->', pre[i].tag.replace('<pre>', '<pre>\n').replace('</pre>', pre[i].indent + '</pre>'));
    }

    return html.charAt(0) === '\n' ? html.substr(1, html.length - 1) : html;
}

function unformatHTML(html) {
    var i = 0;
    var pre = [];

    html = html.replace(new RegExp('<pre>((.|\\t|\\n|\\r)+)?</pre>'), function (x) {
        pre.push(x);
        return '<--TEMPPRE' + i++ + '/-->'
    }).replace(/\n/g, '').replace(/\t/g, '');

    for (i = pre.length; i--;) {
        html = html.replace('<--TEMPPRE' + i + '/-->', pre[i]);
    }

    html = html.replace(new RegExp('<pre>\\n'), '<pre>').replace(new RegExp('\\n\\t*</pre>'), '</pre>');
    return html;
}

Answer 4

我发现 js-beautify 远远优于迄今为止发布的任何解决方案。

将script 添加到您的 lib 文件夹：

像往常一样带入标题：

<script src="libs/beautify.js"></script>

在页面上的任何位置定位代码（例如pre 或code 标记）并使用js_beautify 函数根据需要进行格式化：

$(".my_class").text(js_beautify($(".my_class").text()))

这将根据需要进行格式化。 repo 上提供了各种配置选项。

Answer 5

如果你安装了 node.js，你也可以使用命令行工具

运行npm install -g uglify-js 全局安装uglifyjs，查看here 获取文档。

那你可以uglify index.min.js -b -o index.js

Answer 6

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 读回您的 WYSIWYG，或者以其他方式与用户的 HTML 树进行交互。 HTMLParser 还预先构建了一个 HTMLtoDOM 方法。

Answer 7

我相信chrome和firebug的调试代码显示引擎都是用JS写的。不过，这可能比你真正想要的要重。

Answer 8

将html 写在一行上会更快地下载到浏览器，所以我不确定是否要对其进行格式化。也许是格式化版本或优化版本的选项。

至于问题...您可以在执行这么多操作后调用ajax 并将代码发送到服务器进行格式化并显示在屏幕上的不同框中。基本上它会是这个网站的实时版本，http://infohound.net/tidy/

Answer 9

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;