Question

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

到目前为止的Javascript：

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

Answer 1

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

但是这个想法是，因为你不能使用普通的textarea来为代码着色，因为该元素不支持着色，所以我们的想法是使用<textarea>来输入代码然后在<div>中显示已解析的代码。

我过去使用的其中一个图书馆是http://jsBeautifier.org/

你可以在那里进行测试并在你的应用程序中使用库（并使用默认选项，因为那里有＆＃34;百万＆＃34;）

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

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

你可以看到他们的主页源代码也可以与他们的＆＃34; cazilion＆＃34;选项。

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

Answer 2

解决方案是编写一个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"));

我如何编纂＆＃34;和＃34;美化＆＃34;码？

2 个答案: