仿【Emmet】轉【HTML】功能

1、定義正則表達式：

 1         var 
 2         whitespace = "[\\x20\\t\\r\\n\\f]*",
 3         nvarcharEncoding = whitespace + "\\{([^}]+)\\}" + whitespace,
 4         characterEncoding = "(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",
 5         relationEncoding = "[>\\+]",
 6         multiEncoding = whitespace + "(\\d+)" + whitespace + "\\*" + whitespace,
 7         attrEncoding = whitespace + "\\[" + whitespace + "(" + characterEncoding + ")(?:" + whitespace + "([*^$|!~]?=)" + whitespace +
 8         "(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|(" + characterEncoding.replace("w", "w#") + "))|)" + whitespace + "\\]" + whitespace,
 9         mainEncoding = whitespace + "[#\\.]?" + characterEncoding + whitespace,
10         htmlEncoding = whitespace + "(" + multiEncoding + ")*((" + mainEncoding + "|" + attrEncoding + "|" + nvarcharEncoding + ")+)" + whitespace,
11         htmlsEncoding = htmlEncoding + "(" + relationEncoding + htmlEncoding + ")*";
12 
13         var 
14         rsingle = /[\(\)]/g,
15         rdouble = /[(][^()]*[)]/g,
16         rsinglel = /^[\x20\t\r\n\f]*\(/,
17         rsingler = new RegExp("^(" + htmlsEncoding + ")?\\)+");
18 
19         var rmulti = new RegExp(multiEncoding);
20         var rchild = new RegExp("^(" + whitespace + "\\))?" + whitespace + ">");
21         var rnext = new RegExp("^" + whitespace + "\\+");
22         var rid = new RegExp("^" + whitespace + "#(" + characterEncoding + ")");
23         var rtag = new RegExp("^" + whitespace + "(\\w+)");
24         var rclass = new RegExp("^" + whitespace + "\\.(" + characterEncoding + ")");
25         var rcontent = new RegExp("^" + whitespace + nvarcharEncoding);
26         var rattr = new RegExp("^" + attrEncoding);
27         var rhtml = new RegExp("^" + htmlsEncoding + "$");

View Code

2、定義方法入口：

1         function dynamicMultiTag(selector) {
2             if (!selector || $.type(selector) !== "string" || !rhtml.test(selector.replace(rsingle, ""))) { return selector; }
3             var match = selector.replace(rdouble, "");
4             while (rdouble.test(match)) { match = match.replace(rdouble, ""); }
5             if (rsingle.test(match)) { return selector; }
6             return _dynamicMultiTag_(selector);
7         }

View Code

3、定義方法主體：

 1 function _dynamicMultiTag_(selector) {
 2             var match, multi = 1, result, results = [];
 3             if (match = rmulti.exec(selector)) {
 4                 multi = match[1] >>> 0;
 5                 selector = selector.replace(rmulti, '');
 6             }
 7             if (rsinglel.test(selector)) {
 8                 selector = selector.replace(rsinglel, '');
 9                 result = _dynamicMultiTag_(selector);
10                 while (multi--) {
11                     results.push(result);
12                 }
13                 selector = selector.replace(rsingler, '');
14                 if (rnext.test(selector)) { results.push(_dynamicMultiTag_(selector.replace(rnext, ''))); }
15                 return results.join('');
16             }
17             var tag = 'div', htmls = [];
18             if (match = rtag.exec(selector)) { tag = match[1]; selector = selector.replace(rtag, ""); }
19             htmls.push('<', tag);
20             if (match = rid.exec(selector)) {
21                 htmls.push(' id="', match[1], '"');
22                 selector = selector.replace(rid, "");
23             }
24             if (match = rclass.exec(selector)) {
25                 htmls.push(' class="', match[1]);
26                 while (match = rclass.exec(selector = selector.replace(rclass, ''))) { htmls.push(' ', match[1]); }
27                 htmls.push('"');
28             }
29             if (match = rid.exec(selector)) {
30                 htmls.push(' id="', match[1], '"');
31                 selector = selector.replace(rid, "");
32             }
33             while (match = rattr.exec(selector)) {
34                 htmls.push(match[1], match[2], '"', match[3] || match[4] || match[5], '"');
35                 selector = selector.replace(rattr, "");
36             }
37             htmls.push('>');
38             if (match = rcontent.exec(selector)) {
39                 htmls.push(match[1]);
40                 selector = selector.replace(rcontent, "");
41             }
42             if (rchild.test(selector)) {
43                 htmls.push(_dynamicMultiTag_(selector = selector.replace(rchild, "")));
44             }
45             htmls.push('</', tag, '>');
46             if (rnext.test(selector)) {
47                 htmls.push(_dynamicMultiTag_(selector = selector.replace(rnext, "")));
48             }
49             result = htmls.join('');
50             while (multi--) { results.push(result); }
51             return results.join('');
52         }

View Code

4、使用方法：dynamicMultiTag(selector) //selector ==> {string|object string} == >('2*div') ==>"<div></div><div></div>"

　　一、克隆（如："2*div"  ==> "<div></div><div></div>"）

　　二、選擇器（如：'div#id.class > div + span' ==> '<div id="id" class="class"><div></div><span></span></div>'）

　　三、內容（如：'span{我是span元素的內容}' ==> '<span>我是span元素的內容</span>'）

　　四、多元（如：'(div.i11 > span.i12) + (div.i21 + div.i22 > (div.i221 + span.i222))' ==> <div class="i11"><span class="i12"></span></div><div class="i21"></div><div class="i22"><div class="i221"></div><span class="i222"></span></div>）