如何“编码”和“美化”代码？答案

【问题标题】：How do I "codify" and "beautify" code?如何“编码”和“美化”代码？
【发布时间】：2016-01-04 23:49:27
【问题描述】：

我创建了一些 javascript 代码，可以将代码转换为文本（编码），因此人们可以复制和粘贴显示的代码。我想知道的是，如何美化代码本身（启用块级别、缩进等）？

到目前为止的Javascript：

$(".codify").each(function(){
    var text = $(this).html();
    $(this).html(text.replace('<', '&lt;').replace('>', '&gt;').replace("/","&#47;").replace("/n", "<br />")); 
});

【问题讨论】：

只需使用 html <pre> 标记 ;) 或使用 &nbsp; 用于空格，并（查找）用于制表符
我认为唯一的问题是现在将显示任何空白空间。有没有办法不这样？
啊但是你不仅要编码，还要美化代码？在这种情况下，您应该编写一种了解块级别等的解析器。但这有点超出您的问题范围。
我会的，哇，这里的人太野蛮了。已经投反对票和 2 票接近！
是的，你的问题有点太宽泛了。到目前为止，唯一能帮助您的方法是编写一个如何编写解析器的指南。如果您再详细一点，并针对特定问题写一个更具体的问题，那么您会得到很多帮助。首先从你的解析器的设计开始，然后展示你做了什么，如果你发现了一个你不能克服的障碍，那就回来看看。您会惊讶于这里的人实际上是多么善良；）

标签： javascript jquery

【解决方案1】：

一种解决方案是编写一个 JavaScript 函数来循环遍历一个 jQuery 元素列表，输出缩进的 HTML，例如：

function jQueryToHTML(dom, indent) {
    var code = "", indent = (indent || "") + "\t";
    dom.each(function(){
        var el = $(this);
        if(this.nodeType == 3) {
            code += indent + this.textContent;
        } else {
            code += indent + el.prop("outerHTML").match(/^<[a-zA-Z]+(>|.*?[^?]>)/g)[0] + "\n";
            code += jQueryToHTML(el.contents(), indent);
            code += indent + "</" + el.prop("tagName").toLowerCase() + ">" + "\n";
        }
    });
    return code;
}

indentedCode = jQueryToHTML($("#theElement"));

【讨论】：

【解决方案2】：

通常我们使用 javascript 插件，您可以在 StackOverflow 中找到很多关于此主题的问题，like this 和 this。

但想法是，由于您不能使用普通的textarea 为代码着色，因为该元素不支持着色，所以想法是使用<textarea> 输入代码然后呈现解析的代码在<div>。

我过去使用过的库之一是http://jsBeautifier.org/

您可以在那里对其进行测试并在您的应用程序中使用该库，例如（并使用默认选项，因为它们有“百万”个）：

var txt = $("textarea").val(),
    output = js_beautify(txt);

$("div.beautified").html(output);

您可以查看他们的主页源代码，也可以使用他们的“cazilion”选项。

所有其他答案都有其他几个选项，请选择最适合您的应用程序的选项！

【讨论】：