仿【Emmet】转【HTML】功能
一、定义正则表达式：
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 + "$");
二、定义方法入口：
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 }
三、定义方法主体：
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 }
四、使用方法：dynamicMultiTag(selector) //selector ==> {string|object string} == >('2*div') ==>"<div></div><div></div>"
1、克隆（如："2*div" ==> "<div></div><div></div>"）
2、选择器（如：'div#id.class > div + span' ==> '<div id="id" class="class"><div></div><span></span></div>'）
3、内容（如：'span{我是span元素的内容}' ==> '<span>我是span元素的内容</span>'）
4、多元（如：'(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>）
