{"ScriptPreparationCode":"var html = \u0060\r\n\u003Cdiv\u003E\r\n \u003Cdiv class=\u0022collapsed\u0022\u003E\r\n \u003Cdiv style=\u0022{{COLLAPSED_LAYOUT_1_BG_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{COLLAPSED_LAYOUT_1_LOGO_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_1_LOGO_IMG_SRC}}\u0022\r\n style=\u0022{{COLLAPSED_LAYOUT_1_LOGO_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{COLLAPSED_LAYOUT_1_P1_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_1_P1_IMG_SRC}}\u0022\r\n style=\u0022{{COLLAPSED_LAYOUT_1_P1_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{COLLAPSED_LAYOUT_1_P2_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_1_P2_IMG_SRC}}\u0022\r\n style=\u0022{{COLLAPSED_LAYOUT_1_P2_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{COLLAPSED_LAYOUT_1_BANNER_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_1_BANNER__SRC}}\u0022\r\n style=\u0022{{COLLAPSED_LAYOUT_1_BANNER_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{COLLAPSED_LAYOUT_1_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{COLLAPSED_LAYOUT_1_PRICE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{COLLAPSED_LAYOUT_1_BUTTON_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022expanded\u0022\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_1_BG_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_1_LOGO_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{EXPANDED_LAYOUT_1_LOGO_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_1_LOGO_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_1_BANNER_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{EXPANDED_LAYOUT_1_BANNER__SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_1_BANNER_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_1_MESSAGE_1_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_1_MESSAGE_2_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_1_BUTTON_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryController\u0022\u003E\r\n \u003Cbutton\u003EPREV\u003C/button\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryContainer\u0022\u003E\r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G1_P1_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G1_P1_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G1_P1_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G1_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G2_P2_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G2_P2_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G2_P2_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G2_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G3_P3_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G3_P3_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G3_P3_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G3_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G4_P4_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G4_P4_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G4_P4_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G4_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G5_P5_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G5_P5_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G5_P5_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G5_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G6_P6_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G6_P6_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G6_P6_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G6_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G7_P7_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G7_P7_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G7_P7_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G7_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G8_P8_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G8_P8_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G8_P8_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G8_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G9_P9_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G9_P9_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G9_P9_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G9_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G10_P10_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G10_P10_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G10_P10_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G10_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G11_P11_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G11_P11_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G11_P11_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G11_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G12_P12_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G12_P12_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G12_P12_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G12_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G13_P13_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G13_P13_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G13_P13_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G13_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G14_P14_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G14_P14_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G14_P14_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G14_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G15_P15_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G15_P15_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G15_P15_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G15_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G16_P16_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G16_P16_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G16_P16_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G16_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G17_P17_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G17_P17_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G17_P17_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G17_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G18_P18_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G18_P18_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G18_P18_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G18_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G19_P19_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G19_P19_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G19_P19_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G19_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryItem\u0022\u003E\r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G20_P20_LAYER_STYLE}}\u0022\u003E\r\n \u003Cimg\r\n src=\u0022{{COLLAPSED_LAYOUT_G20_P20_IMG_SRC}}\u0022\r\n style=\u0022{{EXPANDED_LAYOUT_G20_P20_IMG_STYLE}}\u0022\r\n \u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv style=\u0022{{EXPANDED_LAYOUT_G20_MESSAGE_LAYER_STYLE}}\u0022\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \u003C/div\u003E\r\n \r\n \u003Cdiv class=\u0022galleryController\u0022\u003E\r\n \u003Cbutton\u003ENEXT\u003C/button\u003E\r\n \u003C/div\u003E\r\n \r\n \u003C/div\u003E\r\n\u003C/div\u003E\r\n\u0060;\r\n\r\nvar keyList = html.match(/{{.*}}/g).map(s =\u003E s.replace(/({{|}})/g, \u0022\u0022));\r\nvar data = keyList.reduce((acc, key) =\u003E {\r\n if (key.endsWith(\u0027STYLE\u0027)) {\r\n acc[key]= \u0060width: 30px;height: 30px; position: absolute; top: 0px; left: 0px; border: none; padding: 0 0 0 0; margin: 0 0 0 0; backround: black;\u0060\r\n } else if (key.endsWith(\u0027SRC\u0027)) {\r\n acc[key]=\u0027https://google.com.whocares.what?!.ok\u0027;\r\n }\r\n\r\n return acc;\r\n}, {});\r\n\r\nvar segementList = html.split(/{{|}}/g).map((segment, index) =\u003E {\r\n if (index % 2 === 0) {\r\n return {\r\n type: \u0027string\u0027,\r\n value: segment,\r\n }\r\n }\r\n\r\n return {\r\n type: \u0027macro\u0027,\r\n value: segment,\r\n }\r\n})","TestCases":[{"Name":"Regex replace","Code":" html.replace(/{{(.*?)}}/g, (_, key) =\u003E data[key]);\r\n","IsDeferred":false},{"Name":"String replace each macro separately","Code":"let newHtml = html;\r\nObject.keys(data).forEach(key =\u003E newHtml = newHtml.replace(\u0060{{${key}}}\u0060, data[key]))","IsDeferred":false},{"Name":"Regex keys group","Code":"let newHtml = html.replace(new RegExp(\u0060{{(${Object.keys(data).join(\u0027|\u0027)})}}\u0060, \u0027g\u0027), (_, key, g) =\u003E {\r\n return data[key];\r\n})","IsDeferred":false},{"Name":"Search for macro open and close delimiters","Code":"let newHtml = \u0027\u0027;\r\nlet originalHtml = html;\r\n\r\nwhile (originalHtml) {\r\n const indexUntilOpenMacro = originalHtml.search(\u0027{{\u0027);\r\n if (indexUntilOpenMacro \u003E= 0) {\r\n newHtml \u002B= originalHtml.substring(0, indexUntilOpenMacro);\r\n originalHtml = originalHtml.substring(indexUntilOpenMacro \u002B 2);\r\n const indexUntilCloseMacro = originalHtml.search(\u0027}}\u0027);\r\n newHtml \u002B= data[originalHtml.substring(0, indexUntilCloseMacro)];\r\n originalHtml = originalHtml.substring(indexUntilCloseMacro \u002B 2);\r\n } else {\r\n break;\r\n }\r\n}\r\n","IsDeferred":false},{"Name":"Segments","Code":"segementList\r\n.map(segment =\u003E {\r\n if (segment.type === \u0027string\u0027) {\r\n return segment.value;\r\n }\r\n\r\n return data[segment.value];\r\n})\r\n.join(\u0027\u0027);\r\n","IsDeferred":false}]}