A Regex file extension that makes it way easier to edit large regex.
can highlight in both files
1 file changed, +42 -23
+42-23src/highlighter.ts
| @@ -13,6 +13,7 @@ type HighlightGroup = { | ||
| 13 | 13 | class Highlighter { |
| 14 | 14 | context: vscode.ExtensionContext | undefined; |
| 15 | 15 | decorations: vscode.TextEditorDecorationType[] = []; |
| 16 | + highlightGroups: { [key: string]: HighlightGroup } = {}; | |
| 16 | 17 | |
| 17 | 18 | constructor() {} |
| 18 | 19 | |
| @@ -26,22 +27,34 @@ class Highlighter { | ||
| 26 | 27 | this.decorations.forEach((decoration) => { |
| 27 | 28 | decoration.dispose(); |
| 28 | 29 | }); |
| 30 | + this.highlightGroups = {}; | |
| 29 | 31 | this.decorations = []; |
| 30 | 32 | decorationGenerator.reset(); |
| 31 | 33 | output.clear(); |
| 32 | 34 | } |
| 33 | 35 | |
| 34 | - createDecoration(options: vscode.DecorationRenderOptions) { | |
| 35 | - const decoration = decorationGenerator.generate(options); | |
| 36 | - this.decorations.push(decoration); | |
| 37 | - return decoration; | |
| 36 | + clearRanges() { | |
| 37 | + for (const key of Object.keys(this.highlightGroups)) { | |
| 38 | + this.highlightGroups[key].ranges = []; | |
| 39 | + } | |
| 40 | + } | |
| 41 | + | |
| 42 | + updateOrCreateHighlightGroup(key: string, range: vscode.Range) { | |
| 43 | + if (this.highlightGroups[key]) { | |
| 44 | + this.highlightGroups[key].ranges.push(range); | |
| 45 | + } else { | |
| 46 | + this.highlightGroups[key] = { | |
| 47 | + ranges: [range], | |
| 48 | + decoration: decorationGenerator.generate(), | |
| 49 | + }; | |
| 50 | + } | |
| 38 | 51 | } |
| 39 | 52 | |
| 40 | 53 | applyXFlag(regex: string) { |
| 41 | 54 | return regex.replace(/(?<!\\)#.*$/gm, "").replace(/\s+/g, ""); |
| 42 | 55 | } |
| 43 | 56 | |
| 44 | - getHighlightGroups(regex: string, document: vscode.TextDocument) { | |
| 57 | + matchOnEditor(regex: string, document: vscode.TextDocument) { | |
| 45 | 58 | const flags = regexButtons.getFlagString(); |
| 46 | 59 | if (regexButtons.hasXFlag()) { |
| 47 | 60 | regex = this.applyXFlag(regex); |
| @@ -54,14 +67,6 @@ class Highlighter { | ||
| 54 | 67 | } |
| 55 | 68 | const re = new RegExp(regex, flags); |
| 56 | 69 | const matches = document.getText().matchAll(re); |
| 57 | - const highlightGroups: { [key: string]: HighlightGroup } = { | |
| 58 | - outer: { | |
| 59 | - ranges: [], | |
| 60 | - decoration: this.createDecoration({ | |
| 61 | - fontStyle: "italic", | |
| 62 | - }), | |
| 63 | - }, | |
| 64 | - }; | |
| 65 | 70 | let i = 0; |
| 66 | 71 | const maxMatches = getConfig().get("maxMatches") as number; |
| 67 | 72 | for (const match of matches) { |
| @@ -70,21 +75,32 @@ class Highlighter { | ||
| 70 | 75 | } |
| 71 | 76 | const start = document.positionAt(match.index); |
| 72 | 77 | const end = document.positionAt(match.index + match[0].length); |
| 73 | - if (highlightGroups["outer"].ranges) { | |
| 74 | - highlightGroups["outer"].ranges.push(new vscode.Range(start, end)); | |
| 75 | - } | |
| 78 | + this.updateOrCreateHighlightGroup("outer", new vscode.Range(start, end)); | |
| 76 | 79 | i++; |
| 77 | 80 | } |
| 78 | 81 | output.log(`Found ${i} matches`); |
| 79 | - return highlightGroups; | |
| 80 | 82 | } |
| 81 | 83 | |
| 82 | - highlightMatches(regexEditor: vscode.TextEditor, editor: vscode.TextEditor) { | |
| 84 | + matchRegexGroups(document: vscode.TextDocument) { | |
| 85 | + const re = /(?<=\().+?(?=\))/g; | |
| 86 | + const matches = document.getText().matchAll(re); | |
| 87 | + let i = 0; | |
| 88 | + const maxMatches = getConfig().get("maxMatches") as number; | |
| 89 | + for (const match of matches) { | |
| 90 | + if (i >= maxMatches) { | |
| 91 | + break; | |
| 92 | + } | |
| 93 | + const start = document.positionAt(match.index); | |
| 94 | + const end = document.positionAt(match.index + match[0].length); | |
| 95 | + this.updateOrCreateHighlightGroup("inner", new vscode.Range(start, end)); | |
| 96 | + i++; | |
| 97 | + } | |
| 98 | + } | |
| 99 | + | |
| 100 | + highlightMatches(editor: vscode.TextEditor) { | |
| 83 | 101 | // output.log(`Highlighting matches in ${editor.document.fileName}`); |
| 84 | - const regex = regexEditor.document.getText(); | |
| 85 | - const highlightGroups = this.getHighlightGroups(regex, editor.document); | |
| 86 | - for (const key of Object.keys(highlightGroups)) { | |
| 87 | - const group = highlightGroups[key]; | |
| 102 | + for (const key of Object.keys(this.highlightGroups)) { | |
| 103 | + const group = this.highlightGroups[key]; | |
| 88 | 104 | editor.setDecorations(group.decoration, group.ranges); |
| 89 | 105 | } |
| 90 | 106 | } |
| @@ -95,9 +111,12 @@ class Highlighter { | ||
| 95 | 111 | if (!regexEditor) { |
| 96 | 112 | return; |
| 97 | 113 | } |
| 114 | + this.matchRegexGroups(regexEditor.document); | |
| 115 | + this.highlightMatches(regexEditor); | |
| 98 | 116 | const nonRegexEditors = getNonRegexEditors(); |
| 99 | 117 | for (const editor of nonRegexEditors) { |
| 100 | - this.highlightMatches(regexEditor, editor); | |
| 118 | + this.matchOnEditor(regexEditor.document.getText(), editor.document); | |
| 119 | + this.highlightMatches(editor); | |
| 101 | 120 | } |
| 102 | 121 | } |
| 103 | 122 | } |