README.md

@@ -7,6 +7,14 @@
 
 Aim to visualize regex to easy understand complex regex
 
+The regular visualization method comes from this [project](https://gitlab.com/javallone/regexper-static)
+
+The regularity used to detect regular expressions comes from this [project](https://github.com/chrmarti/vscode-regex/blob/41062efe8aa5113e8902742ae270e090a3de5c5e/src/extension.ts#L14)
+
+Hover over a regular expression to display:
+
+<img width="763" alt="image" src="https://github.com/linghaoSu/vscode-regex-visualizer/assets/56526981/614e9505-a40a-42f9-952c-a1fadd9c8a06">
+
 ## License
 
-[MIT](./LICENSE) License © 2022
+[MIT](./LICENSE) License © 2023

package.json

@@ -6,7 +6,7 @@
   },
   "name": "regex-visualizer",
   "displayName": "Regex Visualizer",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "packageManager": "pnpm@7.0.1",
   "description": "",
   "license": "MIT",

src/constant.ts

@@ -5,3 +5,89 @@ export const mockWindow = new Window();
 export const mockDocument = mockWindow.document;
 
 export const getCommandName = (name: string) => `${EXT_NAME}.${name}`;
+
+export const baseHTMLContent = `
+<div id="regexp-render"><svg></svg></div>
+<script type="text/html" id="svg-container-base">
+        <div class="svg">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:cc="http://creativecommons.org/ns#"
+            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+            version="1.1">
+            <defs>
+              <style type="text/css">svg {
+          background-color: #fff; }
+        
+        .root text,
+        .root tspan {
+          font: 12px Arial; }
+        
+        .root path {
+          fill-opacity: 0;
+          stroke-width: 2px;
+          stroke: #000; }
+        
+        .root circle {
+          fill: #6b6659;
+          stroke-width: 2px;
+          stroke: #000; }
+        
+        .anchor text, .any-character text {
+          fill: #fff; }
+        
+        .anchor rect, .any-character rect {
+          fill: #6b6659; }
+        
+        .escape text, .charset-escape text, .literal text {
+          fill: #000; }
+        
+        .escape rect, .charset-escape rect {
+          fill: #bada55; }
+        
+        .literal rect {
+          fill: #dae9e5; }
+        
+        .charset .charset-box {
+          fill: #cbcbba; }
+        
+        .subexp .subexp-label tspan,
+        .charset .charset-label tspan,
+        .match-fragment .repeat-label tspan {
+          font-size: 10px; }
+        
+        .repeat-label {
+          cursor: help; }
+        
+        .subexp .subexp-label tspan,
+        .charset .charset-label tspan {
+          dominant-baseline: text-after-edge; }
+        
+        .subexp .subexp-box {
+          stroke: #908c83;
+          stroke-dasharray: 6,2;
+          stroke-width: 2px;
+          fill-opacity: 0; }
+        
+        .quote {
+          fill: #908c83; }
+        </style>
+            </defs>
+            <metadata>
+              <rdf:RDF>
+                <cc:License rdf:about="http://creativecommons.org/licenses/by/3.0/">
+                  <cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction" />
+                  <cc:permits rdf:resource="http://creativecommons.org/ns#Distribution" />
+                  <cc:requires rdf:resource="http://creativecommons.org/ns#Notice" />
+                  <cc:requires rdf:resource="http://creativecommons.org/ns#Attribution" />
+                  <cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
+                </cc:License>
+              </rdf:RDF>
+            </metadata>
+          </svg>
+        </div>
+        <div class="progress">
+          <div style="width:0;"></div>
+        </div>
+      </script>
+`;

src/index.ts

@@ -2,97 +2,13 @@ import type { ExtensionContext, TextDocument } from 'vscode';
 import { MarkdownString, OverviewRulerLane, Range, window, workspace } from 'vscode';
 import { disposeSettingListener, initialSetting } from './settings';
 import { Log } from './log';
-import { EXT_NAME, mockDocument } from './constant';
+import { EXT_NAME, baseHTMLContent, mockDocument } from './constant';
 import { svg64 } from './svg64';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
 import Regexper from './regexp-visualizer/js/regexper.js';
 
-mockDocument.body.innerHTML = `
-<div id="regexp-render"><svg></svg></div>
-<script type="text/html" id="svg-container-base">
-        <div class="svg">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:cc="http://creativecommons.org/ns#"
-            xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-            version="1.1">
-            <defs>
-              <style type="text/css">svg {
-          background-color: #fff; }
-        
-        .root text,
-        .root tspan {
-          font: 12px Arial; }
-        
-        .root path {
-          fill-opacity: 0;
-          stroke-width: 2px;
-          stroke: #000; }
-        
-        .root circle {
-          fill: #6b6659;
-          stroke-width: 2px;
-          stroke: #000; }
-        
-        .anchor text, .any-character text {
-          fill: #fff; }
-        
-        .anchor rect, .any-character rect {
-          fill: #6b6659; }
-        
-        .escape text, .charset-escape text, .literal text {
-          fill: #000; }
-        
-        .escape rect, .charset-escape rect {
-          fill: #bada55; }
-        
-        .literal rect {
-          fill: #dae9e5; }
-        
-        .charset .charset-box {
-          fill: #cbcbba; }
-        
-        .subexp .subexp-label tspan,
-        .charset .charset-label tspan,
-        .match-fragment .repeat-label tspan {
-          font-size: 10px; }
-        
-        .repeat-label {
-          cursor: help; }
-        
-        .subexp .subexp-label tspan,
-        .charset .charset-label tspan {
-          dominant-baseline: text-after-edge; }
-        
-        .subexp .subexp-box {
-          stroke: #908c83;
-          stroke-dasharray: 6,2;
-          stroke-width: 2px;
-          fill-opacity: 0; }
-        
-        .quote {
-          fill: #908c83; }
-        </style>
-            </defs>
-            <metadata>
-              <rdf:RDF>
-                <cc:License rdf:about="http://creativecommons.org/licenses/by/3.0/">
-                  <cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction" />
-                  <cc:permits rdf:resource="http://creativecommons.org/ns#Distribution" />
-                  <cc:requires rdf:resource="http://creativecommons.org/ns#Notice" />
-                  <cc:requires rdf:resource="http://creativecommons.org/ns#Attribution" />
-                  <cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks" />
-                </cc:License>
-              </rdf:RDF>
-            </metadata>
-          </svg>
-        </div>
-        <div class="progress">
-          <div style="width:0;"></div>
-        </div>
-      </script>
-`;
+mockDocument.body.innerHTML = baseHTMLContent;
 interface RegexMatch {
   document: TextDocument
   regex: RegExp
@@ -147,7 +63,7 @@ export function activate(context: ExtensionContext) {
 
       const regexper = new Regexper(mockDocument.body);
 
-      await regexper.showExpression(regexStr.slice(1, -1));
+      await regexper.showExpression(regexStr);
 
       const svgParentContainer = regexper.svgContainer.querySelector('svg');
 
@@ -158,7 +74,7 @@ export function activate(context: ExtensionContext) {
 
       const result = base64SVGStr;
 
-      const dom = `<img src="${result}" />`;
+      const dom = `<img src="${result}" /><br/>[Open in the browser](https://regexper.com/#${encodeURIComponent(regexStr)})`;
       const message = new MarkdownString(dom);
 
       message.isTrusted = true;

src/log.ts

@@ -45,7 +45,9 @@ export class Log {
         : `${EXT_NAME} Error: ${err.toString()}`;
 
       const result = await window.showErrorMessage(message, openOutputButton);
-      if (result === openOutputButton) { this.show(); }
+      if (result === openOutputButton) {
+        this.show();
+      }
     }
   }
 

src/utils.ts

@@ -27,31 +27,38 @@ export function getWorkspaceInfo() {
       info.schemaPath = `${folder.uri.toString()}${sep}`;
       info.uri = folder.uri;
     }
-  }
-  else {
+  } else {
     return false;
   }
   return info;
 }
 
 export function isTargetFile(path: string) {
   // only check vue file for now
-  if (/.*\.vue$/.test(path)) { return true; }
+  if (/.*\.vue$/.test(path)) {
+    return true;
+  }
   return false;
 }
 
 export function getRelativePath(path: string) {
   const info = getWorkspaceInfo();
-  if (!info) { return false; }
+  if (!info) {
+    return false;
+  }
 
-  if (path.startsWith(info.schemaPath)) { return path.slice((info.schemaPath).length); }
+  if (path.startsWith(info.schemaPath)) {
+    return path.slice((info.schemaPath).length);
+  }
 
   return path;
 }
 
 export function getAbsoluteUri(path: string[]) {
   const info = getWorkspaceInfo();
-  if (!info || !info.uri) { return false; }
+  if (!info || !info.uri) {
+    return false;
+  }
 
   return Uri.joinPath(info.uri, ...path);
 }