Question

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

我想这样做的原因是我制作了一个内容编辑器（CMS），其中包含WYSIWYG和源代码视图。 WYSIWYG编辑器编写的代码通常只有一行。所以我想要一个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

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

我使用这种方法来格式化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 3

如果您有node.js install

，也可以使用命令行工具

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

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

Answer 4

我需要类似的东西，这是我的解决方案，灵感来自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 5

我发现 js-beautify 远远优于目前发布的任何解决方案。

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

像往常一样带入内部标题：

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

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

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

这将根据需要进行格式化。存储库中提供了各种配置选项。

Answer 6

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

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

Answer 7

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 8

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

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;

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

9 个答案: