bowen7 / regex-vis Goto Github PK

View Code? Open in Web Editor NEW

3.6K 31.0 257.0 2.22 MB

🎨 Regex visualizer & editor

Home Page: https://regex-vis.com

License: MIT License

HTML 0.61% TypeScript 98.27% JavaScript 1.02% Dockerfile 0.10%

regex regexp visualizer editor typescript tsx react reactjs

regex-vis's Introduction

Regex-Vis

🎨 Regex visualizer & editor

Preview

Features

Visualizing regular expressions
Visual editing of regular expressions
Testing of regular expressions.

Blog

Contribution Guide

Feedback

Report a bug
You can also open a new discussion to ask questions about this repository or get help.

License

MIT

Star History

regex-vis's People

Contributors

Stargazers

Watchers

Forkers

yyyyylin leroygqlv mattdanielbrown robertyang1024 lixingyangok edwinyzh gaofancode alexwenbj jzhang3045 ngrict knightcn1983 wolfelee yihuaxiang shursulei huangweiboy2 denji fdewenh zhangaz1 woodu piyangyangle ericchencw jyipkwok hui6xin hhls hxl1990 yanlusu donaldxu sanyuesiyuewuyue 91cola xihuannioyj larryonline zhuhuibiao xmjwit hawley-hy xiaofengcy dunyi simonjhy wfvkvh godyy guiltypurple poisoners 0xnigel daysdays sqwu futurebody nodoubt0322-fork-project jqk6 jadegeek liumingmin lj-xu rgbwoo xc303919323 yp314311 kux007 shudaohanyun crimson725 sunshysui wyx-scottwu jinghe0 fpythoner bonkebo ssssnorlax zieglerzpc leeflora tjlzw luojiyin1987 der-ofenmeister dkdnet jeromeyoung lemon7proplus ljia310 heavenosk linecode nghialmt twilightlee hoangpq assassindesign fhyfhytt lewisprince poe1905 soapywu xzqqqcom zhubing1989 xufenglong xiawei666 oscarmcy atkins126 mavenmav msoft1115 daichenghe jerkinlee nanbo99 startagain2016 combatpatrol95 kanedev y753841460 bestxtools vikingdadmedic wasabikoolaid willcsw

regex-vis's Issues

Can you build it for a docker container?

Thanks~

Add the ability to export the graph as an image

Please add the ability to export the graph as an image.

For example, regexper.com supports this, providing download buttons for SVG and PNG.

SVG alone would be good enough, but PNG as well would be even better, if you care to.

Other languages

I could commit myself to integrate i18n in the app to be able to offer the application in several languages, starting with Spanish which is my mother tongue.

Selection area is jumpy when mouse dragged over node

When dragging the mouse to select some nodes, there's a "jump" in the selection <div> when the mouse moves over the "hitbox" of <text> or its wrapping <g>, and/or perhaps the children <tspan>:

<g font-size="16" transform="translate(25.75,20)">
    <text class="text" dy="0" text-anchor="middle" font-size="16">
        <tspan class="quote">" </tspan><tspan>a</tspan><tspan class="quote"> "</tspan>
    </text>
</g>

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions

.github/workflows/test.yml

actions/checkout v3

actions/setup-node v3

actions/cache v3

pnpm/action-setup v2.4.0

npm

package.json

@babel/core ^7.0.0

@geist-ui/core ^2.3.8

@geist-ui/icons ^1.0.2

@sentry/react ^7.7.0

@sentry/tracing ^7.7.0

@vercel/analytics ^1.0.0

hex-rgb ^5.0.0

i18next ^21.6.16

i18next-browser-languagedetector ^6.1.4

i18next-http-backend ^1.4.0

immer ^9.0.6

jotai ^1.7.1

nanoid ^3.1.16

react ^18.1.0

react-dom ^18.1.0

react-i18next ^11.16.7

react-router-dom ^6.3.0

react-scripts 4.0.3

react-use ^17.4.0

styled-jsx ^5.0.2

tilg ^0.1.1

typescript ^5.0.0

web-vitals ^3.3.0

@babel/preset-env ^7.14.2

@babel/preset-react ^7.14.5

@babel/preset-typescript ^7.14.5

@svgr/webpack ^5.5.0

@testing-library/jest-dom ^5.16.4

@testing-library/react ^14.0.0

@types/jest ^26.0.13

@types/node ^18.0.0

@types/react ^18.0.11

@types/react-dom ^18.0.5

@types/styled-jsx ^2.2.8

@types/testing-library__jest-dom ^5.14.4

babel-plugin-import ^1.13.3

customize-cra ^1.0.0

jest ^26.6.0

jest-canvas-mock ^2.5.0

react-app-rewired ^2.1.6

regenerator-runtime ^0.14.0

ts-jest ^26.5.6

ts-node ^10.0.0

webpack-bundle-analyzer ^4.8.0

Check this box to trigger a request for Renovate to run again on this repository

Parse RegExp error: " +"

非法正则改为正确后仍被判为非法

描述：当输入非法正则后，改为正确正则仍被判为非法
步骤：输入 [a-z]++ 后删除 + 改为 [a-z]+

[Bug Report] group match

reproduction
focus on the mask keyword match

after toggle include escape '\'

[Feature Request]VS Code Extension Support

是否考虑支持 VS Code插件？虽然已经有同类插件了，但我认为 Regex-Vis 的视觉设计更优秀，谢谢。

the "Test" function does not work

the regexp is: .+\s([a-zA-Z]+\s?)
test: DSad SDA 1123
expected: shows error (red)
actual: did not see any error for it

Can't figure out how to delete a node

I love this editor. Very easy to add/modify things you've added, but for the life of me, I can't figure out how to delete what I have selected. A simple enhancement would be to select the text in the editor textbook representing what you have selected in the diagram. You could then simply press delete.

For that same reason, the editor text box and the regex text viewer over on the right info pane seem a little redundant, with the one on the right highlighting but not being editable, and the one on the bottom being editable but not highlighting. If you combined the functionality into a single editor (at the bottom) and added the highlighting like I suggested, then that would go a long way to being even more usable.

Speaking of that box down at the bottom, can you please make it resizable? Personally Id' love it to be full-width, but I get visually it's not as appealing. So give us drag handles to make it so you can drag them out. (Currently I'm planning on attacking this with CSS injection, but that's a hack.)

can't launch the service

./src/index.tsx
Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using SourceMapConsumer

下面这个正则视别不了

/([\x{4E00}-\x{9FCC}])([0-9]{4}[0-9]{2}[0-9]{2}--[0-9]{4}[0-9]{2}[0-9]{2})(\d.\d*)/u

[BUG] 过长的正则生成的图无法左右滑动

问题描述

正则太长，生成的图宽度很大，无法左右滚动查看看完整的图

问题截图

参考正则

^avhls/(?<format>m3u8)(?:/segtime/(?<segtime>\d+))?(?:/ss/(?<ss>\d+)/t/(?<t>\d+))?(?:(/ab/(?<ab>\d+))|(/aq/(?<aq>\d+)))?(?:/ar/(?<ar>\d+))?(?:/r/(?<r>\d+))?(?:/vb/(?<vb>\d+))?(?:/vcodec/(?<vcodec>libx264|libvpx|libtheora|libxvid))?(?:/acodec/(?<acodec>libmp3lame|libfdk_aac))?(?:/s/(?<sWidth>\d?)x(?<sHeigth>\d?))?(?:/play/(?<play>[^/]+))?(?:/outKey/(?<outKey>[^/]))?(?:/pattern/(?<pattern>[^/]))?(?:/?)$

无法本地启动服务

我想要部署项目到本地。
按照文档里面 node16 版本pnpm install / start , 提示当前版本需要18，

node v18.20.4
npm 10.8.1
os window
当我用上面的版本操作，截图报错jest

然后我删除了package.json中的jest部分，然后删除package.lock.yml
pnpm start 报错加密问题因为升级node18导致的
我用这个命令解决了，$env:NODE_OPTIONS="--openssl-legacy-provider"

但是最后报typescript 版本5.5.3 过高，我实在是想不到方法了

希望能出一个部署教程，方便一下非前端开发人员使用，感谢

Can't click or drag elements from RHS legends onto main panel

Have tested using Windows 11 Chrome (v 124.0.6367.61) and also Firefox (v 125.0.2).

Can't click or drag elements from the RHS Legend onto the main panel to create the REGEX.

It's not throwing any errors in the console.

希望能支持平衡组/递归匹配可视化

<[^<>]*(((?'Open'<)[^<>]*)+((?'-Open'>)[^<>]*)+)*(?(Open)(?!))> 如这种表达式
出处；
正则表达式30分钟入门教程

/没有转义符

/字符串生成的时候没有转义符，标准的是有的吧

Create permalinks that include test cases

This would be a helpful feature for sharing links to WIP regexes - the URL doesn't need to auto-update to include them, but it would be great to have the option to generate a permalink that includes test cases

Broken graph: /|a/

error occurs when executing "pnpm install"

@Bowen7
when I execute "pnpm install", an error occurs. The error can be described as follows:

............  

Progress: resolved 1787, reused 0, downloaded 1571, added 1785  
Progress: resolved 1787, reused 0, downloaded 1571, added 1786  
TypeError: Cannot set property name of  which has only a getter  
    at err (/usr/local/node-v14.19.1-linux-x64/lib/node_modules/pnpm/dist/pnpm.cjs:12443:20)  
    at runPnpm (/usr/local/node-v14.19.1-linux-x64/lib/node_modules/pnpm/dist/pnpm.cjs:182389:5)  
    at runMicrotasks (<anonymous>)  
    at processTicksAndRejections (internal/process/task_queues.js:95:5)  
    at async /usr/local/node-v14.19.1-linux-x64/lib/node_modules/pnpm/dist/pnpm.cjs:182379:7

I wonder what I did wrong during the installation. Thanks a lot!

Parser bug: /a|b|c/

Error (`/`): Invalid regular expression

如何将项目引入（import）到自己的react项目中？

Visual link between the visualization and the regex

A visual link between the visualization and the regex would help to see what's going on - either (a) when you click a section of the visualization, it could highlight/bold/underline in the regex text, or perhaps (b) the different parts of the visualization could have (toggleable) persistent highlighting in the regex, similar to what regex101.com does.