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

Question

如何在JavaScript中格式化/整理/美化HTML？我尝试过搜索/替换尖括号(<,>)并相应缩进.但当然,它不考虑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

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

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

将脚本添加到您的 lib 文件夹中：

像往常一样引入内部标头：

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

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

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

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

Answer 4

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

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