test1.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <textarea id="content" style="width: 600px; height: 500px"></textarea>
  9. <textarea id="result" style="width: 600px; height: 500px"></textarea><br>
  10. <input type="button" value="testStr" onclick="test()"/>
  11. <input type="button" value="testDom" onclick="testDom()"/>
  12. <div id="resultDiv"></div>
  13. <script>
  14. var json = {
  15. "if": {
  16. "x": 0
  17. },
  18. "lp": {
  19. "saveIdeaDefault": "saveIdeaDefault",
  20. "text2": "text2",
  21. "text3": "text3",
  22. "items": [
  23. {
  24. "itemvalue": "items1",
  25. "subs": [
  26. {"subvalue": "items1_sub1"},
  27. {"subvalue": "items1_sub2"},
  28. {"subvalue": "items1_sub3"},
  29. {"subvalue": "items1_sub4"},
  30. {"subvalue": "items1_sub5"}
  31. ]
  32. },
  33. {
  34. "itemvalue": "items2"
  35. },
  36. {
  37. "itemvalue": "items3",
  38. "subs": [
  39. {"subvalue": "items3_sub1"},
  40. {"subvalue": "items3_sub2"}
  41. ]
  42. },
  43. {
  44. "itemvalue": "items4",
  45. "subs": [
  46. {"subvalue": "items4_sub1"},
  47. {"subvalue": "items4_sub2"},
  48. {"subvalue": "items4_sub3"}
  49. ]
  50. }
  51. ]
  52. }
  53. };
  54. function testDom(){
  55. document.all.resultDiv.innerHTML = "";
  56. var sd = new Date();
  57. var node = document.all.resultDiv;
  58. for (var r=0; r<18; r++){
  59. for (var i=0; i<json.lp.items.length; i++){
  60. var n = document.createElement("div");
  61. n.innerText = json.lp.text3;
  62. node.appendChild(n);
  63. var n2 = document.createElement("div");
  64. n2.className = "o2_profile_ideasSave";
  65. n2.innerText = json.lp.items[i].itemvalue;
  66. node.appendChild(n2);
  67. if (json.lp.items[i].subs){
  68. for (var j=0; j<json.lp.items[i].subs.length; j++){
  69. var n3 = document.createElement("div");
  70. n3.className = "o2_profile_ideasSave";
  71. n3.innerText = json.lp.items[i].subs[j].subvalue;
  72. node.appendChild(n3);
  73. }
  74. }
  75. }
  76. }
  77. document.all.result.value = node.innerHTML;
  78. var ed = new Date();
  79. alert(ed.getTime()-sd.getTime());
  80. }
  81. function test(){
  82. var sd = new Date();
  83. var t = document.all.content.value;
  84. var r = "";
  85. for (var z=0; z<18; z++){
  86. r += parseHtml(t, json);
  87. }
  88. document.all.result.value = r;
  89. document.all.resultDiv.innerHTML = r;
  90. var ed = new Date();
  91. alert(ed.getTime()-sd.getTime());
  92. }
  93. function _typeOf(item){
  94. if (item == null) return 'null';
  95. if (item.$family != null) return item.$family();
  96. if (item.constructor == window.Array) return "array";
  97. if (item.nodeName){
  98. if (item.nodeType == 1) return 'element';
  99. if (item.nodeType == 3) return (/\S/).test(item.nodeValue) ? 'textnode' : 'whitespace';
  100. } else if (typeof item.length == 'number'){
  101. if (item.callee) return 'arguments';
  102. }
  103. return typeof item;
  104. }
  105. function getIfBlockEnd(v){
  106. var rex = /(\{\{if\s+)|(\{\{\s*end if\s*\}\})/gmi;
  107. var rexEnd = /\{\{\s*end if\s*\}\}/gmi;
  108. var subs = 1;
  109. while ((match = rex.exec(v)) !== null) {
  110. var fullMatch = match[0];
  111. if (fullMatch.search(rexEnd)!==-1){
  112. subs--;
  113. if (subs==0) break;
  114. }else{
  115. subs++
  116. }
  117. }
  118. if (match) return {"codeIndex": match.index, "lastIndex": rex.lastIndex};
  119. return {"codeIndex": v.length-1, "lastIndex": v.length-1};
  120. }
  121. function getEachBlockEnd(v){
  122. var rex = /(\{\{each\s+)|(\{\{\s*end each\s*\}\})/gmi;
  123. var rexEnd = /\{\{\s*end each\s*\}\}/gmi;
  124. var subs = 1;
  125. while ((match = rex.exec(v)) !== null) {
  126. var fullMatch = match[0];
  127. if (fullMatch.search(rexEnd)!==-1){
  128. subs--;
  129. if (subs==0) break;
  130. }else{
  131. subs++;
  132. }
  133. }
  134. if (match) return {"codeIndex": match.index, "lastIndex": rex.lastIndex};
  135. return {"codeIndex": v.length-1, "lastIndex": v.length-1};
  136. }
  137. function parseHtml(str, json){
  138. var v = str;
  139. var rex = /(\{\{\s*)[\s\S]*?(\s*\}\})/gmi;
  140. var match;
  141. while ((match = rex.exec(v)) !== null) {
  142. var fullMatch = match[0];
  143. var offset = 0;
  144. //if statement begin
  145. if (fullMatch.search(/\{\{if\s+/i)!==-1){
  146. //找到对应的end if
  147. var condition = fullMatch.replace(/^\{\{if\s*/i, "");
  148. condition = condition.replace(/\s*\}\}$/i, "");
  149. var flag = _jsonText(json, condition, "boolean");
  150. var tmpStr = v.substring(rex.lastIndex, v.length);
  151. var endIfIndex = getIfBlockEnd(tmpStr);
  152. if (flag){ //if 为 true
  153. var parseStr = parseHtml(tmpStr.substring(0, endIfIndex.codeIndex), json);
  154. var vLeft = v.substring(0, match.index);
  155. var vRight = v.substring(rex.lastIndex+endIfIndex.lastIndex, v.length);
  156. v = vLeft + parseStr + vRight;
  157. offset = parseStr.length - fullMatch.length;
  158. }else{
  159. v = v.substring(0, match.index) + v.substring(rex.lastIndex+endIfIndex.lastIndex, v.length);
  160. offset = 0-fullMatch.length;
  161. }
  162. }else if (fullMatch.search(/\{\{each\s+/)!==-1) { //each statement
  163. var itemString = fullMatch.replace(/^\{\{each\s*/, "");
  164. itemString = itemString.replace(/\s*\}\}$/, "");
  165. var eachValue = _jsonText(json, itemString, "object");
  166. var tmpEachStr = v.substring(rex.lastIndex, v.length);
  167. var endEachIndex = getEachBlockEnd(tmpEachStr);
  168. var parseEachStr = tmpEachStr.substring(0, endEachIndex.codeIndex);
  169. var eachResult = "";
  170. if (eachValue && _typeOf(eachValue)==="array"){
  171. for (var i=0; i<eachValue.length; i++){
  172. eachValue[i]._ = json;
  173. var parseEachResultStr = parseHtml(parseEachStr, eachValue[i]);
  174. eachResult += parseEachResultStr;
  175. }
  176. var eLeft = v.substring(0, match.index);
  177. var eRight = v.substring(rex.lastIndex+endEachIndex.lastIndex, v.length);
  178. v = eLeft + eachResult + eRight;
  179. offset = eachResult.length - fullMatch.length;
  180. }else{
  181. v = v.substring(0, match.index) + v.substring(rex.lastIndex+endEachIndex.lastIndex, v.length);
  182. offset = 0-fullMatch.length;
  183. }
  184. }else{ //text statement
  185. var text = fullMatch.replace(/^\{\{\s*/, "");
  186. text = text.replace(/\}\}\s*$/, "");
  187. var value = _jsonText(json, text);
  188. offset = value.length-fullMatch.length;
  189. v = v.substring(0, match.index) + value + v.substring(rex.lastIndex, v.length);
  190. }
  191. rex.lastIndex = rex.lastIndex + offset;
  192. }
  193. return v;
  194. }
  195. function parseHtml2(str, blocks){
  196. var v = str;
  197. var rex = /(\{\{\s*)[\s\S]*?(\s*\}\})/g;
  198. var block = null, ifBlock = null, eachBlock = null;
  199. if (blocks && blocks.length){
  200. for (var i=blocks.length-1; i>=0; i--){
  201. if (i===blocks.length-1) block = blocks[i];
  202. if (!ifBlock && blocks[i].type==="if") ifBlock = blocks[i];
  203. if (!eachBlock && blocks[i].type==="each") eachBlock = blocks[i];
  204. if (block && ifBlock && eachBlock) break;
  205. }
  206. }
  207. var match;
  208. while ((match = rex.exec(v)) !== null) {
  209. var fullMatch = match[0];
  210. var offset = 0;
  211. //if statement begin
  212. if (fullMatch.search(/^\{\{if\s+/)!==-1){
  213. var ifBlockObj = {"start": match.index, "type": "if"};
  214. var condition = fullMatch.replace(/^\{\{if\s*/, "");
  215. condition = condition.replace(/\s*\}\}$/, "");
  216. ifBlockObj.value = _jsonText(json, condition, "boolean");
  217. if (!blocks) blocks = [];
  218. blocks.push(ifBlockObj);
  219. block = ifBlockObj;
  220. ifBlock = ifBlockObj;
  221. v = v.substring(0, match.index) + v.substring(rex.lastIndex, v.length);
  222. offset = 0 - fullMatch.length;
  223. }else if (fullMatch.search(/\{\{\s*end if\s*\}\}/)!==-1){ //if statement end
  224. if (ifBlock && !ifBlock.value){
  225. v = v.substring(0, ifBlock.start) + v.substring(rex.lastIndex, v.length);
  226. offset = ifBlock.start - rex.lastIndex;
  227. }else{
  228. v = v.substring(0, match.index) + v.substring(rex.lastIndex, v.length);
  229. offset = 0 - fullMatch.length;
  230. }
  231. }else if (fullMatch.search(/^\{\{each\s+/)!==-1) { //each statement
  232. var eachBlockObj = {"start": match.index, "type": "each"};
  233. var itemString = fullMatch.replace(/^\{\{each\s*/, "");
  234. itemString = itemString.replace(/\s*\}\}$/, "");
  235. eachBlockObj.value = _jsonText(json, itemString, "object");
  236. if (!blocks) blocks = [];
  237. blocks.push(eachBlockObj);
  238. block = eachBlockObj;
  239. eachBlock = eachBlockObj;
  240. v = v.substring(0, match.index) + v.substring(rex.lastIndex, v.length);
  241. offset = 0 - fullMatch.length;
  242. }else if (fullMatch.search(/\{\{\s*end each\s*\}\}/)!==-1) { //each statement end
  243. }else{ //text statement
  244. if (ifBlock && !ifBlock.value){
  245. v = v.substring(0, ifBlock.start) + v.substring(rex.lastIndex, v.length);
  246. offset = ifBlock.start - rex.lastIndex;
  247. }else{
  248. var text = fullMatch.replace(/^\{\{\s*/, "");
  249. text = text.replace(/\}\}\s*$/, "");
  250. var value = _jsonText(((eachBlock) ? eachBlock.value : json), text);
  251. offset = value.length-fullMatch.length;
  252. v = v.substring(0, match.index) + value + v.substring(rex.lastIndex, v.length);
  253. }
  254. }
  255. rex.lastIndex = rex.lastIndex + offset;
  256. }
  257. return v;
  258. }
  259. function _jsonText(json, text, type){
  260. var $ = json;
  261. var f = eval("(function($){\n return "+text+";\n})");
  262. returnValue = f.apply(json, [$]);
  263. if (returnValue===undefined) returnValue="";
  264. if (type==="boolean") return (!!returnValue);
  265. if (type==="object") return returnValue;
  266. returnValue = returnValue.toString();
  267. return returnValue || "";
  268. }
  269. </script>
  270. </body>
  271. </html>