javascript - 简单的 HTML pretty-print

Question

http://jsfiddle.net/JamesKyle/L4b8b/

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

我不是最擅长 Javascript 或 jQuery 的，但我认为我找到了一种为 html 制作简单 pretty-print 的简单方法。

这个prettyprint中有四种类型的代码:

1. 纯文本
2. 元素
3. 属性
4. 值(value)观

为了风格化，我想将 elements、attibutes 和 values 包装在自己的类中。

---

我这样做的第一种方法是存储每一种元素和属性(如下所示)，然后用相应的 span 包装它们

$(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');
    });
});

---

我想到的第二种方法是将 elements 检测为被两个 < > 包围的任意数量的文本，然后将 attributes 检测为 中的文本>element 由两个空格包围或紧跟在其后的 =。

$(document).ready(function() {

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

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

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

        var html-element = $(code).find(/* Any instance of text inbeween two < > */);

        var html-attribute = $(code).find(/* Any instance of text inside an element that has a = immeadiatly afterwards or has spaces on either side */);

        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');
    });
});

如果可能的话，将如何编码这些中的任何一个

Again you can see this as a jsfiddle here: http://jsfiddle.net/JamesKyle/L4b8b/

Answer 1

不要那么确定您已经掌握了在这么少的几行中 pretty-print HTML 的所有内容。我花了一年多一点的时间和 2000 行代码才真正确定了这个主题。您可以直接使用我的代码或重构它以满足您的需要:

https://github.com/prettydiff/prettydiff/blob/master/lib/markuppretty.js (和 Github project)

您可以在 http://prettydiff.com/?m=beautify&html 进行演示

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

此外，如果您的文档包含 CSS 或 JavaScript 怎么办。这些也应该打印得很好，但与 HTML 有非常不同的要求。甚至 HTML 和 XML 也有不同的要求。请相信我的话，这不是一件容易弄清楚的事情。 HTML Tidy 在这方面已经有十多年了，但仍然搞砸了很多边缘情况。

据我所知，我的 markup_beauty.js 应用程序是有史以来为 HTML/XML 编写的最完整的 pretty-print 。我知道这是一个非常大胆的声明，也许是傲慢的，但到目前为止它从未受到挑战。看看我的代码，如果有您需要但它没有做的事情，请告诉我，我会设法添加它。