简单的HTML漂亮打印 [英] Simple HTML Pretty Print

问题描述

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

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

<我不是最好的Javascript或jQuery，但我认为我已经找到了一个简单的方法来制作一个简单的相对html打印。

有四种类型代码：

1. 纯文本


2. 元素


3. 属性


4. 值

为了设计风格，我想包装元素， attibutes 和值，并带有自己的类的跨度。

---

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

$ $ $ $ $ $ $ $ $ $ $（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 ，嵌入，字段集，figcaption，图中，页脚，形式，H1，H2，H3，H4，H5，H6，头，报头，hgroup，小时，HTML，I，IMG，输入，插件，KBD，密钥生成，标签，说明，li，link，map，mark，meta，meter，nav，noscript，object，ol，optgroup，option，output，p，param，pre，progress，q，rp，rt，ruby，samp，script，section，se lect，small，source，span，strong，summary，style，sub，sup，table，tbody，td，textarea，tfoot，th，thead，title，time，tr，track，tt，ul，var，video， ）;

var html-attribute = $（code）.find（'abbr，accept-charset，accept，accesskey，actionm，align，alink，alt，archive，axis，background，bgcolor，border，cellpadding ，CELLSPACING，焦炭，charoff，字符集，检查，引用类的classid，清晰，代码，代码库，CODETYPE，颜色的cols，列跨度，结构紧凑，内容，COORDS，数据，日期时间，声明，推迟，目录，残疾人，ENCTYPE ，脸，对，帧，FRAMEBORDER，标头，高度，HREF，的hreflang，HSPACE，HTTP-当量，ID，ISMAP，标签，郎，语言，链接，LONGDESC，MARGINHEIGHT，MARGINWIDTH，最大长度，媒体，方法，倍数，名称，NOHREF，noresize，noshade，NOWRAP，对象，的onblur，平变化，的onclick onfocus此的onfocus的onkeydown，onkeypress事件，的onkeyup，有载，onmousedown事件，的OnMouseMove，的onmouseout，的onmouseover，onmouseup，onreset，ONSELECT，的onsubmit，onunload的，型材，提示，只读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（/ *两个括号之间的任何文本实例* /）;

$（element）.wrap（'< span class =element/>'）;
$（属性）.wrap（'< span class =属性/>'）;
$（value）.wrap（'< span class =value/>'）;

$（code）.find（'<'）。replaceWith（'& lt'）;
$（code）.find（'>'）。replaceWith（'& gt'）;
}）;
}）;

---

我想到的第二种方法是检测 elements 作为由两个< >'，然后检测属性作为元素中的文本，该文本或者被两个空格包围，或者具有 = 。

  $（document）.ready（function（ ）{
 
 $（'pre.prettyprint.html'）。each（function（）{
 
 $（this）.css（'white-space'，'pre -line'）; 
 
 var code = $（this）.html（）; 
 
 var html-element = $（code）.find（/ * text in in between two<> * /）; 
 
 var html-attribute = $（code）.find（/ *元素中的文本的任何实例，其后具有= immeadiatly或者具有空格$ / 
 
 $（元素）/ ）.wrap（'< span class =element/>'）; 
 $（attribute）.wrap（'< span class =attribute/>'）; 
 $ （value）.wrap（'< span class =value/>'）; 
 
 $（代码）.find（<）。replaceWith（&安培; LT）; 
 $（code）.find（'>'）。replaceWith（'& gt'）; 
}）; 
}）; 
  

如果可能的话，这两种方式如何编码

你可以在这里看到这是一个jsfiddle：
http://jsfiddle.net/JamesKyle/L4b8b/

解决方案

不要那么确定，你已经得到了所有的东西，只需在几行内打印出漂亮的HTML。我花了一年多一点的时间和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在这方面已经有十多年的历史了，并且还有很多边缘案例。

据我所知，我的markup_beauty.js应用程序是最完整的漂亮的打印机曾经为HTML / XML写过。我知道这是一个非常大胆的陈述，也许是傲慢的，但迄今为止它从未受到过挑战。看看我的代码，如果有什么你需要，它不是做的请让我知道，我会考虑添加它。

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

This may be a futile effort, but I personally think its possible.

I'm not the best at Javascript or jQuery, however I think I have found a simple way of making a simple prettyprint for html.

There are four types of code in this prettyprint:

1. Plain Text
2. Elements
3. Attributes
4. Values

In order to stylize this I want to wrap elements, attibutes and values with spans with their own classes.

---

The first way I have of doing this is to store every single kind of element and attribute (shown below) and then wrapping them with the corresponding spans

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

---

The second way I thought of was to detect elements as any amount of text surrounded by two < >'s, then detect attributes as text inside of an element that is either surrounded by two spaces or has an = immediately after it.

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

How would either of these be coded, if at all possible

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

解决方案

Don't be so sure you have gotten all there is to pretty-printing HTML in so few lines. It took me a little more than a year and 2000 lines to really nail this topic. You can just use my code directly or refactor it to fit your needs:

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

You can demo it at http://prettydiff.com/?m=beautify&html

The reason why it takes so much code is that people really don't seem to understand or value the importance of text nodes. If you are adding new and empty text nodes during beautification then you are doing it wrong and are likely corrupting your content. Additionally, it is also really ease to screw it up the other way and remove white space from inside your content. You have to be careful about these or you will completely destroy the integrity of your document.

Also, what if your document contains CSS or JavaScript. Those should be pretty printed as well, but have very different requirements from HTML. Even HTML and XML have different requirements. Please take my word for it that this is not a simple thing to figure out. HTML Tidy has been at this for more than a decade and still screws up a lot of edge cases.

As far as I know my markup_beauty.js application is the most complete pretty-printer ever written for HTML/XML. I know that is a very bold statement, and perhaps arrogant, but so far its never been challenged. Look my code and if there is something you need that it is not doing please let me know and I will get around to adding it in.

这篇关于简单的HTML漂亮打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！