仿【Emmet】转【HTML】功能

时间:2023-03-08 15:38:42
仿【Emmet】转【HTML】功能

一、定义正则表达式:

         var
whitespace = "[\\x20\\t\\r\\n\\f]*",
nvarcharEncoding = whitespace + "\\{([^}]+)\\}" + whitespace,
characterEncoding = "(?:\\\\.|[\\w-]|[^\\x00-\\xa0])+",
relationEncoding = "[>\\+]",
multiEncoding = whitespace + "(\\d+)" + whitespace + "\\*" + whitespace,
attrEncoding = whitespace + "\\[" + whitespace + "(" + characterEncoding + ")(?:" + whitespace + "([*^$|!~]?=)" + whitespace +
"(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|(" + characterEncoding.replace("w", "w#") + "))|)" + whitespace + "\\]" + whitespace,
mainEncoding = whitespace + "[#\\.]?" + characterEncoding + whitespace,
htmlEncoding = whitespace + "(" + multiEncoding + ")*((" + mainEncoding + "|" + attrEncoding + "|" + nvarcharEncoding + ")+)" + whitespace,
htmlsEncoding = htmlEncoding + "(" + relationEncoding + htmlEncoding + ")*"; var
rsingle = /[\(\)]/g,
rdouble = /[(][^()]*[)]/g,
rsinglel = /^[\x20\t\r\n\f]*\(/,
rsingler = new RegExp("^(" + htmlsEncoding + ")?\\)+"); var rmulti = new RegExp(multiEncoding);
var rchild = new RegExp("^(" + whitespace + "\\))?" + whitespace + ">");
var rnext = new RegExp("^" + whitespace + "\\+");
var rid = new RegExp("^" + whitespace + "#(" + characterEncoding + ")");
var rtag = new RegExp("^" + whitespace + "(\\w+)");
var rclass = new RegExp("^" + whitespace + "\\.(" + characterEncoding + ")");
var rcontent = new RegExp("^" + whitespace + nvarcharEncoding);
var rattr = new RegExp("^" + attrEncoding);
var rhtml = new RegExp("^" + htmlsEncoding + "$");

二、定义方法入口:

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

三、定义方法主体:

 function _dynamicMultiTag_(selector) {
var match, multi = 1, result, results = [];
if (match = rmulti.exec(selector)) {
multi = match[1] >>> 0;
selector = selector.replace(rmulti, '');
}
if (rsinglel.test(selector)) {
selector = selector.replace(rsinglel, '');
result = _dynamicMultiTag_(selector);
while (multi--) {
results.push(result);
}
selector = selector.replace(rsingler, '');
if (rnext.test(selector)) { results.push(_dynamicMultiTag_(selector.replace(rnext, ''))); }
return results.join('');
}
var tag = 'div', htmls = [];
if (match = rtag.exec(selector)) { tag = match[1]; selector = selector.replace(rtag, ""); }
htmls.push('<', tag);
if (match = rid.exec(selector)) {
htmls.push(' id="', match[1], '"');
selector = selector.replace(rid, "");
}
if (match = rclass.exec(selector)) {
htmls.push(' class="', match[1]);
while (match = rclass.exec(selector = selector.replace(rclass, ''))) { htmls.push(' ', match[1]); }
htmls.push('"');
}
if (match = rid.exec(selector)) {
htmls.push(' id="', match[1], '"');
selector = selector.replace(rid, "");
}
while (match = rattr.exec(selector)) {
htmls.push(match[1], match[2], '"', match[3] || match[4] || match[5], '"');
selector = selector.replace(rattr, "");
}
htmls.push('>');
if (match = rcontent.exec(selector)) {
htmls.push(match[1]);
selector = selector.replace(rcontent, "");
}
if (rchild.test(selector)) {
htmls.push(_dynamicMultiTag_(selector = selector.replace(rchild, "")));
}
htmls.push('</', tag, '>');
if (rnext.test(selector)) {
htmls.push(_dynamicMultiTag_(selector = selector.replace(rnext, "")));
}
result = htmls.join('');
while (multi--) { results.push(result); }
return results.join('');
}

四、使用方法: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>)