这可能是一个徒劳的尝试，但我个人认为这是可能的。
虽然我不是最擅长JavaScript或jQuery，但我认为我已经找到了一种制作简单漂亮的HTML格式化输出的简单方法。
此漂亮打印有四种代码:
- 普通文本
- 元素
- 属性
- 值
为了美化它，我想用它们自己的类包装元素、属性和值。
我第一个方法是存储每一种类型的元素和属性（如下所示），然后将它们与对应的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('<');
$(code).find('>').replaceWith('>');
});
});
我想到的第二种方法是将
元素检测为两个< >之间的任意文本，然后将属性检测为一个元素中被两个空格包围或者其后面紧跟一个=的文本。$(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('>');
});
});
如果可能的话，这两个都将如何编码？
您可以在此处查看jsfiddle： http://jsfiddle.net/JamesKyle/L4b8b/