3
这可能是一个徒劳的努力，但我个人认为它可能。
我不是在JavaScript或jQuery的最好的，但我想我已经找到了制作一个简单的prettyprint对HTML的一个简单方法。
有四种类型的代码，在此prettyprint：
- 纯文本
- 元素
- 属性
- 值
为了风格化这一点，我想包装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('<');
$(code).find('>').replaceWith('>');
});
});
第二种方式我想的是检测作为elements由两个<>的包围任意数量的文本，然后检测attributes作为element的内部文本或者由两个空间包围或具有= immedi在它之后。
$(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/
而你的问题是？ –
实际上如何编码 –
为什么不使用已经在那里的几个服务器端模板引擎之一？ –