Javascript 简单HTML漂亮打印

这可能是徒劳的，但我个人认为这是可能的

我并不擅长Javascript或jQuery，但是我认为我已经找到了一种简单的方法来为html制作简单的预打印

此预打印中有四种类型的代码：

纯文本

元素

属性

价值观

为了将其样式化，我想将

元素

、

属性

和

值

与它们自己的类一起封装

---

我做这件事的第一种方法是存储每一种元素和属性（如下所示），然后用相应的跨距包装它们

$(document).ready(function() {

    $('pre.prettyprint.html').each(function() {

        $(this).css('white-space','pre-line');

        var code = $(this).html();

        var html-element = $(code).find('a, abbr, acronym, address, area, article, aside, audio, b, base, bdo, bdi, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, img, input, ins, kbd, keygen, label, legend, li, link, map, mark, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, ruby, samp, script, section, select, small, source, span, strong, summary, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, time, tr, track, tt, ul, var, video, wbr');

        var html-attribute = $(code).find('abbr, accept-charset, accept, accesskey, actionm, align, alink, alt, archive, axis, background, bgcolor, border, cellpadding, cellspacing, char, charoff, charset, checked, cite, class, classid, clear, code, codebase, codetype, color, cols, colspan, compact, content, coords, data, datetime, declare, defer, dir, disabled, enctype, face, for, frame, frameborder, headers, height, href, hreflang, hspace, http-equiv, id, ismap, label, lang, language, link, longdesc, marginheight, marginwidth, maxlength, media, method, multiple, name, nohref, noresize, noshade, nowrap, object, onblur, onchange,onclick ondblclick onfocus onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload, profile, prompt, readonly, rel, rev, rows, rowspan, rules, scheme, scope, scrolling, selected, shape, size, span, src, standby, start, style, summary, tabindex, target, text, title, type, usemap, valign, value, valuetype, version, vlink, vspace, width');

        var html-value = $(code).find(/* Any instance of text inbetween two parenthesis */);

        $(element).wrap('<span class="element" />');
        $(attribute).wrap('<span class="attribute" />');
        $(value).wrap('<span class="value" />');

        $(code).find('<').replaceWith('&lt');
        $(code).find('>').replaceWith('&gt');
    });
});

如果可能的话，这两种代码将如何编码

同样，您可以在这里将其视为JSFIDLE：

---

如果您在客户端执行此操作，并且您已经拥有DOM，那么您可以在执行时插入适当的标记来序列化它，而不是一次序列化整个子树，然后尝试重新分析它。

就我个人而言，我会用pre包装HTML，而不尝试进行任何漂亮的打印。google pretty print提供了大量用于进行代码格式化的库。只需使用pre包装HTML，就会自动生成“打印”代码

对于JavaScript，您可以使用JSON.stringify通过为嵌套结构传入大量空格来重新创建代码

JSON.stringify({ name: 'value' }, null, 2); //Change to four, for four spaces

---

不要太确定你已经掌握了所有的方法，只需在这么少的行中打印HTML。我花了一年多一点的时间和2000多行文字才真正搞定这个话题。您可以直接使用我的代码，也可以根据需要重构代码：

（及）

你可以在

之所以需要这么多代码，是因为人们似乎并不理解或重视文本节点的重要性。如果您在美化过程中添加新的和空的文本节点，那么您的操作是错误的，并且可能会损坏您的内容。此外，以另一种方式将其搞糟并从内容中删除空白也非常容易。您必须小心这些，否则将完全破坏文档的完整性

另外，如果您的文档包含CSS或JavaScript怎么办。这些文件也应该打印得很好，但是它们的要求与HTML非常不同。甚至HTML和XML也有不同的要求。请相信我的话，这不是一件简单的事情。HTMLTidy在这方面已经有十多年的历史了，但仍然有很多边缘案例

---

据我所知，我的markup_beauty.js应用程序是有史以来为HTML/XML编写的最完整、最漂亮的打印机。我知道这是一个非常大胆的声明，也许是傲慢的，但迄今为止它从未受到质疑。查看我的代码，如果您需要它做什么，请让我知道，我将着手添加它。

一个人实际上是如何编写代码的？为什么不使用已经存在的几种服务器端模板引擎中的一种？因为我完全不知道这些引擎是如何工作的，我是设计师而不是开发人员。我只是觉得这对doDo来说是一件相对容易的事情。如果你知道如何使用它的任何好的资源，我正在设计一个网站，为HTML和CSS提供一个易于理解的指南（有点像W3学校唯一有效的WC3推荐）。最终将介绍Javascript/jQuery、PHP和其他一些内容。然而，该公司需要一个非常快的模型，所以我只需要向他们展示我所拥有的。非常感谢您的帮助！markup_beauty应用程序采用单个参数，在应用程序中称为“arg”。此参数是一个对象文字，其属性在顶部注释的“选项”部分中指定。这意味着您需要编写一些代码来接受输入，并将输入打包为正确的格式。一旦您的输入被打包，您只需运行：var pretty\u code=markup\u beauty（您的输入对象）；应用程序返回两件事。基本上，应用程序只返回美化的代码，可以将其分配给变量，如本注释中的代码示例。另一个是…应用程序的第二个输出被提供给“summary”变量。该变量的作用域并不局限于应用程序，因为它是用来从更高的作用域进行闭包的。如果您不希望使用此功能，只需删除第1714行附近的最后一个函数，即可显著加快处理速度。如果确实希望使用此报告，则需要在markup_beauty应用程序外部声明一个名为“summary”的变量。这对于提供外部访问应用程序专用变量和数据的方法是必要的。我将在下一次更新中更新代码中的注释，以显示编码的示例用例。

JSON.stringify({ name: 'value' }, null, 2); //Change to four, for four spaces