javascript - 简单的 HTML pretty-print

Question

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

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

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

这个 pretty-print 中有四种类型的代码:

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

为了使其风格化，我想将 elements、attibutes 和 values 用它们自己的类来包装。

<小时/>

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

$(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 。我知道这是一个非常大胆的声明，也许还有些傲慢，但到目前为止，它从未受到过挑战。查看我的代码，如果有一些您需要的东西没有执行，请告诉我，我会抽出时间将其添加进去。