[解決済み] シンプルHTMLプリティプリント

質問

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

無駄な努力かもしれませんが、個人的には可能だと思っています。

私はJavascriptやjQueryが得意ではありませんが、htmlに簡単なprettyprintを作成する方法を見つけたと思います。

このprettyprintには、4種類のコードがあります。

1. プレーンなテキスト
2. 要素
3. 属性
4. 値

これをスタイリッシュにするために、私は 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 を2つの< >で囲まれた任意の量のテキストとして検出し、次に attributes の中のテキストとして element は、2つのスペースで囲まれているか、または = のすぐ後にある。

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

可能であれば、これらのどちらかをどのようにコード化しますか？

ここでもjsfiddleとして見ることができます。 http://jsfiddle.net/JamesKyle/L4b8b/

解決方法は？

わずかな行数でHTMLをきれいに印刷するためのすべてを手に入れたと思い込まないでください。 私はこのトピックを完全に理解するのに1年以上、2000行を費やしました。 私のコードをそのまま使ってもいいし、あなたのニーズに合わせてリファクタリングしてもいいのです。

https://github.com/prettydiff/prettydiff/blob/master/lib/markuppretty.js (そして Githubプロジェクト )

でデモができます。 http://prettydiff.com/?m=beautify&html

なぜこれほど多くのコードが必要かというと、人々は本当にテキストノードの重要性を理解し、価値を認めていないようだからです。 もし、美化中に新しい空のテキストノードを追加しているのなら、それは間違った方法で、コンテンツを破損している可能性が高いです。 また、逆に、コンテンツ内の空白を削除してしまうこともあります。 このようなことに気をつけないと、ドキュメントの整合性を完全に壊してしまうことになります。

また、文書にCSSやJavaScriptが含まれている場合はどうでしょうか。 これらもかなり印刷されているはずですが、HTMLとはかなり異なる要件があります。 HTMLとXMLでも要件は異なるのです。 これは簡単なことではありませんので、どうか私の言葉をお受け取りください。 HTML Tidyは10年以上これに取り組んできて、いまだに多くのエッジケースを台無しにしています。

私が知る限り、私のmarkup_beauty.jsアプリケーションは、HTML/XMLのために書かれた最も完全なプリティプリンターだと思います。 これは非常に大胆な発言であり、おそらく傲慢であることは承知していますが、これまでのところ、異議を唱えられたことはありません。 私のコードを見て、もし必要なものがあれば、私に知らせてください。