huncholaneA better version of regex 101
full regex comprehension
huncholane1 file changed, +20 -4
+20-4src/App.jsx
| @@ -8,11 +8,26 @@ group1Delim:\\n | ||
| 8 | 8 | \t\tvar3:\\w |
| 9 | 9 | \t\tvar4:\\d`; |
| 10 | 10 | |
| 11 | -const parseBuilder = (str, state, setState) => { | |
| 11 | +const buildToRegex = (build) => { | |
| 12 | + const re = buildToRegexRecursion(build, ""); | |
| 13 | + return re; | |
| 14 | +}; | |
| 15 | + | |
| 16 | +const buildToRegexRecursion = (build, re) => { | |
| 17 | + if (build.length === 0) return re; | |
| 18 | + const val = build.shift(); | |
| 19 | + re += `(?P<${val.name}>${val.regex}`; | |
| 20 | + if (val.children) re += buildToRegexRecursion(val.children, ""); | |
| 21 | + re += `${val.optional})`; | |
| 22 | + | |
| 23 | + return buildToRegexRecursion(build, re, val); | |
| 24 | +}; | |
| 25 | + | |
| 26 | +const parseBuilder = (str) => { | |
| 12 | 27 | const r = parseBuilderRegex(0); |
| 13 | 28 | const m = r.exec(str); |
| 14 | 29 | const vars = parseBuilderRecursion([], m, 0); |
| 15 | - console.log(vars); | |
| 30 | + return buildToRegex(vars); | |
| 16 | 31 | }; |
| 17 | 32 | |
| 18 | 33 | const parseBuilderRecursion = (vars, pm, lvl) => { |
| @@ -20,7 +35,6 @@ const parseBuilderRecursion = (vars, pm, lvl) => { | ||
| 20 | 35 | vars.push(pm.groups); |
| 21 | 36 | pm.input = pm.input.split(pm[0])[1]; |
| 22 | 37 | if (!pm.input.trim()) { |
| 23 | - console.log("done traversing"); | |
| 24 | 38 | return vars; |
| 25 | 39 | } |
| 26 | 40 | |
| @@ -98,7 +112,9 @@ function App() { | ||
| 98 | 112 | onChangeCapture={(e) => { |
| 99 | 113 | state.build = []; |
| 100 | 114 | setState({ ...state }); |
| 101 | - parseBuilder(e.target.value, state, setState); | |
| 115 | + const parseBuild = parseBuilder(e.target.value); | |
| 116 | + regexInputSpan.focus(); | |
| 117 | + regexInputSpan.dispatchEvent(new Event("keydown", { key: "a" })); | |
| 102 | 118 | }} |
| 103 | 119 | ></textarea> |
| 104 | 120 | </div> |