A better version of regex 101

it works!

huncholaneauthored 3 years ago

parent 743ed59commit 0ac49ee1d65bfd8b76be180dfe499c87d8629b8fBrowse files

3 files changed, +113 -1756

+13-1708index.html

		@@ -14,9 +14,9 @@
14	14	<link rel="stylesheet" type="text/css" href="/static/bundle.5f9425999a8b7f94b3ae.css" id="mainCss">
15	15
16	16	<link rel="preconnect" href="https://fonts.googleapis.com">
17		- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
18		- <link rel="stylesheet"
19		- href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Source+Code+Pro:wght@400;500;700&display=swap"
	17	+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	18	+ <link rel="preload"
	19	+ href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&family=Source+Code+Pro:wght@400;500;700&display=swap"
20	20	as="style" onload="this.onload=null;this.rel='stylesheet'">
21	21
22	22	<link rel="apple-touch-icon" sizes="57x57" href="/static/assets/icon-57.png">
		@@ -36,9 +36,9 @@
36	36	<link rel="icon" type="image/png" sizes="192x192" href="/static/assets/icon-192.png">
37	37
38	38	<link rel="manifest" href="/static/assets/manifest.webmanifest">
39		- <meta name="theme-color" content="#2c5c97">
	39	+ <meta name="theme-color" content="#3366a4">
40	40
41		- <link href="https://regex101.com" rel="home">
	41	+ <link href="https://regex101.com" rel="home" />
42	42	<meta name="viewport"
43	43	content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
44	44	<meta name="keywords"
		@@ -66,1723 +66,28 @@
66	66	<meta property="og:site_name" content="regex101">
67	67	<meta property="og:type" content="website">
68	68
69		- <meta name="google" content="notranslate">
	69	+ <meta name="google" content="notranslate" />
70	70	<title>regex101: build, test, and debug regex</title>
71	71	<script>var l; document.addEventListener("readystatechange", l = function (h) { if ("interactive" === h.target.readyState) { document.removeEventListener("readystatechange", l); try { var c, d, e, a = null == (d = JSON.parse(null == (c = localStorage) ? void 0 : c.getItem("regex101-state"))) ? void 0 : null == (e = d.settings) ? void 0 : e.theme, b, f, g, k = (null == (b = window) ? 0 : null == (f = b.matchMedia) ? 0 : null == (g = f.call(b, "(prefers-color-scheme: dark)")) ? 0 : g.matches) ? "dark" : "light"; document.documentElement.setAttribute("data-theme", a && "AUTO" !== a ? a : k) } catch (m) { console.error("Unable to set theme", m) } } });</script>
72	72	<script>
73	73	window.__INITIAL_STATE__ = '%7B%22account%22%3A%7B%22data%22%3A%5B%5D%2C%22pages%22%3A0%2C%22allTags%22%3A%5B%5D%2C%22staleData%22%3Atrue%7D%2C%22general%22%3A%7B%22permalinkFragment%22%3Anull%2C%22version%22%3Anull%2C%22deleteCode%22%3Anull%2C%22userId%22%3Anull%2C%22email%22%3Anull%2C%22profilePicture%22%3Anull%2C%22serviceProvider%22%3Anull%2C%22isFavorite%22%3Afalse%2C%22isLibraryEntry%22%3Afalse%2C%22title%22%3Anull%2C%22documentTitle%22%3A%22build%2C%20test%2C%20and%20debug%20regex%22%2C%22metaDescription%22%3A%22Regular%20expression%20tester%20with%20syntax%20highlighting%2C%20explanation%2C%20cheat%20sheet%20for%20PHP%2FPCRE%2C%20Python%2C%20GO%2C%20JavaScript%2C%20Java%2C%20C%23%2F.NET.%22%2C%22tags%22%3A%5B%5D%2C%22cookie%22%3A%22%22%2C%22sponsorData%22%3Anull%2C%22currentTheme%22%3A%22AUTO%22%2C%22permalinkIsEditable%22%3Atrue%2C%22isOwner%22%3Afalse%7D%2C%22libraryEntry%22%3A%7B%22title%22%3Anull%2C%22description%22%3Anull%2C%22author%22%3Anull%7D%2C%22quiz%22%3A%7B%22allTasks%22%3A%5B%5D%7D%2C%22regexAreaParser%22%3A%7B%22tokens%22%3A%5B%5D%2C%22subpatterns%22%3A%5B%5D%2C%22captureGroupMap%22%3A%7B%7D%2C%22captureGroupCount%22%3A0%2C%22status%22%3Anull%2C%22definedSubpatterns%22%3A%5B%5D%7D%2C%22regexEditor%22%3A%7B%22flavor%22%3A%22pcre2%22%2C%22delimiter%22%3A%22%2F%22%2C%22flags%22%3A%22gm%22%2C%22regex%22%3A%22%22%2C%22testString%22%3A%22%22%2C%22matchResult%22%3A%5B%5D%2C%22error%22%3Anull%2C%22substString%22%3A%22%22%2C%22listSubstString%22%3A%22%22%2C%22hasUnsavedData%22%3Atrue%2C%22regexVersions%22%3A0%2C%22showMatchArea%22%3Atrue%2C%22showSubstitutionArea%22%3Afalse%2C%22showUnitTestArea%22%3Afalse%2C%22showListSubstitutionArea%22%3Afalse%7D%2C%22regexLibrary%22%3A%7B%22libraryData%22%3A%5B%5D%2C%22pages%22%3A0%2C%22details%22%3Anull%7D%2C%22rightSidebar%22%3A%7B%22activeSubsection%22%3A%22EXPLANATION%22%2C%22visibleSections%22%3A%5B%22EXPLANATION%22%2C%22MATCH_INFO%22%2C%22QUICKREF%22%5D%2C%22hiddenSections%22%3A%5B%5D%2C%22width%22%3Anull%7D%2C%22settings%22%3A%7B%22maxExecutionTime%22%3A2000%2C%22theme%22%3A%22AUTO%22%2C%22nonParticipatingGroups%22%3Afalse%2C%22displayWhitespace%22%3Atrue%2C%22colorizeSyntax%22%3Atrue%2C%22autoComplete%22%3Afalse%2C%22wrapLines%22%3Atrue%2C%22testAreaLineNumbers%22%3Afalse%2C%22regexAreaLineNumbers%22%3Afalse%2C%22language%22%3A%22ENGLISH%22%2C%22storageSaved%22%3Anull%2C%22storageLoaded%22%3Anull%2C%22editorTooltips%22%3Atrue%2C%22alwaysCollapseLeftSidebar%22%3Afalse%2C%22alwaysCollapseRightSidebar%22%3Afalse%2C%22defaultFlavor%22%3A%22pcre2%22%2C%22showWarningUnsavedProgress%22%3Atrue%2C%22defaultCodeGenLanguage%22%3A%22%22%2C%22calculateRegexSteps%22%3Atrue%2C%22defaultTabBehavior%22%3Atrue%2C%22disableKeyboardShortcuts%22%3Afalse%7D%2C%22unitTests%22%3A%7B%22tests%22%3A%5B%5D%2C%22testResults%22%3A%7B%7D%2C%22testsRunning%22%3Afalse%2C%22testFilter%22%3A%22ALL%22%7D%7D';
74	74	</script>
75	75
76		- <script src="/static/vendors-bundle.53dfb75dc94096b1e562.js" defer=""></script>
77		- <script src="/static/bundle.16a1ad9f120f8f00bc91.js" defer=""></script>
	76	+ <script src="/static/vendors-bundle.951c75033b74008308ae.js" defer></script>
	77	+ <script src="/static/bundle.9f9a755d912651405097.js" defer></script>
78	78
79		- <script defer="">
	79	+ <script defer>
80	80	(function () { var a = "Worker" in window, b = "Promise" in window, c = "object" === typeof WebAssembly && "function" === typeof WebAssembly.instantiate; a && b && c \|\| (window.__LEGACY__ = !0, window.addEventListener("load", function () { document.body.innerHTML = '<div style="padding: 60px; max-width: 600px;margin: 0 auto; text-align: center; font-size: 20px; line-height: 1.5;"><div><p>Unfortunately it seems your browser does not meet the criteria to properly render and utilize this website. You need a browser with support for web workers and Web Assembly.</p><a href="http://browsehappy.com/" style="color: blue;">Please upgrade your browser and come back</a></div><p><strong>Note: if you\'re running a newer version of Edge, and still getting this message, check your security settings as they can be preventing webassembly from running.</strong></p><p><strong>Debug results:</strong> Worker=' + a + ", Promise=" + b + ", WASM=" + c + "</strong></p></div>" }, { once: !0 })) })();
81	81	</script>
82	82
83		- <link rel="preload" href="/static/quickref.2c3113f06c479a67c60a.chunk.js" as="script">
84		- <link rel="preload" href="/static/653.6e679a10c3aae1d7e364.css" as="style">
	83	+ <link rel="preload" href="/static/quickref.2c3113f06c479a67c60a.chunk.js" as="script" />
	84	+ <link rel="preload" href="/static/653.6e679a10c3aae1d7e364.css" as="style" />
85	85
86		- <script fetchpriority="low" defer="" data-domain="regex101.com"
	86	+ <script fetchpriority="low" defer data-domain="regex101.com"
87	87	src="https://analytics.regex101.com/js/plausible.js"></script>
88		- <link rel="stylesheet" type="text/css" href="/static/653.6e679a10c3aae1d7e364.css">
89		- <style type="text/css">
90		- body.swal2-shown:not(.swal2-no-backdrop) {
91		- overflow-y: hidden;
92		- }
93		-
94		- body.swal2-toast-shown {
95		- overflow-y: auto;
96		- }
97		-
98		- body.swal2-toast-shown.swal2-has-input>.swal2-container>.swal2-toast {
99		- -webkit-box-orient: vertical;
100		- -webkit-box-direction: normal;
101		- -ms-flex-direction: column;
102		- flex-direction: column;
103		- }
104		-
105		- body.swal2-toast-shown.swal2-has-input>.swal2-container>.swal2-toast .swal2-icon {
106		- margin: 0 0 15px;
107		- }
108		-
109		- body.swal2-toast-shown.swal2-has-input>.swal2-container>.swal2-toast .swal2-buttonswrapper {
110		- -webkit-box-flex: 1;
111		- -ms-flex: 1;
112		- flex: 1;
113		- -ms-flex-item-align: stretch;
114		- align-self: stretch;
115		- -webkit-box-pack: end;
116		- -ms-flex-pack: end;
117		- justify-content: flex-end;
118		- }
119		-
120		- body.swal2-toast-shown.swal2-has-input>.swal2-container>.swal2-toast .swal2-loading {
121		- -webkit-box-pack: center;
122		- -ms-flex-pack: center;
123		- justify-content: center;
124		- }
125		-
126		- body.swal2-toast-shown.swal2-has-input>.swal2-container>.swal2-toast .swal2-input {
127		- height: 32px;
128		- font-size: 14px;
129		- margin: 5px auto;
130		- }
131		-
132		- body.swal2-toast-shown>.swal2-container {
133		- position: fixed;
134		- background-color: transparent;
135		- }
136		-
137		- body.swal2-toast-shown>.swal2-container.swal2-shown {
138		- background-color: transparent;
139		- }
140		-
141		- body.swal2-toast-shown>.swal2-container.swal2-top {
142		- top: 0;
143		- left: 50%;
144		- bottom: auto;
145		- right: auto;
146		- -webkit-transform: translateX(-50%);
147		- transform: translateX(-50%);
148		- }
149		-
150		- body.swal2-toast-shown>.swal2-container.swal2-top-right {
151		- top: 0;
152		- left: auto;
153		- bottom: auto;
154		- right: 0;
155		- }
156		-
157		- body.swal2-toast-shown>.swal2-container.swal2-top-left {
158		- top: 0;
159		- left: 0;
160		- bottom: auto;
161		- right: auto;
162		- }
163		-
164		- body.swal2-toast-shown>.swal2-container.swal2-center-left {
165		- top: 50%;
166		- left: 0;
167		- bottom: auto;
168		- right: auto;
169		- -webkit-transform: translateY(-50%);
170		- transform: translateY(-50%);
171		- }
172		-
173		- body.swal2-toast-shown>.swal2-container.swal2-center {
174		- top: 50%;
175		- left: 50%;
176		- bottom: auto;
177		- right: auto;
178		- -webkit-transform: translate(-50%, -50%);
179		- transform: translate(-50%, -50%);
180		- }
181		-
182		- body.swal2-toast-shown>.swal2-container.swal2-center-right {
183		- top: 50%;
184		- left: auto;
185		- bottom: auto;
186		- right: 0;
187		- -webkit-transform: translateY(-50%);
188		- transform: translateY(-50%);
189		- }
190		-
191		- body.swal2-toast-shown>.swal2-container.swal2-bottom-left {
192		- top: auto;
193		- left: 0;
194		- bottom: 0;
195		- right: auto;
196		- }
197		-
198		- body.swal2-toast-shown>.swal2-container.swal2-bottom {
199		- top: auto;
200		- left: 50%;
201		- bottom: 0;
202		- right: auto;
203		- -webkit-transform: translateX(-50%);
204		- transform: translateX(-50%);
205		- }
206		-
207		- body.swal2-toast-shown>.swal2-container.swal2-bottom-right {
208		- top: auto;
209		- left: auto;
210		- bottom: 0;
211		- right: 0;
212		- }
213		-
214		- body.swal2-iosfix {
215		- position: fixed;
216		- left: 0;
217		- right: 0;
218		- }
219		-
220		- body.swal2-no-backdrop>.swal2-shown {
221		- top: auto;
222		- bottom: auto;
223		- left: auto;
224		- right: auto;
225		- background-color: transparent;
226		- }
227		-
228		- body.swal2-no-backdrop>.swal2-shown>.swal2-modal {
229		- -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
230		- box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
231		- }
232		-
233		- body.swal2-no-backdrop>.swal2-shown.swal2-top {
234		- top: 0;
235		- left: 50%;
236		- -webkit-transform: translateX(-50%);
237		- transform: translateX(-50%);
238		- }
239		-
240		- body.swal2-no-backdrop>.swal2-shown.swal2-top-left {
241		- top: 0;
242		- left: 0;
243		- }
244		-
245		- body.swal2-no-backdrop>.swal2-shown.swal2-top-right {
246		- top: 0;
247		- right: 0;
248		- }
249		-
250		- body.swal2-no-backdrop>.swal2-shown.swal2-center {
251		- top: 50%;
252		- left: 50%;
253		- -webkit-transform: translate(-50%, -50%);
254		- transform: translate(-50%, -50%);
255		- }
256		-
257		- body.swal2-no-backdrop>.swal2-shown.swal2-center-left {
258		- top: 50%;
259		- left: 0;
260		- -webkit-transform: translateY(-50%);
261		- transform: translateY(-50%);
262		- }
263		-
264		- body.swal2-no-backdrop>.swal2-shown.swal2-center-right {
265		- top: 50%;
266		- right: 0;
267		- -webkit-transform: translateY(-50%);
268		- transform: translateY(-50%);
269		- }
270		-
271		- body.swal2-no-backdrop>.swal2-shown.swal2-bottom {
272		- bottom: 0;
273		- left: 50%;
274		- -webkit-transform: translateX(-50%);
275		- transform: translateX(-50%);
276		- }
277		-
278		- body.swal2-no-backdrop>.swal2-shown.swal2-bottom-left {
279		- bottom: 0;
280		- left: 0;
281		- }
282		-
283		- body.swal2-no-backdrop>.swal2-shown.swal2-bottom-right {
284		- bottom: 0;
285		- right: 0;
286		- }
287		-
288		- .swal2-container {
289		- display: -webkit-box;
290		- display: -ms-flexbox;
291		- display: flex;
292		- -webkit-box-orient: horizontal;
293		- -webkit-box-direction: normal;
294		- -ms-flex-direction: row;
295		- flex-direction: row;
296		- -webkit-box-align: center;
297		- -ms-flex-align: center;
298		- align-items: center;
299		- -webkit-box-pack: center;
300		- -ms-flex-pack: center;
301		- justify-content: center;
302		- position: fixed;
303		- padding: 10px;
304		- top: 0;
305		- left: 0;
306		- right: 0;
307		- bottom: 0;
308		- background-color: transparent;
309		- z-index: 1060;
310		- }
311		-
312		- .swal2-container.swal2-top {
313		- -webkit-box-align: start;
314		- -ms-flex-align: start;
315		- align-items: flex-start;
316		- }
317		-
318		- .swal2-container.swal2-top-left {
319		- -webkit-box-align: start;
320		- -ms-flex-align: start;
321		- align-items: flex-start;
322		- -webkit-box-pack: start;
323		- -ms-flex-pack: start;
324		- justify-content: flex-start;
325		- }
326		-
327		- .swal2-container.swal2-top-right {
328		- -webkit-box-align: start;
329		- -ms-flex-align: start;
330		- align-items: flex-start;
331		- -webkit-box-pack: end;
332		- -ms-flex-pack: end;
333		- justify-content: flex-end;
334		- }
335		-
336		- .swal2-container.swal2-center {
337		- -webkit-box-align: center;
338		- -ms-flex-align: center;
339		- align-items: center;
340		- }
341		-
342		- .swal2-container.swal2-center-left {
343		- -webkit-box-align: center;
344		- -ms-flex-align: center;
345		- align-items: center;
346		- -webkit-box-pack: start;
347		- -ms-flex-pack: start;
348		- justify-content: flex-start;
349		- }
350		-
351		- .swal2-container.swal2-center-right {
352		- -webkit-box-align: center;
353		- -ms-flex-align: center;
354		- align-items: center;
355		- -webkit-box-pack: end;
356		- -ms-flex-pack: end;
357		- justify-content: flex-end;
358		- }
359		-
360		- .swal2-container.swal2-bottom {
361		- -webkit-box-align: end;
362		- -ms-flex-align: end;
363		- align-items: flex-end;
364		- }
365		-
366		- .swal2-container.swal2-bottom-left {
367		- -webkit-box-align: end;
368		- -ms-flex-align: end;
369		- align-items: flex-end;
370		- -webkit-box-pack: start;
371		- -ms-flex-pack: start;
372		- justify-content: flex-start;
373		- }
374		-
375		- .swal2-container.swal2-bottom-right {
376		- -webkit-box-align: end;
377		- -ms-flex-align: end;
378		- align-items: flex-end;
379		- -webkit-box-pack: end;
380		- -ms-flex-pack: end;
381		- justify-content: flex-end;
382		- }
383		-
384		- .swal2-container.swal2-grow-fullscreen>.swal2-modal {
385		- display: -webkit-box !important;
386		- display: -ms-flexbox !important;
387		- display: flex !important;
388		- -webkit-box-flex: 1;
389		- -ms-flex: 1;
390		- flex: 1;
391		- -ms-flex-item-align: stretch;
392		- align-self: stretch;
393		- -webkit-box-pack: center;
394		- -ms-flex-pack: center;
395		- justify-content: center;
396		- }
397		-
398		- .swal2-container.swal2-grow-row>.swal2-modal {
399		- display: -webkit-box !important;
400		- display: -ms-flexbox !important;
401		- display: flex !important;
402		- -webkit-box-flex: 1;
403		- -ms-flex: 1;
404		- flex: 1;
405		- -ms-flex-line-pack: center;
406		- align-content: center;
407		- -webkit-box-pack: center;
408		- -ms-flex-pack: center;
409		- justify-content: center;
410		- }
411		-
412		- .swal2-container.swal2-grow-column {
413		- -webkit-box-flex: 1;
414		- -ms-flex: 1;
415		- flex: 1;
416		- -webkit-box-orient: vertical;
417		- -webkit-box-direction: normal;
418		- -ms-flex-direction: column;
419		- flex-direction: column;
420		- }
421		-
422		- .swal2-container.swal2-grow-column.swal2-top,
423		- .swal2-container.swal2-grow-column.swal2-center,
424		- .swal2-container.swal2-grow-column.swal2-bottom {
425		- -webkit-box-align: center;
426		- -ms-flex-align: center;
427		- align-items: center;
428		- }
429		-
430		- .swal2-container.swal2-grow-column.swal2-top-left,
431		- .swal2-container.swal2-grow-column.swal2-center-left,
432		- .swal2-container.swal2-grow-column.swal2-bottom-left {
433		- -webkit-box-align: start;
434		- -ms-flex-align: start;
435		- align-items: flex-start;
436		- }
437		-
438		- .swal2-container.swal2-grow-column.swal2-top-right,
439		- .swal2-container.swal2-grow-column.swal2-center-right,
440		- .swal2-container.swal2-grow-column.swal2-bottom-right {
441		- -webkit-box-align: end;
442		- -ms-flex-align: end;
443		- align-items: flex-end;
444		- }
445		-
446		- .swal2-container.swal2-grow-column>.swal2-modal {
447		- display: -webkit-box !important;
448		- display: -ms-flexbox !important;
449		- display: flex !important;
450		- -webkit-box-flex: 1;
451		- -ms-flex: 1;
452		- flex: 1;
453		- -ms-flex-line-pack: center;
454		- align-content: center;
455		- -webkit-box-pack: center;
456		- -ms-flex-pack: center;
457		- justify-content: center;
458		- }
459		-
460		- .swal2-container:not(.swal2-top):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-left):not(.swal2-bottom-right)>.swal2-modal {
461		- margin: auto;
462		- }
463		-
464		- @media all and (-ms-high-contrast: none),
465		- (-ms-high-contrast: active) {
466		- .swal2-container .swal2-modal {
467		- margin: 0 !important;
468		- }
469		- }
470		-
471		- .swal2-container.swal2-fade {
472		- -webkit-transition: background-color .1s;
473		- transition: background-color .1s;
474		- }
475		-
476		- .swal2-container.swal2-shown {
477		- background-color: rgba(0, 0, 0, 0.4);
478		- }
479		-
480		- .swal2-popup {
481		- -webkit-box-orient: vertical;
482		- -webkit-box-direction: normal;
483		- -ms-flex-direction: column;
484		- flex-direction: column;
485		- background-color: #fff;
486		- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
487		- border-radius: 5px;
488		- -webkit-box-sizing: border-box;
489		- box-sizing: border-box;
490		- text-align: center;
491		- overflow-x: hidden;
492		- overflow-y: auto;
493		- display: none;
494		- position: relative;
495		- max-width: 100%;
496		- }
497		-
498		- .swal2-popup.swal2-toast {
499		- width: 300px;
500		- padding: 0 15px;
501		- -webkit-box-orient: horizontal;
502		- -webkit-box-direction: normal;
503		- -ms-flex-direction: row;
504		- flex-direction: row;
505		- -webkit-box-align: center;
506		- -ms-flex-align: center;
507		- align-items: center;
508		- overflow-y: hidden;
509		- -webkit-box-shadow: 0 0 10px #d9d9d9;
510		- box-shadow: 0 0 10px #d9d9d9;
511		- }
512		-
513		- .swal2-popup.swal2-toast .swal2-title {
514		- max-width: 300px;
515		- font-size: 16px;
516		- text-align: left;
517		- }
518		-
519		- .swal2-popup.swal2-toast .swal2-content {
520		- font-size: 14px;
521		- text-align: left;
522		- }
523		-
524		- .swal2-popup.swal2-toast .swal2-icon {
525		- width: 32px;
526		- height: 32px;
527		- margin: 0 15px 0 0;
528		- }
529		-
530		- .swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
531		- width: 32px;
532		- height: 32px;
533		- }
534		-
535		- .swal2-popup.swal2-toast .swal2-icon.swal2-info,
536		- .swal2-popup.swal2-toast .swal2-icon.swal2-warning,
537		- .swal2-popup.swal2-toast .swal2-icon.swal2-question {
538		- font-size: 26px;
539		- line-height: 32px;
540		- }
541		-
542		- .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
543		- top: 14px;
544		- width: 22px;
545		- }
546		-
547		- .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='left'] {
548		- left: 5px;
549		- }
550		-
551		- .swal2-popup.swal2-toast .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='right'] {
552		- right: 5px;
553		- }
554		-
555		- .swal2-popup.swal2-toast .swal2-buttonswrapper {
556		- margin: 0 0 0 5px;
557		- }
558		-
559		- .swal2-popup.swal2-toast .swal2-styled {
560		- margin: 0 0 0 5px;
561		- padding: 5px 10px;
562		- }
563		-
564		- .swal2-popup.swal2-toast .swal2-styled:focus {
565		- -webkit-box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(50, 100, 150, 0.4);
566		- box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(50, 100, 150, 0.4);
567		- }
568		-
569		- .swal2-popup.swal2-toast .swal2-validationerror {
570		- width: 100%;
571		- margin: 5px -20px;
572		- }
573		-
574		- .swal2-popup.swal2-toast .swal2-success {
575		- border-color: #a5dc86;
576		- }
577		-
578		- .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'] {
579		- border-radius: 50%;
580		- position: absolute;
581		- width: 32px;
582		- height: 64px;
583		- -webkit-transform: rotate(45deg);
584		- transform: rotate(45deg);
585		- }
586		-
587		- .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'][class$='left'] {
588		- border-radius: 64px 0 0 64px;
589		- top: -4px;
590		- left: -15px;
591		- -webkit-transform: rotate(-45deg);
592		- transform: rotate(-45deg);
593		- -webkit-transform-origin: 32px 32px;
594		- transform-origin: 32px 32px;
595		- }
596		-
597		- .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-circular-line'][class$='right'] {
598		- border-radius: 0 64px 64px 0;
599		- top: -5px;
600		- left: 14px;
601		- -webkit-transform-origin: 0 32px;
602		- transform-origin: 0 32px;
603		- }
604		-
605		- .swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
606		- width: 32px;
607		- height: 32px;
608		- }
609		-
610		- .swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
611		- width: 7px;
612		- height: 90px;
613		- left: 28px;
614		- top: 8px;
615		- }
616		-
617		- .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'] {
618		- height: 5px;
619		- }
620		-
621		- .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'][class$='tip'] {
622		- width: 12px;
623		- left: 3px;
624		- top: 18px;
625		- }
626		-
627		- .swal2-popup.swal2-toast .swal2-success [class^='swal2-success-line'][class$='long'] {
628		- width: 22px;
629		- right: 3px;
630		- top: 15px;
631		- }
632		-
633		- .swal2-popup.swal2-toast .swal2-animate-success-line-tip {
634		- -webkit-animation: animate-toast-success-tip .75s;
635		- animation: animate-toast-success-tip .75s;
636		- }
637		-
638		- .swal2-popup.swal2-toast .swal2-animate-success-line-long {
639		- -webkit-animation: animate-toast-success-long .75s;
640		- animation: animate-toast-success-long .75s;
641		- }
642		-
643		- .swal2-popup:focus {
644		- outline: none;
645		- }
646		-
647		- .swal2-popup.swal2-loading {
648		- overflow-y: hidden;
649		- }
650		-
651		- .swal2-popup .swal2-title {
652		- color: #595959;
653		- font-size: 30px;
654		- text-align: center;
655		- font-weight: 600;
656		- text-transform: none;
657		- position: relative;
658		- margin: 0 0 .4em;
659		- padding: 0;
660		- display: block;
661		- word-wrap: break-word;
662		- }
663		-
664		- .swal2-popup .swal2-buttonswrapper {
665		- -webkit-box-align: center;
666		- -ms-flex-align: center;
667		- align-items: center;
668		- -webkit-box-pack: center;
669		- -ms-flex-pack: center;
670		- justify-content: center;
671		- margin-top: 15px;
672		- }
673		-
674		- .swal2-popup .swal2-buttonswrapper:not(.swal2-loading) .swal2-styled[disabled] {
675		- opacity: .4;
676		- cursor: no-drop;
677		- }
678		-
679		- .swal2-popup .swal2-buttonswrapper.swal2-loading .swal2-styled.swal2-confirm {
680		- -webkit-box-sizing: border-box;
681		- box-sizing: border-box;
682		- border: 4px solid transparent;
683		- border-color: transparent;
684		- width: 40px;
685		- height: 40px;
686		- padding: 0;
687		- margin: 7.5px;
688		- vertical-align: top;
689		- background-color: transparent !important;
690		- color: transparent;
691		- cursor: default;
692		- border-radius: 100%;
693		- -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
694		- animation: rotate-loading 1.5s linear 0s infinite normal;
695		- -webkit-user-select: none;
696		- -moz-user-select: none;
697		- -ms-user-select: none;
698		- user-select: none;
699		- }
700		-
701		- .swal2-popup .swal2-buttonswrapper.swal2-loading .swal2-styled.swal2-cancel {
702		- margin-left: 30px;
703		- margin-right: 30px;
704		- }
705		-
706		- .swal2-popup .swal2-buttonswrapper.swal2-loading :not(.swal2-styled).swal2-confirm::after {
707		- display: inline-block;
708		- content: '';
709		- margin-left: 5px;
710		- vertical-align: -1px;
711		- height: 15px;
712		- width: 15px;
713		- border: 3px solid #999999;
714		- -webkit-box-shadow: 1px 1px 1px #fff;
715		- box-shadow: 1px 1px 1px #fff;
716		- border-right-color: transparent;
717		- border-radius: 50%;
718		- -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
719		- animation: rotate-loading 1.5s linear 0s infinite normal;
720		- }
721		-
722		- .swal2-popup .swal2-styled {
723		- border: 0;
724		- border-radius: 3px;
725		- -webkit-box-shadow: none;
726		- box-shadow: none;
727		- color: #fff;
728		- cursor: pointer;
729		- font-size: 17px;
730		- font-weight: 500;
731		- margin: 15px 5px 0;
732		- padding: 10px 32px;
733		- }
734		-
735		- .swal2-popup .swal2-styled:focus {
736		- outline: none;
737		- -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(50, 100, 150, 0.4);
738		- box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(50, 100, 150, 0.4);
739		- }
740		-
741		- .swal2-popup .swal2-image {
742		- margin: 20px auto;
743		- max-width: 100%;
744		- }
745		-
746		- .swal2-popup .swal2-close {
747		- background: transparent;
748		- border: 0;
749		- margin: 0;
750		- padding: 0;
751		- width: 38px;
752		- height: 40px;
753		- font-size: 36px;
754		- line-height: 40px;
755		- font-family: serif;
756		- position: absolute;
757		- top: 5px;
758		- right: 8px;
759		- cursor: pointer;
760		- color: #cccccc;
761		- -webkit-transition: color .1s ease;
762		- transition: color .1s ease;
763		- }
764		-
765		- .swal2-popup .swal2-close:hover {
766		- color: #d55;
767		- }
768		-
769		- .swal2-popup>.swal2-input,
770		- .swal2-popup>.swal2-file,
771		- .swal2-popup>.swal2-textarea,
772		- .swal2-popup>.swal2-select,
773		- .swal2-popup>.swal2-radio,
774		- .swal2-popup>.swal2-checkbox {
775		- display: none;
776		- }
777		-
778		- .swal2-popup .swal2-content {
779		- font-size: 18px;
780		- text-align: center;
781		- font-weight: 300;
782		- position: relative;
783		- float: none;
784		- margin: 0;
785		- padding: 0;
786		- line-height: normal;
787		- color: #545454;
788		- word-wrap: break-word;
789		- }
790		-
791		- .swal2-popup .swal2-input,
792		- .swal2-popup .swal2-file,
793		- .swal2-popup .swal2-textarea,
794		- .swal2-popup .swal2-select,
795		- .swal2-popup .swal2-radio,
796		- .swal2-popup .swal2-checkbox {
797		- margin: 20px auto;
798		- }
799		-
800		- .swal2-popup .swal2-input,
801		- .swal2-popup .swal2-file,
802		- .swal2-popup .swal2-textarea {
803		- width: 100%;
804		- -webkit-box-sizing: border-box;
805		- box-sizing: border-box;
806		- font-size: 18px;
807		- border-radius: 3px;
808		- border: 1px solid #d9d9d9;
809		- -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06);
810		- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06);
811		- -webkit-transition: border-color .3s, -webkit-box-shadow .3s;
812		- transition: border-color .3s, -webkit-box-shadow .3s;
813		- transition: border-color .3s, box-shadow .3s;
814		- transition: border-color .3s, box-shadow .3s, -webkit-box-shadow .3s;
815		- }
816		-
817		- .swal2-popup .swal2-input.swal2-inputerror,
818		- .swal2-popup .swal2-file.swal2-inputerror,
819		- .swal2-popup .swal2-textarea.swal2-inputerror {
820		- border-color: #f27474 !important;
821		- -webkit-box-shadow: 0 0 2px #f27474 !important;
822		- box-shadow: 0 0 2px #f27474 !important;
823		- }
824		-
825		- .swal2-popup .swal2-input:focus,
826		- .swal2-popup .swal2-file:focus,
827		- .swal2-popup .swal2-textarea:focus {
828		- outline: none;
829		- border: 1px solid #b4dbed;
830		- -webkit-box-shadow: 0 0 3px #c4e6f5;
831		- box-shadow: 0 0 3px #c4e6f5;
832		- }
833		-
834		- .swal2-popup .swal2-input::-webkit-input-placeholder,
835		- .swal2-popup .swal2-file::-webkit-input-placeholder,
836		- .swal2-popup .swal2-textarea::-webkit-input-placeholder {
837		- color: #cccccc;
838		- }
839		-
840		- .swal2-popup .swal2-input:-ms-input-placeholder,
841		- .swal2-popup .swal2-file:-ms-input-placeholder,
842		- .swal2-popup .swal2-textarea:-ms-input-placeholder {
843		- color: #cccccc;
844		- }
845		-
846		- .swal2-popup .swal2-input::-ms-input-placeholder,
847		- .swal2-popup .swal2-file::-ms-input-placeholder,
848		- .swal2-popup .swal2-textarea::-ms-input-placeholder {
849		- color: #cccccc;
850		- }
851		-
852		- .swal2-popup .swal2-input::placeholder,
853		- .swal2-popup .swal2-file::placeholder,
854		- .swal2-popup .swal2-textarea::placeholder {
855		- color: #cccccc;
856		- }
857		-
858		- .swal2-popup .swal2-range input {
859		- float: left;
860		- width: 80%;
861		- }
862		-
863		- .swal2-popup .swal2-range output {
864		- float: right;
865		- width: 20%;
866		- font-size: 20px;
867		- font-weight: 600;
868		- text-align: center;
869		- }
870		-
871		- .swal2-popup .swal2-range input,
872		- .swal2-popup .swal2-range output {
873		- height: 43px;
874		- line-height: 43px;
875		- vertical-align: middle;
876		- margin: 20px auto;
877		- padding: 0;
878		- }
879		-
880		- .swal2-popup .swal2-input {
881		- height: 43px;
882		- padding: 0 12px;
883		- }
884		-
885		- .swal2-popup .swal2-input[type='number'] {
886		- max-width: 150px;
887		- }
888		-
889		- .swal2-popup .swal2-file {
890		- font-size: 20px;
891		- }
892		-
893		- .swal2-popup .swal2-textarea {
894		- height: 108px;
895		- padding: 12px;
896		- }
897		-
898		- .swal2-popup .swal2-select {
899		- color: #545454;
900		- font-size: inherit;
901		- padding: 5px 10px;
902		- min-width: 40%;
903		- max-width: 100%;
904		- }
905		-
906		- .swal2-popup .swal2-radio {
907		- border: 0;
908		- }
909		-
910		- .swal2-popup .swal2-radio label:not(:first-child) {
911		- margin-left: 20px;
912		- }
913		-
914		- .swal2-popup .swal2-radio input,
915		- .swal2-popup .swal2-radio span {
916		- vertical-align: middle;
917		- }
918		-
919		- .swal2-popup .swal2-radio input {
920		- margin: 0 3px 0 0;
921		- }
922		-
923		- .swal2-popup .swal2-checkbox {
924		- color: #545454;
925		- }
926		-
927		- .swal2-popup .swal2-checkbox input,
928		- .swal2-popup .swal2-checkbox span {
929		- vertical-align: middle;
930		- }
931		-
932		- .swal2-popup .swal2-validationerror {
933		- background-color: #f0f0f0;
934		- margin: 0 -20px;
935		- overflow: hidden;
936		- padding: 10px;
937		- color: gray;
938		- font-size: 16px;
939		- font-weight: 300;
940		- display: none;
941		- }
942		-
943		- .swal2-popup .swal2-validationerror::before {
944		- content: '!';
945		- display: inline-block;
946		- width: 24px;
947		- height: 24px;
948		- border-radius: 50%;
949		- background-color: #ea7d7d;
950		- color: #fff;
951		- line-height: 24px;
952		- text-align: center;
953		- margin-right: 10px;
954		- }
955		-
956		- @supports (-ms-accelerator: true) {
957		- .swal2-range input {
958		- width: 100% !important;
959		- }
960		-
961		- .swal2-range output {
962		- display: none;
963		- }
964		- }
965		-
966		- @media all and (-ms-high-contrast: none),
967		- (-ms-high-contrast: active) {
968		- .swal2-range input {
969		- width: 100% !important;
970		- }
971		-
972		- .swal2-range output {
973		- display: none;
974		- }
975		- }
976		-
977		- .swal2-icon {
978		- width: 80px;
979		- height: 80px;
980		- border: 4px solid transparent;
981		- border-radius: 50%;
982		- margin: 20px auto 30px;
983		- padding: 0;
984		- position: relative;
985		- -webkit-box-sizing: content-box;
986		- box-sizing: content-box;
987		- cursor: default;
988		- -webkit-user-select: none;
989		- -moz-user-select: none;
990		- -ms-user-select: none;
991		- user-select: none;
992		- }
993		-
994		- .swal2-icon.swal2-error {
995		- border-color: #f27474;
996		- }
997		-
998		- .swal2-icon.swal2-error .swal2-x-mark {
999		- position: relative;
1000		- display: block;
1001		- }
1002		-
1003		- .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
1004		- position: absolute;
1005		- height: 5px;
1006		- width: 47px;
1007		- background-color: #f27474;
1008		- display: block;
1009		- top: 37px;
1010		- border-radius: 2px;
1011		- }
1012		-
1013		- .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='left'] {
1014		- -webkit-transform: rotate(45deg);
1015		- transform: rotate(45deg);
1016		- left: 17px;
1017		- }
1018		-
1019		- .swal2-icon.swal2-error [class^='swal2-x-mark-line'][class$='right'] {
1020		- -webkit-transform: rotate(-45deg);
1021		- transform: rotate(-45deg);
1022		- right: 16px;
1023		- }
1024		-
1025		- .swal2-icon.swal2-warning {
1026		- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
1027		- color: #f8bb86;
1028		- border-color: #facea8;
1029		- font-size: 60px;
1030		- line-height: 80px;
1031		- text-align: center;
1032		- }
1033		-
1034		- .swal2-icon.swal2-info {
1035		- font-family: 'Open Sans', sans-serif;
1036		- color: #3fc3ee;
1037		- border-color: #9de0f6;
1038		- font-size: 60px;
1039		- line-height: 80px;
1040		- text-align: center;
1041		- }
1042		-
1043		- .swal2-icon.swal2-question {
1044		- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
1045		- color: #87adbd;
1046		- border-color: #c9dae1;
1047		- font-size: 60px;
1048		- line-height: 80px;
1049		- text-align: center;
1050		- }
1051		-
1052		- .swal2-icon.swal2-success {
1053		- border-color: #a5dc86;
1054		- }
1055		-
1056		- .swal2-icon.swal2-success [class^='swal2-success-circular-line'] {
1057		- border-radius: 50%;
1058		- position: absolute;
1059		- width: 60px;
1060		- height: 120px;
1061		- -webkit-transform: rotate(45deg);
1062		- transform: rotate(45deg);
1063		- }
1064		-
1065		- .swal2-icon.swal2-success [class^='swal2-success-circular-line'][class$='left'] {
1066		- border-radius: 120px 0 0 120px;
1067		- top: -7px;
1068		- left: -33px;
1069		- -webkit-transform: rotate(-45deg);
1070		- transform: rotate(-45deg);
1071		- -webkit-transform-origin: 60px 60px;
1072		- transform-origin: 60px 60px;
1073		- }
1074		-
1075		- .swal2-icon.swal2-success [class^='swal2-success-circular-line'][class$='right'] {
1076		- border-radius: 0 120px 120px 0;
1077		- top: -11px;
1078		- left: 30px;
1079		- -webkit-transform: rotate(-45deg);
1080		- transform: rotate(-45deg);
1081		- -webkit-transform-origin: 0 60px;
1082		- transform-origin: 0 60px;
1083		- }
1084		-
1085		- .swal2-icon.swal2-success .swal2-success-ring {
1086		- width: 80px;
1087		- height: 80px;
1088		- border: 4px solid rgba(165, 220, 134, 0.2);
1089		- border-radius: 50%;
1090		- -webkit-box-sizing: content-box;
1091		- box-sizing: content-box;
1092		- position: absolute;
1093		- left: -4px;
1094		- top: -4px;
1095		- z-index: 2;
1096		- }
1097		-
1098		- .swal2-icon.swal2-success .swal2-success-fix {
1099		- width: 7px;
1100		- height: 90px;
1101		- position: absolute;
1102		- left: 28px;
1103		- top: 8px;
1104		- z-index: 1;
1105		- -webkit-transform: rotate(-45deg);
1106		- transform: rotate(-45deg);
1107		- }
1108		-
1109		- .swal2-icon.swal2-success [class^='swal2-success-line'] {
1110		- height: 5px;
1111		- background-color: #a5dc86;
1112		- display: block;
1113		- border-radius: 2px;
1114		- position: absolute;
1115		- z-index: 2;
1116		- }
1117		-
1118		- .swal2-icon.swal2-success [class^='swal2-success-line'][class$='tip'] {
1119		- width: 25px;
1120		- left: 14px;
1121		- top: 46px;
1122		- -webkit-transform: rotate(45deg);
1123		- transform: rotate(45deg);
1124		- }
1125		-
1126		- .swal2-icon.swal2-success [class^='swal2-success-line'][class$='long'] {
1127		- width: 47px;
1128		- right: 8px;
1129		- top: 38px;
1130		- -webkit-transform: rotate(-45deg);
1131		- transform: rotate(-45deg);
1132		- }
1133		-
1134		- .swal2-progresssteps {
1135		- font-weight: 600;
1136		- margin: 0 0 20px;
1137		- padding: 0;
1138		- }
1139		-
1140		- .swal2-progresssteps li {
1141		- display: inline-block;
1142		- position: relative;
1143		- }
1144		-
1145		- .swal2-progresssteps .swal2-progresscircle {
1146		- background: #3085d6;
1147		- border-radius: 2em;
1148		- color: #fff;
1149		- height: 2em;
1150		- line-height: 2em;
1151		- text-align: center;
1152		- width: 2em;
1153		- z-index: 20;
1154		- }
1155		-
1156		- .swal2-progresssteps .swal2-progresscircle:first-child {
1157		- margin-left: 0;
1158		- }
1159		-
1160		- .swal2-progresssteps .swal2-progresscircle:last-child {
1161		- margin-right: 0;
1162		- }
1163		-
1164		- .swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep {
1165		- background: #3085d6;
1166		- }
1167		-
1168		- .swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep~.swal2-progresscircle {
1169		- background: #add8e6;
1170		- }
1171		-
1172		- .swal2-progresssteps .swal2-progresscircle.swal2-activeprogressstep~.swal2-progressline {
1173		- background: #add8e6;
1174		- }
1175		-
1176		- .swal2-progresssteps .swal2-progressline {
1177		- background: #3085d6;
1178		- height: .4em;
1179		- margin: 0 -1px;
1180		- z-index: 10;
1181		- }
1182		-
1183		- [class^='swal2'] {
1184		- -webkit-tap-highlight-color: transparent;
1185		- }
1186		-
1187		- @-webkit-keyframes showSweetToast {
1188		- 0% {
1189		- -webkit-transform: translateY(-10px) rotateZ(2deg);
1190		- transform: translateY(-10px) rotateZ(2deg);
1191		- opacity: 0;
1192		- }
1193		-
1194		- 33% {
1195		- -webkit-transform: translateY(0) rotateZ(-2deg);
1196		- transform: translateY(0) rotateZ(-2deg);
1197		- opacity: .5;
1198		- }
1199		-
1200		- 66% {
1201		- -webkit-transform: translateY(5px) rotateZ(2deg);
1202		- transform: translateY(5px) rotateZ(2deg);
1203		- opacity: .7;
1204		- }
1205		-
1206		- 100% {
1207		- -webkit-transform: translateY(0) rotateZ(0);
1208		- transform: translateY(0) rotateZ(0);
1209		- opacity: 1;
1210		- }
1211		- }
1212		-
1213		- @keyframes showSweetToast {
1214		- 0% {
1215		- -webkit-transform: translateY(-10px) rotateZ(2deg);
1216		- transform: translateY(-10px) rotateZ(2deg);
1217		- opacity: 0;
1218		- }
1219		-
1220		- 33% {
1221		- -webkit-transform: translateY(0) rotateZ(-2deg);
1222		- transform: translateY(0) rotateZ(-2deg);
1223		- opacity: .5;
1224		- }
1225		-
1226		- 66% {
1227		- -webkit-transform: translateY(5px) rotateZ(2deg);
1228		- transform: translateY(5px) rotateZ(2deg);
1229		- opacity: .7;
1230		- }
1231		-
1232		- 100% {
1233		- -webkit-transform: translateY(0) rotateZ(0);
1234		- transform: translateY(0) rotateZ(0);
1235		- opacity: 1;
1236		- }
1237		- }
1238		-
1239		- @-webkit-keyframes hideSweetToast {
1240		- 0% {
1241		- opacity: 1;
1242		- }
1243		-
1244		- 33% {
1245		- opacity: .5;
1246		- }
1247		-
1248		- 100% {
1249		- -webkit-transform: rotateZ(1deg);
1250		- transform: rotateZ(1deg);
1251		- opacity: 0;
1252		- }
1253		- }
1254		-
1255		- @keyframes hideSweetToast {
1256		- 0% {
1257		- opacity: 1;
1258		- }
1259		-
1260		- 33% {
1261		- opacity: .5;
1262		- }
1263		-
1264		- 100% {
1265		- -webkit-transform: rotateZ(1deg);
1266		- transform: rotateZ(1deg);
1267		- opacity: 0;
1268		- }
1269		- }
1270		-
1271		- @-webkit-keyframes showSweetAlert {
1272		- 0% {
1273		- -webkit-transform: scale(0.7);
1274		- transform: scale(0.7);
1275		- }
1276		-
1277		- 45% {
1278		- -webkit-transform: scale(1.05);
1279		- transform: scale(1.05);
1280		- }
1281		-
1282		- 80% {
1283		- -webkit-transform: scale(0.95);
1284		- transform: scale(0.95);
1285		- }
1286		-
1287		- 100% {
1288		- -webkit-transform: scale(1);
1289		- transform: scale(1);
1290		- }
1291		- }
1292		-
1293		- @keyframes showSweetAlert {
1294		- 0% {
1295		- -webkit-transform: scale(0.7);
1296		- transform: scale(0.7);
1297		- }
1298		-
1299		- 45% {
1300		- -webkit-transform: scale(1.05);
1301		- transform: scale(1.05);
1302		- }
1303		-
1304		- 80% {
1305		- -webkit-transform: scale(0.95);
1306		- transform: scale(0.95);
1307		- }
1308		-
1309		- 100% {
1310		- -webkit-transform: scale(1);
1311		- transform: scale(1);
1312		- }
1313		- }
1314		-
1315		- @-webkit-keyframes hideSweetAlert {
1316		- 0% {
1317		- -webkit-transform: scale(1);
1318		- transform: scale(1);
1319		- opacity: 1;
1320		- }
1321		-
1322		- 100% {
1323		- -webkit-transform: scale(0.5);
1324		- transform: scale(0.5);
1325		- opacity: 0;
1326		- }
1327		- }
1328		-
1329		- @keyframes hideSweetAlert {
1330		- 0% {
1331		- -webkit-transform: scale(1);
1332		- transform: scale(1);
1333		- opacity: 1;
1334		- }
1335		-
1336		- 100% {
1337		- -webkit-transform: scale(0.5);
1338		- transform: scale(0.5);
1339		- opacity: 0;
1340		- }
1341		- }
1342		-
1343		- .swal2-show {
1344		- -webkit-animation: showSweetAlert .3s;
1345		- animation: showSweetAlert .3s;
1346		- }
1347		-
1348		- .swal2-show.swal2-toast {
1349		- -webkit-animation: showSweetToast .5s;
1350		- animation: showSweetToast .5s;
1351		- }
1352		-
1353		- .swal2-show.swal2-noanimation {
1354		- -webkit-animation: none;
1355		- animation: none;
1356		- }
1357		-
1358		- .swal2-hide {
1359		- -webkit-animation: hideSweetAlert .15s forwards;
1360		- animation: hideSweetAlert .15s forwards;
1361		- }
1362		-
1363		- .swal2-hide.swal2-toast {
1364		- -webkit-animation: hideSweetToast .2s forwards;
1365		- animation: hideSweetToast .2s forwards;
1366		- }
1367		-
1368		- .swal2-hide.swal2-noanimation {
1369		- -webkit-animation: none;
1370		- animation: none;
1371		- }
1372		-
1373		- @-webkit-keyframes animate-success-tip {
1374		- 0% {
1375		- width: 0;
1376		- left: 1px;
1377		- top: 19px;
1378		- }
1379		-
1380		- 54% {
1381		- width: 0;
1382		- left: 1px;
1383		- top: 19px;
1384		- }
1385		-
1386		- 70% {
1387		- width: 50px;
1388		- left: -8px;
1389		- top: 37px;
1390		- }
1391		-
1392		- 84% {
1393		- width: 17px;
1394		- left: 21px;
1395		- top: 48px;
1396		- }
1397		-
1398		- 100% {
1399		- width: 25px;
1400		- left: 14px;
1401		- top: 45px;
1402		- }
1403		- }
1404		-
1405		- @keyframes animate-success-tip {
1406		- 0% {
1407		- width: 0;
1408		- left: 1px;
1409		- top: 19px;
1410		- }
1411		-
1412		- 54% {
1413		- width: 0;
1414		- left: 1px;
1415		- top: 19px;
1416		- }
1417		-
1418		- 70% {
1419		- width: 50px;
1420		- left: -8px;
1421		- top: 37px;
1422		- }
1423		-
1424		- 84% {
1425		- width: 17px;
1426		- left: 21px;
1427		- top: 48px;
1428		- }
1429		-
1430		- 100% {
1431		- width: 25px;
1432		- left: 14px;
1433		- top: 45px;
1434		- }
1435		- }
1436		-
1437		- @-webkit-keyframes animate-success-long {
1438		- 0% {
1439		- width: 0;
1440		- right: 46px;
1441		- top: 54px;
1442		- }
1443		-
1444		- 65% {
1445		- width: 0;
1446		- right: 46px;
1447		- top: 54px;
1448		- }
1449		-
1450		- 84% {
1451		- width: 55px;
1452		- right: 0;
1453		- top: 35px;
1454		- }
1455		-
1456		- 100% {
1457		- width: 47px;
1458		- right: 8px;
1459		- top: 38px;
1460		- }
1461		- }
1462		-
1463		- @keyframes animate-success-long {
1464		- 0% {
1465		- width: 0;
1466		- right: 46px;
1467		- top: 54px;
1468		- }
1469		-
1470		- 65% {
1471		- width: 0;
1472		- right: 46px;
1473		- top: 54px;
1474		- }
1475		-
1476		- 84% {
1477		- width: 55px;
1478		- right: 0;
1479		- top: 35px;
1480		- }
1481		-
1482		- 100% {
1483		- width: 47px;
1484		- right: 8px;
1485		- top: 38px;
1486		- }
1487		- }
1488		-
1489		- @-webkit-keyframes animate-toast-success-tip {
1490		- 0% {
1491		- width: 0;
1492		- left: 1px;
1493		- top: 9px;
1494		- }
1495		-
1496		- 54% {
1497		- width: 0;
1498		- left: 1px;
1499		- top: 9px;
1500		- }
1501		-
1502		- 70% {
1503		- width: 24px;
1504		- left: -4px;
1505		- top: 17px;
1506		- }
1507		-
1508		- 84% {
1509		- width: 8px;
1510		- left: 10px;
1511		- top: 20px;
1512		- }
1513		-
1514		- 100% {
1515		- width: 12px;
1516		- left: 3px;
1517		- top: 18px;
1518		- }
1519		- }
1520		-
1521		- @keyframes animate-toast-success-tip {
1522		- 0% {
1523		- width: 0;
1524		- left: 1px;
1525		- top: 9px;
1526		- }
1527		-
1528		- 54% {
1529		- width: 0;
1530		- left: 1px;
1531		- top: 9px;
1532		- }
1533		-
1534		- 70% {
1535		- width: 24px;
1536		- left: -4px;
1537		- top: 17px;
1538		- }
1539		-
1540		- 84% {
1541		- width: 8px;
1542		- left: 10px;
1543		- top: 20px;
1544		- }
1545		-
1546		- 100% {
1547		- width: 12px;
1548		- left: 3px;
1549		- top: 18px;
1550		- }
1551		- }
1552		-
1553		- @-webkit-keyframes animate-toast-success-long {
1554		- 0% {
1555		- width: 0;
1556		- right: 22px;
1557		- top: 26px;
1558		- }
1559		-
1560		- 65% {
1561		- width: 0;
1562		- right: 22px;
1563		- top: 26px;
1564		- }
1565		-
1566		- 84% {
1567		- width: 26px;
1568		- right: 0;
1569		- top: 15px;
1570		- }
1571		-
1572		- 100% {
1573		- width: 22px;
1574		- right: 3px;
1575		- top: 15px;
1576		- }
1577		- }
1578		-
1579		- @keyframes animate-toast-success-long {
1580		- 0% {
1581		- width: 0;
1582		- right: 22px;
1583		- top: 26px;
1584		- }
1585		-
1586		- 65% {
1587		- width: 0;
1588		- right: 22px;
1589		- top: 26px;
1590		- }
1591		-
1592		- 84% {
1593		- width: 26px;
1594		- right: 0;
1595		- top: 15px;
1596		- }
1597		-
1598		- 100% {
1599		- width: 22px;
1600		- right: 3px;
1601		- top: 15px;
1602		- }
1603		- }
1604		-
1605		- @-webkit-keyframes rotatePlaceholder {
1606		- 0% {
1607		- -webkit-transform: rotate(-45deg);
1608		- transform: rotate(-45deg);
1609		- }
1610		-
1611		- 5% {
1612		- -webkit-transform: rotate(-45deg);
1613		- transform: rotate(-45deg);
1614		- }
1615		-
1616		- 12% {
1617		- -webkit-transform: rotate(-405deg);
1618		- transform: rotate(-405deg);
1619		- }
1620		-
1621		- 100% {
1622		- -webkit-transform: rotate(-405deg);
1623		- transform: rotate(-405deg);
1624		- }
1625		- }
1626		-
1627		- @keyframes rotatePlaceholder {
1628		- 0% {
1629		- -webkit-transform: rotate(-45deg);
1630		- transform: rotate(-45deg);
1631		- }
1632		-
1633		- 5% {
1634		- -webkit-transform: rotate(-45deg);
1635		- transform: rotate(-45deg);
1636		- }
1637		-
1638		- 12% {
1639		- -webkit-transform: rotate(-405deg);
1640		- transform: rotate(-405deg);
1641		- }
1642		-
1643		- 100% {
1644		- -webkit-transform: rotate(-405deg);
1645		- transform: rotate(-405deg);
1646		- }
1647		- }
1648		-
1649		- .swal2-animate-success-line-tip {
1650		- -webkit-animation: animate-success-tip .75s;
1651		- animation: animate-success-tip .75s;
1652		- }
1653		-
1654		- .swal2-animate-success-line-long {
1655		- -webkit-animation: animate-success-long .75s;
1656		- animation: animate-success-long .75s;
1657		- }
1658		-
1659		- .swal2-success.swal2-animate-success-icon .swal2-success-circular-line-right {
1660		- -webkit-animation: rotatePlaceholder 4.25s ease-in;
1661		- animation: rotatePlaceholder 4.25s ease-in;
1662		- }
1663		-
1664		- @-webkit-keyframes animate-error-icon {
1665		- 0% {
1666		- -webkit-transform: rotateX(100deg);
1667		- transform: rotateX(100deg);
1668		- opacity: 0;
1669		- }
1670		-
1671		- 100% {
1672		- -webkit-transform: rotateX(0deg);
1673		- transform: rotateX(0deg);
1674		- opacity: 1;
1675		- }
1676		- }
1677		-
1678		- @keyframes animate-error-icon {
1679		- 0% {
1680		- -webkit-transform: rotateX(100deg);
1681		- transform: rotateX(100deg);
1682		- opacity: 0;
1683		- }
1684		-
1685		- 100% {
1686		- -webkit-transform: rotateX(0deg);
1687		- transform: rotateX(0deg);
1688		- opacity: 1;
1689		- }
1690		- }
1691		-
1692		- .swal2-animate-error-icon {
1693		- -webkit-animation: animate-error-icon .5s;
1694		- animation: animate-error-icon .5s;
1695		- }
1696		-
1697		- @-webkit-keyframes animate-x-mark {
1698		- 0% {
1699		- -webkit-transform: scale(0.4);
1700		- transform: scale(0.4);
1701		- margin-top: 26px;
1702		- opacity: 0;
1703		- }
1704		-
1705		- 50% {
1706		- -webkit-transform: scale(0.4);
1707		- transform: scale(0.4);
1708		- margin-top: 26px;
1709		- opacity: 0;
1710		- }
1711		-
1712		- 80% {
1713		- -webkit-transform: scale(1.15);
1714		- transform: scale(1.15);
1715		- margin-top: -6px;
1716		- }
1717		-
1718		- 100% {
1719		- -webkit-transform: scale(1);
1720		- transform: scale(1);
1721		- margin-top: 0;
1722		- opacity: 1;
1723		- }
1724		- }
1725		-
1726		- @keyframes animate-x-mark {
1727		- 0% {
1728		- -webkit-transform: scale(0.4);
1729		- transform: scale(0.4);
1730		- margin-top: 26px;
1731		- opacity: 0;
1732		- }
1733		-
1734		- 50% {
1735		- -webkit-transform: scale(0.4);
1736		- transform: scale(0.4);
1737		- margin-top: 26px;
1738		- opacity: 0;
1739		- }
1740		-
1741		- 80% {
1742		- -webkit-transform: scale(1.15);
1743		- transform: scale(1.15);
1744		- margin-top: -6px;
1745		- }
1746		-
1747		- 100% {
1748		- -webkit-transform: scale(1);
1749		- transform: scale(1);
1750		- margin-top: 0;
1751		- opacity: 1;
1752		- }
1753		- }
1754		-
1755		- .swal2-animate-x-mark {
1756		- -webkit-animation: animate-x-mark .5s;
1757		- animation: animate-x-mark .5s;
1758		- }
1759		-
1760		- @-webkit-keyframes rotate-loading {
1761		- 0% {
1762		- -webkit-transform: rotate(0deg);
1763		- transform: rotate(0deg);
1764		- }
1765		-
1766		- 100% {
1767		- -webkit-transform: rotate(360deg);
1768		- transform: rotate(360deg);
1769		- }
1770		- }
1771		-
1772		- @keyframes rotate-loading {
1773		- 0% {
1774		- -webkit-transform: rotate(0deg);
1775		- transform: rotate(0deg);
1776		- }
1777		-
1778		- 100% {
1779		- -webkit-transform: rotate(360deg);
1780		- transform: rotate(360deg);
1781		- }
1782		- }
1783		- </style>
1784	88	</head>
1785	89
	90	+
1786	91	<body>
1787	92	<div id="regex-app"></div>
1788	93	<script>

+79-43src/App.jsx

		@@ -1,5 +1,5 @@
1	1	import { useState, useEffect } from "react";
2		-import parseBuilder from "./builder";
	2	+import parseBuilder, { readVars } from "./builder";
3	3	import { AiFillSave } from "react-icons/ai";
4	4
5	5	const placeholder = `Enter your variables here like below.
		@@ -16,55 +16,89 @@ function App() {
16	16	const [edited, setEdited] = useState(0);
17	17	const [target, setTarget] = useState(null);
18	18	const [save, setSave] = useState(true);
	19	+ const [hideVariables, setHideVariables] = useState(false);
	20	+ const [hideBuilder, setHideBuilder] = useState(false);
	21	+ const [varText, setVarText] = useState("");
19	22	const regexInput = document.querySelector(
20	23	"#regex-app > div > div.QtZzw > div > div.AUc0W > div.rjodX > div.cO83v > div.h9z_E.T886D > div > div > div:nth-child(1) > textarea"
21	24	);
22	25	const regexValue = document.querySelector(
23	26	"#regex-app > div > div.QtZzw > div > div.AUc0W > div.rjodX > div.cO83v > div.h9z_E.T886D > div > div > div.CodeMirror-scroll > div.CodeMirror-sizer > div > div > div > div.CodeMirror-code"
24	27	);
25		- const builder = (
26		- <textarea
27		- rows="20"
28		- className={
29		- "w-full p-2 rounded-sm font-re101-input text-input decoration-slate-500 underline" +
30		- (valid ? "" : " text-red-500")
31		- }
32		- placeholder={placeholder}
33		- spellCheck="off"
34		- onKeyDown={(e) => {
35		- switch (e.key) {
36		- case "Enter":
37		- break;
38		- case "Tab":
	28	+ const hideButton = (setHide, hide) => {
	29	+ return (
	30	+ <div className="absolute flex bottom-3 w-full">
	31	+ <button
	32	+ className="h-10 w-24 rounded-md mx-auto bg-blue-500 text-white"
	33	+ onClick={(e) => {
39	34	e.preventDefault();
40		- const index = e.target.selectionStart;
41		- e.target.value =
42		- e.target.value.substring(0, index) +
43		- "\t" +
44		- e.target.value.substring(index);
45		- e.target.selectionStart = e.target.selectionEnd = index + 1;
46		- break;
47		- }
48		- if (e.ctrlKey && e.key == "s") {
49		- saveBuild();
	35	+ setHide(!hide);
	36	+ }}
	37	+ >
	38	+ {hide ? "Show" : "Hide"}
	39	+ </button>
	40	+ </div>
	41	+ );
	42	+ };
	43	+ const variables = (
	44	+ <div className="relative">
	45	+ <textarea
	46	+ rows={hideVariables ? 2 : 10}
	47	+ className="w-full"
	48	+ onChange={(e) => {
	49	+ setVarText(e.target.value);
	50	+ }}
	51	+ ></textarea>
	52	+ {hideButton(setHideVariables, hideVariables)}
	53	+ </div>
	54	+ );
	55	+ const builder = (
	56	+ <div className="relative">
	57	+ <textarea
	58	+ rows={hideBuilder ? 2 : 30}
	59	+ className={
	60	+ "w-full p-2 rounded-sm font-re101-input text-input decoration-slate-500 underline" +
	61	+ (valid ? "" : " text-red-500")
50	62	}
51		- }}
52		- onChangeCapture={(e) => {
53		- const parseBuild = parseBuilder(e.target.value);
54		- if (!parseBuild) setValid(false);
55		- else setValid(true);
56		- setBuild(parseBuild);
57		- setTarget(e.target);
58		- setTimeout(
59		- () =>
60		- setEdited((old) => {
61		- return old - 1;
62		- }),
63		- 1000
64		- );
65		- setEdited(edited + 1);
66		- }}
67		- ></textarea>
	63	+ placeholder={placeholder}
	64	+ spellCheck="off"
	65	+ onKeyDown={(e) => {
	66	+ switch (e.key) {
	67	+ case "Enter":
	68	+ break;
	69	+ case "Tab":
	70	+ e.preventDefault();
	71	+ const index = e.target.selectionStart;
	72	+ e.target.value =
	73	+ e.target.value.substring(0, index) +
	74	+ "\t" +
	75	+ e.target.value.substring(index);
	76	+ e.target.selectionStart = e.target.selectionEnd = index + 1;
	77	+ break;
	78	+ }
	79	+ if (e.ctrlKey && e.key == "s") {
	80	+ saveBuild();
	81	+ }
	82	+ }}
	83	+ onChangeCapture={(e) => {
	84	+ const parsedVars = readVars(varText);
	85	+ const parseBuild = parseBuilder(e.target.value, parsedVars);
	86	+ if (!parseBuild) setValid(false);
	87	+ else setValid(true);
	88	+ setBuild(parseBuild);
	89	+ setTarget(e.target);
	90	+ setTimeout(
	91	+ () =>
	92	+ setEdited((old) => {
	93	+ return old - 1;
	94	+ }),
	95	+ 1000
	96	+ );
	97	+ setEdited(edited + 1);
	98	+ }}
	99	+ ></textarea>
	100	+ {hideButton(setHideBuilder, hideBuilder)}
	101	+ </div>
68	102	);
69	103
70	104	const updateRegex = () => {
		@@ -83,11 +117,13 @@ function App() {
83	117	<div className="w-full">
84	118	<div className="w-full text-lg text-center relative">
85	119	<div>Build Variables</div>
	120	+ {variables}
	121	+ <div>Build Regex</div>
	122	+ {builder}
86	123	<div className="absolute right-8 top-8">
87	124	{saveButton(setSave, save)}
88	125	</div>
89	126	</div>
90		- {builder}
91	127	</div>
92	128	</div>
93	129	);

+21-5src/builder.js

		@@ -1,4 +1,18 @@
1		-const parseBuilder = (str) => {
	1	+export const readVars = (str) => {
	2	+ let lines = str.split("\n");
	3	+ const vars = {};
	4	+ for (let i = 0; i < lines.length; i++) {
	5	+ let line = lines[i];
	6	+ let lineSplit = line.split(":==");
	7	+ if ((lineSplit.length = 2)) {
	8	+ let [name, val] = lineSplit;
	9	+ vars[name] = val;
	10	+ }
	11	+ }
	12	+ return vars;
	13	+};
	14	+
	15	+const parseBuilder = (str, vars) => {
2	16	let lines = str.split("\n");
3	17	const ref = {};
4	18	for (let line of lines) {
		@@ -20,17 +34,19 @@ const parseBuilder = (str) => {
20	34	else parent.children.push(lineData);
21	35	}
22	36	}
23		- return buildToRegex(ref[0]);
	37	+ return buildToRegex(ref[0], vars);
24	38	};
25	39
26		-const buildToRegex = (build) => {
27		- const re = buildToRegexRecursion(build, "");
	40	+const buildToRegex = (build, vars) => {
	41	+ const re = buildToRegexRecursion(build, "", vars);
28	42	return re;
29	43	};
30	44
31		-const buildToRegexRecursion = (build, re) => {
	45	+const buildToRegexRecursion = (build, re, vars) => {
32	46	if (!build?.length) return re;
33	47	const val = build.shift();
	48	+ console.log(vars);
	49	+ if (Object.keys(vars).includes(val.regex)) val.regex = vars[val.regex];
34	50	if (val.type === ":") {
35	51	if (val.name) re += `(?P<${val.name}>${val.regex}`;
36	52	else re += `(?:${val.regex}`;