irongit
Sign inRegister
huncholanehuncholane/moonregexPublic

A better version of regex 101

moonregex/src/App.jsx
93 lines2.6 KBJavaScript
RawDownloadHistory
1import { useState, useEffect } from "react";
2import parseBuilder from "./builder";
3
4const placeholder = `Enter your variables here like below.
5group1Delim:\\n
6\tvar1:\\w
7\tvar2:\\d
8\tgroup2Delim:\\s
9\t\tvar3:\\w
10\t\tvar4:\\d`;
11
12function App() {
13 const [valid, setValid] = useState(false);
14 const [build, setBuild] = useState("");
15 const [edited, setEdited] = useState(0);
16 const [target, setTarget] = useState(null);
17 const regexInput = document.querySelector(
18 "#regex-app > div > div.QtZzw > div > div.AUc0W > div.rjodX > div.cO83v > div.h9z_E.T886D > div > div > div:nth-child(1) > textarea"
19 );
20 const regexValue = document.querySelector(
21 "#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"
22 );
23 const builder = (
24 <textarea
25 rows="10"
26 className={
27 "w-full p-2 rounded-sm font-re101-input text-input" +
28 (valid ? "" : " text-red-500")
29 }
30 placeholder={placeholder}
31 spellCheck="off"
32 onKeyDown={(e) => {
33 switch (e.key) {
34 case "Enter":
35 break;
36 case "Tab":
37 e.preventDefault();
38 const index = e.target.selectionStart;
39 e.target.value =
40 e.target.value.substring(0, index) +
41 "\t" +
42 e.target.value.substring(index);
43 e.target.selectionStart = e.target.selectionEnd = index + 1;
44 break;
45 }
46 }}
47 onChangeCapture={(e) => {
48 const parseBuild = parseBuilder(e.target.value);
49 if (!parseBuild) setValid(false);
50 else setValid(true);
51 setBuild(parseBuild);
52 setTarget(e.target);
53 setTimeout(
54 () =>
55 setEdited((old) => {
56 console.log(old);
57 return old - 1;
58 }),
59 1000
60 );
61 setEdited(edited + 1);
62 }}
63 ></textarea>
64 );
65
66 const updateRegex = () => {
67 if (edited !== 1) return;
68 const length = regexValue.textContent.length;
69 for (let i = 0; i < length; i++)
70 regexInput.dispatchEvent(
71 new KeyboardEvent("keydown", {
72 key: "Backspace",
73 code: "Backspace",
74 keyCode: 8,
75 })
76 );
77 regexInput.value = build;
78 setTimeout(() => target?.focus(), 100);
79 };
80
81 useEffect(updateRegex, [edited]);
82
83 return (
84 <div>
85 <div className="w-full">
86 <div className="w-full text-lg text-center">Build Variables</div>
87 {builder}
88 </div>
89 </div>
90 );
91}
92
93export default App;