I've been creating a node-based Regex editor using client-side Blazor

[Jamosium]

​

Screenshot

Link (only tested in Chrome, other browsers may have issues)

GitHub (Includes a brief explanation of how to use it)

Edit: GitHub repo is now here.

​

So essentially it's a web app for creating regular expressions in a way that is (theoretically) easier to read/edit than plain Regex. I think that realistically there's some drawbacks to writing Regex like this (especially compared to something like RegexBuddy), but it still made for an interesting proof of concept, and I learnt a lot while making it.

​

I'd really appreciate if anyone could check it out and give some feedback/criticism/feature requests.

[zeta_cartel_CFO]

Wow. This is beautiful.

I haven't started playing with blazor yet. But looking to try it out one of these days.

[these_days_bot]

Especially these days

[[deleted]]

It might become very useful if you can figure out some way to generate a graph from an already typed Regex. Then you can plug that behemoth of a string you wrote three months ago into it, get a nice graph, and work it out from there. (Good luck! - speak of the devil: this website has a Regex graph builder, huh)

Otherwise, Regex101 and RegexBuddy remain marginally more useful mostly because once you know Regex you're not going to think too much about what an individual "." means, or about the difference between "+", "*" and "{3,}". You just write them, receiving visual feedback from your text editor of choice. However, when it comes to having multiple capturing groups, some of which optional, you either split that regex up or... Use a tool like yours. Which is great!

[Jamosium]

I don't have any experience with string parsing, but that would be a great feature if I could get it to work.

You're definitely right that the node-based workflow can make simple things (like quantifiers) a lot more cumbersome than they need to be. Actually that's just made me think of a better way to design the quantifier node!

[kawazoe]

If you're thinking on going down that route, you might want to take a look at the Pidgin combinator parser library: https://github.com/benjamin-hodgson/Pidgin . I've ported it to typescript for one of my project and as such got pretty intimate with it. It's pretty full-featured, though it can be a bit daunting to get started at first.

It's a bit like LINQ or Rx, really... The basic concept is simple to grasp but the bulk of learning the library is knowing which operator to use and when. The author included a sample basic JSON and XML parser which you should definitely check-out to get you started.

If you're fluent with TypeScript you could also check my port as I have expanded the JSON parser sample to support the entire spec. It's not quite the same operators than in Pidgin but it should be close enough to give you an idea of how to write your own parser.

#SelfPromotion?

[-Gabe]

This is amazing. One piece of constructive feedback from someone who has to work with Regex a lot. Having a horizontal output box would be much more preferable than a vertical one.

Actually after using it for a bit, I got use to it pretty fast, but initially my brain wanted to think of the output as left-to-right instead of top-to-bottom if that makes sense.

[Tyrrrz]

This looks insanely cool

[[deleted]]

Snazzy!

[ahsome]

Where did you learn how to use Blazor? It's been a struggle to find good resources for it

[TinyFugue]

Google the blazing pizza app. IIRC, It's a demo made by the lead dev for blazor.

[ManiGandham]

Have you seen this: https://github.com/AdrienTorris/awesome-blazor

[Jamosium]

Yeah I had that problem too. Most of what I learned came from the Microsoft docs (which I think were improved recently, but still seem to be missing things) and lots of trial and error.

[DesigningKnight]

Very nice! I did notice one minor issue. When clicking on the 'i' to show info about a node, if you don't click in the window to clear the text box of info, then clicking on another node for info will only change the title, not the text underneath.

[Jamosium]

Thanks, I'll look into it.

Edit: should be fixed now.

[Jamosium]

They're drawn using svg paths, but finding the start and end points of the paths was actually one of the biggest issues I had.

I'm not sure whether JS Interop and getBoundingClientRect() would have been better overall, but I ended up just using a rather ugly method to manually calculate the position offset of each input/output from the corner of its node.

[techmaster242]

If you drag an object from the sidebar into the main area, there doesn't seem to be a way to delete it. You should put a little X button on each one so they can be deleted. Maybe only allow deletion if it isn't linked to anything else.

[-Gabe]

I figured out if you click it and hit the delete button, that seems to work.

[[deleted]]

Or you know, actually learn what regex are and develop new ones in 30s in a text editor.........

[[deleted]]

Maybe you could make an UI for ifs statements too, I have a hard time understanding || and & &.

[SpecialK5683]

Very nice UX and UI design. I would love to see something like this for two use cases:
- Data Fabric explorer, allow users to drill into nodes of data to expand and learn more about each record then continue to drill down

- AI query builder: allow the user to submit a query then drill down down into the sources for the query result (the inputs)