javascript 简单的 HTML 漂亮打印
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8348545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple HTML Pretty Print
提问by James Kyle
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.
我不是最擅长 Javascript 或 jQuery,但是我想我已经找到了一种简单的方法来为 html 制作一个简单的漂亮打印。
There are four types of code in this prettyprint:
这个prettyprint中有四种类型的代码:
- Plain Text
- Elements
- Attributes
- Values
- 纯文本
- 元素
- 属性
- 价值观
In order to stylize this I want to wrap elements
, attibutes
and values
with spans with their own classes.
为了风格化这一点,我想换行elements
,attibutes
并values
用自己的类跨度。
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('<');
$(code).find('>').replaceWith('>');
});
});
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.
我想到的第二种方法是检测elements
由两个 < > 包围的任意数量的文本,然后检测attributes
为element
被两个空格包围或=
紧接其后的 an 内的文本。
$(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('<');
$(code).find('>').replaceWith('>');
});
});
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/
同样,您可以在此处将其视为 jsfiddle:http: //jsfiddle.net/JamesKyle/L4b8b/
回答by austincheney
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:
不要太确定您已经在这么几行中获得了漂亮打印 HTML 的全部内容。我花了一年多一点的时间和 2000 行来真正确定这个主题。您可以直接使用我的代码或重构它以满足您的需求:
https://github.com/prettydiff/prettydiff/blob/master/lib/markuppretty.js(and Github project)
https://github.com/prettydiff/prettydiff/blob/master/lib/markuppretty.js(和Github 项目)
You can demo it at http://prettydiff.com/?m=beautify&html
你可以在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.
此外,如果您的文档包含 CSS 或 JavaScript,该怎么办?那些也应该打印得很漂亮,但与 HTML 有非常不同的要求。甚至 HTML 和 XML 也有不同的要求。请相信我的话,这不是一件容易弄清楚的事情。HTML Tidy 在这方面已经有十多年了,但仍然搞砸了很多边缘情况。
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.
据我所知,我的 markup_beauty.js 应用程序是有史以来为 HTML/XML 编写的最完整的漂亮打印机。我知道这是一个非常大胆的声明,也许是傲慢的,但迄今为止它从未受到挑战。查看我的代码,如果您需要什么它没有做的事情,请告诉我,我会开始添加它。
回答by Drew
Personally I would wrap HTML with pre and not try to do any pretty printing. There are TONS of libraries for doing code formatting just google pretty print. Just wrapping HTML with pre will automatically make it 'printed' code.
就个人而言,我会用 pre 包装 HTML,而不是尝试做任何漂亮的打印。有大量的库用于进行代码格式化,只是谷歌漂亮的打印。只需用 pre 包装 HTML 就会自动使其“打印”代码。
For JavaScript, you can use JSON.stringify to recreate the code by passing in a number of spaces for nested structures.
对于 JavaScript,您可以使用 JSON.stringify 通过为嵌套结构传入多个空格来重新创建代码。
JSON.stringify({ name: 'value' }, null, 2); //Change to four, for four spaces
回答by Neil
If you're doing this client-side, and you already have the DOM, then it would be more efficient to serialise it yourself inserting the appropriate tags as you go rather than serialising the whole subtree at once and then trying to reparse it.
如果您在客户端执行此操作,并且您已经拥有 DOM,那么自己序列化它会更有效,同时插入适当的标签,而不是一次序列化整个子树,然后尝试重新解析它。