irongit
Sign inRegister
huncholanehuncholane/moonregexPublic

A better version of regex 101

moonregex/index.html
420 lines15 KBHTML
RawDownloadHistory
1<!DOCTYPE html>
2<html lang="en" class="notranslate" translate="no" data-theme="light">
3
4<head>
5 <style>
6 .ͼ1.cm-focused {
7 outline: 1px dotted #212121;
8 }
9
10 .ͼ1 {
11 position: relative !important;
12 box-sizing: border-box;
13 display: flex !important;
14 flex-direction: column;
15 }
16
17 .ͼ1 .cm-scroller {
18 display: flex !important;
19 align-items: flex-start !important;
20 font-family: monospace;
21 line-height: 1.4;
22 height: 100%;
23 overflow-x: auto;
24 position: relative;
25 z-index: 0;
26 }
27
28 .ͼ1 .cm-content[contenteditable=true] {
29 -webkit-user-modify: read-write-plaintext-only;
30 }
31
32 .ͼ1 .cm-content {
33 margin: 0;
34 flex-grow: 2;
35 flex-shrink: 0;
36 display: block;
37 white-space: pre;
38 word-wrap: normal;
39 box-sizing: border-box;
40 padding: 4px 0;
41 outline: none;
42 }
43
44 .ͼ1 .cm-lineWrapping {
45 white-space: pre-wrap;
46 white-space: break-spaces;
47 word-break: break-word;
48 overflow-wrap: anywhere;
49 flex-shrink: 1;
50 }
51
52 .ͼ2 .cm-content {
53 caret-color: black;
54 }
55
56 .ͼ3 .cm-content {
57 caret-color: white;
58 }
59
60 .ͼ1 .cm-line {
61 display: block;
62 padding: 0 2px 0 6px;
63 }
64
65 .ͼ1 .cm-layer>* {
66 position: absolute;
67 }
68
69 .ͼ1 .cm-layer {
70 position: absolute;
71 left: 0;
72 top: 0;
73 contain: size style;
74 }
75
76 .ͼ2 .cm-selectionBackground {
77 background: #d9d9d9;
78 }
79
80 .ͼ3 .cm-selectionBackground {
81 background: #222;
82 }
83
84 .ͼ2.cm-focused>.cm-scroller>.cm-selectionLayer .cm-selectionBackground {
85 background: #d7d4f0;
86 }
87
88 .ͼ3.cm-focused>.cm-scroller>.cm-selectionLayer .cm-selectionBackground {
89 background: #233;
90 }
91
92 .ͼ1 .cm-cursorLayer {
93 pointer-events: none;
94 }
95
96 .ͼ1.cm-focused>.cm-scroller>.cm-cursorLayer {
97 animation: steps(1) cm-blink 1.2s infinite;
98 }
99
100 @keyframes cm-blink {
101 50% {
102 opacity: 0;
103 }
104 }
105
106 @keyframes cm-blink2 {
107 50% {
108 opacity: 0;
109 }
110 }
111
112 .ͼ1 .cm-cursor,
113 .ͼ1 .cm-dropCursor {
114 border-left: 1.2px solid black;
115 margin-left: -0.6px;
116 pointer-events: none;
117 }
118
119 .ͼ1 .cm-cursor {
120 display: none;
121 }
122
123 .ͼ3 .cm-cursor {
124 border-left-color: #444;
125 }
126
127 .ͼ1 .cm-dropCursor {
128 position: absolute;
129 }
130
131 .ͼ1.cm-focused>.cm-scroller>.cm-cursorLayer .cm-cursor {
132 display: block;
133 }
134
135 .ͼ2 .cm-activeLine {
136 background-color: #cceeff44;
137 }
138
139 .ͼ3 .cm-activeLine {
140 background-color: #99eeff33;
141 }
142
143 .ͼ2 .cm-specialChar {
144 color: red;
145 }
146
147 .ͼ3 .cm-specialChar {
148 color: #f78;
149 }
150
151 .ͼ1 .cm-gutters {
152 flex-shrink: 0;
153 display: flex;
154 height: 100%;
155 box-sizing: border-box;
156 left: 0;
157 z-index: 200;
158 }
159
160 .ͼ2 .cm-gutters {
161 background-color: #f5f5f5;
162 color: #6c6c6c;
163 border-right: 1px solid #ddd;
164 }
165
166 .ͼ3 .cm-gutters {
167 background-color: #333338;
168 color: #ccc;
169 }
170
171 .ͼ1 .cm-gutter {
172 display: flex !important;
173 flex-direction: column;
174 flex-shrink: 0;
175 box-sizing: border-box;
176 min-height: 100%;
177 overflow: hidden;
178 }
179
180 .ͼ1 .cm-gutterElement {
181 box-sizing: border-box;
182 }
183
184 .ͼ1 .cm-lineNumbers .cm-gutterElement {
185 padding: 0 3px 0 5px;
186 min-width: 20px;
187 text-align: right;
188 white-space: nowrap;
189 }
190
191 .ͼ2 .cm-activeLineGutter {
192 background-color: #e2f2ff;
193 }
194
195 .ͼ3 .cm-activeLineGutter {
196 background-color: #222227;
197 }
198
199 .ͼ1 .cm-panels {
200 box-sizing: border-box;
201 position: sticky;
202 left: 0;
203 right: 0;
204 }
205
206 .ͼ2 .cm-panels {
207 background-color: #f5f5f5;
208 color: black;
209 }
210
211 .ͼ2 .cm-panels-top {
212 border-bottom: 1px solid #ddd;
213 }
214
215 .ͼ2 .cm-panels-bottom {
216 border-top: 1px solid #ddd;
217 }
218
219 .ͼ3 .cm-panels {
220 background-color: #333338;
221 color: white;
222 }
223
224 .ͼ1 .cm-tab {
225 display: inline-block;
226 overflow: hidden;
227 vertical-align: bottom;
228 }
229
230 .ͼ1 .cm-widgetBuffer {
231 vertical-align: text-top;
232 height: 1em;
233 width: 0;
234 display: inline;
235 }
236
237 .ͼ1 .cm-placeholder {
238 color: #888;
239 display: inline-block;
240 vertical-align: top;
241 }
242
243 .ͼ1 .cm-highlightSpace:before {
244 content: attr(data-display);
245 position: absolute;
246 pointer-events: none;
247 color: #888;
248 }
249
250 .ͼ1 .cm-highlightTab {
251 background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20"><path stroke="%23888" stroke-width="1" fill="none" d="M1 10H196L190 5M190 15L196 10M197 4L197 16"/></svg>');
252 background-size: auto 100%;
253 background-position: right 90%;
254 background-repeat: no-repeat;
255 }
256
257 .ͼ1 .cm-trailingSpace {
258 background-color: #ff332255;
259 }
260
261 .ͼ1 .cm-button {
262 vertical-align: middle;
263 color: inherit;
264 font-size: 70%;
265 padding: .2em 1em;
266 border-radius: 1px;
267 }
268
269 .ͼ2 .cm-button:active {
270 background-image: linear-gradient(#b4b4b4, #d0d3d6);
271 }
272
273 .ͼ2 .cm-button {
274 background-image: linear-gradient(#eff1f5, #d9d9df);
275 border: 1px solid #888;
276 }
277
278 .ͼ3 .cm-button:active {
279 background-image: linear-gradient(#111, #333);
280 }
281
282 .ͼ3 .cm-button {
283 background-image: linear-gradient(#393939, #111);
284 border: 1px solid #888;
285 }
286
287 .ͼ1 .cm-textfield {
288 vertical-align: middle;
289 color: inherit;
290 font-size: 70%;
291 border: 1px solid silver;
292 padding: .2em .5em;
293 }
294
295 .ͼ2 .cm-textfield {
296 background-color: white;
297 }
298
299 .ͼ3 .cm-textfield {
300 border: 1px solid #555;
301 background-color: inherit;
302 }
303
304 .ͼ4 .cm-line ::selection {
305 background-color: transparent !important;
306 }
307
308 .ͼ4 .cm-line::selection {
309 background-color: transparent !important;
310 }
311
312 .ͼ4 .cm-line {
313 caret-color: transparent !important;
314 }
315 </style>
316 <meta charset="UTF-8">
317 <meta name="apple-mobile-web-app-capable" content="yes">
318 <meta name="apple-mobile-web-app-status-bar-style" content="default">
319 <meta name="mobile-web-app-capable" content="yes">
320 <meta name="HandheldFriendly" content="True">
321 <meta name="MobileOptimized" content="320">
322 <meta name="format-detection" content="telephone=no">
323 <meta name="title" content="regex101">
324
325 <link rel="stylesheet" type="text/css" href="/static/bundle.659197b9fa4d59fb7f31.css" id="mainCss">
326
327 <link rel="preconnect" href="https://fonts.googleapis.com">
328 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
329 <link rel="stylesheet"
330 href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&amp;family=Source+Code+Pro:wght@400;500;700&amp;display=swap"
331 as="style" onload="this.onload=null;this.rel='stylesheet'">
332
333 <link rel="apple-touch-icon" sizes="57x57" href="/static/assets/icon-57.png">
334 <link rel="apple-touch-icon" sizes="60x60" href="/static/assets/icon-60.png">
335 <link rel="apple-touch-icon" sizes="72x72" href="/static/assets/icon-72.png">
336 <link rel="apple-touch-icon" sizes="76x76" href="/static/assets/icon-76.png">
337 <link rel="apple-touch-icon" sizes="114x114" href="/static/assets/icon-114.png">
338 <link rel="apple-touch-icon" sizes="120x120" href="/static/assets/icon-120.png">
339 <link rel="apple-touch-icon" sizes="144x144" href="/static/assets/icon-144.png">
340 <link rel="apple-touch-icon" sizes="152x152" href="/static/assets/icon-152.png">
341 <link rel="apple-touch-icon" sizes="180x180" href="/static/assets/icon-180.png">
342
343 <link rel="shortcut icon" href="/static/assets/favicon.ico" type="image/x-icon">
344 <link rel="icon" type="image/png" sizes="16x16" href="/static/assets/icon-16.png">
345 <link rel="icon" type="image/png" sizes="32x32" href="/static/assets/icon-32.png">
346 <link rel="icon" type="image/png" sizes="96x96" href="/static/assets/icon-96.png">
347 <link rel="icon" type="image/png" sizes="192x192" href="/static/assets/icon-192.png">
348
349 <link rel="manifest" href="/static/assets/manifest.webmanifest">
350 <meta name="theme-color" content="#2c5c97">
351
352 <link href="https://regex101.com" rel="home">
353 <meta name="viewport"
354 content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
355 <meta name="keywords"
356 content="regex,regex tester,regular expression,debugger,pcre,php,golang,java,javascript,python,.net,c#,rust">
357 <meta name="description"
358 content="Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET, Rust.">
359 <meta name="author" content="Firas Dib">
360
361 <meta property="twitter:card" content="summary_large_image">
362 <meta property="twitter:site" content="@regex101">
363 <meta property="twitter:title" content="regex101: build, test, and debug regex">
364 <meta property="twitter:description"
365 content="Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET, Rust.">
366 <meta property="twitter:creator" content="@regex101">
367 <meta property="twitter:image" content="https://regex101.com/static/assets/card.png">
368 <meta property="twitter:domain" content="regex101.com">
369
370 <meta property="og:image" content="https://regex101.com/static/assets/card.png">
371 <meta property="og:image:width" content="1200">
372 <meta property="og:image:height" content="630">
373 <meta property="og:title" content="regex101: build, test, and debug regex">
374 <meta property="og:description"
375 content="Regular expression tester with syntax highlighting, explanation, cheat sheet for PHP/PCRE, Python, GO, JavaScript, Java, C#/.NET, Rust.">
376 <meta property="og:url" content="https://regex101.com/">
377 <meta property="og:site_name" content="regex101">
378 <meta property="og:type" content="website">
379
380 <meta name="google" content="notranslate">
381 <title>regex101: build, test, and debug regex</title>
382 <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>
383 <script>
384 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%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%2C%20Rust.%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%3A%5B%5D%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%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%2C%22lineSeparator%22%3A%22%22%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';
385 </script>
386
387 <script src="/static/vendors-bundle.5f028802ce325a9745fb.js" defer=""></script>
388 <script src="/static/bundle.bc4943f4b6820b0741dd.js" defer=""></script>
389
390 <script defer="">
391 (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 })) })();
392 </script>
393
394 <link rel="preload" href="/static/quickref.13eedec26774e778c5fa.chunk.js" as="script">
395 <link rel="preload" href="/static/653.de37bf83de58791edb3a.css" as="style">
396
397 <script fetchpriority="low" defer="" data-domain="regex101.com"
398 src="https://analytics.regex101.com/js/plausible.js"></script>
399 <link rel="stylesheet" type="text/css" href="/static/653.de37bf83de58791edb3a.css">
400</head>
401
402
403<body>
404 <div id="regex-app"></div>
405 <script>
406 window.onload = () => {
407 const target = document.getElementsByClassName('AUc0W')[0]
408 const app = document.createElement('div')
409 app.prepend('hello')
410 const appScript = document.createElement('script')
411 appScript.type = 'module'
412 appScript.src = '/src/main.jsx'
413 app.id = 'root'
414 target.prepend(app)
415 target.append(appScript)
416 }
417 </script>
418</body>
419
420</html>