pacdiv / regex.guide Goto Github PK

The RegexGuide is an online tool for future regex users.

Home Page: https://regex.guide/?utm_source=github&utm_medium=repository&utm_campaign=default&utm_content=description_url

License: GNU General Public License v3.0

JavaScript 99.90% CSS 0.10%

regex regular-expressions regular-expression guide javascript react gatsby gatsby-site

regex.guide's Introduction

The Regex Guide

Start writing regular expressions even if you don’t have any knowledge about them!
Built from Gatsby’s default starter.

Introduction

Most of the current regex tools allow you to run a regular expression to test a text. This process requires to have knowledge on regular expressions. If you don’t have this knowledge, testing your regular expression becomes painful! 🥺

The Regex Guide does the opposite by helping you to build your regex, step-by-step. While you add pieces to a plain english sentence, The Regex Guide writes the corresponding regular expression. Hit the copy to clipboard button and you’re good to go! 🚀

Contributing

First, please make sure to read and observe the Code of Conduct.

At this time, The Regex Guide covers a tiny part of the regex cases. To make The Regex Guide a more complete guide, contributions are very welcomed! 🤗

However, please read the Contributing guidelines before taking any action! This allow people to weigh in on the discussion before you start working and submit any pull request.

The Regex Guide is powered by Gatsby. Run gatsby develop to start the project on localhost:8000.

Resources

Some resources about the regular expressions:

– Writing a regular expression pattern by MDN (@mdn)
– Learn Regex the easy way by Zeeshan Ahmad (ziishaned)
– The Joy of Regular Expressions, Part 1: What is regex? by Matt Cummings *

* The resource that gave me the idea to build The Regex Guide 🤩

Supporting

I work on the Regex Guide on my free time. For this, I won't ask you to back the project. Instead, I rather prefer to add a footer logo on the website to promote an other project of mine. Hope you won't mind! 🙏

License

GNU GPLv3.

regex.guide's People

Contributors

Stargazers

Watchers

Forkers

eudiegoborgs erick2280 git2358 the263 atefbb dev-mn hsk9210 abadiu

regex.guide's Issues

Handle ranges on the characters set sentence

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
After adding a set a characters such as A-F, the app, then, displays the sentence characters like "A", "-" or "F".

What is the expected behavior?
The displayed sentence should be characters from "A" to "F". The app should be able to display this type of range for letters and digits.

Add a blog section

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
A blog section will be useful in the future to create content related to regular expressions. Are needed:

a /blog route listing blog articles;
a /[article-name] displaying the content of an article.

Negative count

It is now possible to ask for negative count of selected quantifier.
e.g. "contain between -11 and -10 capital letters"

Add a twitter link

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
Left to the GitHub button, we should add a rounded Twitter link linking to https://twitter.com/intent/tweet?text=Nice%20tool%20for%20regex%20beginners,%20no%20knowledge%20required%20to%20start%20writing%20regular%20expressions!&hashtags=javascript&url=https://regex.guide. This link should be with a #1DA1F2 background and should contain this icon.

Add a “reset” button

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
As a user, I want to be able to reset my build by removing all the conditions I created. However, removing the conditions one by one can be binding. Under the “Copy to clipboard” button could be added a “Reset” or “Reset conditions” transparent button to remove all these conditions with one click.

Update the footer

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
The footer currently redirects to https://growthnotes.dev.

What is the expected behavior?
The footer should redirect to https://www.typeof.co and replace the word "growthnotes" with the following image.

Replace the README image

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
The image placed at the beginning of the README and on the website’s homepage does not reflect how the app looks like today.

What is the expected behavior?
This image must be replaced by the GIF below. However, the name should remain readme-image.gif.

Add unit tests

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
Currently, the project has no unit tests. This may lead to regressions on the core and components.

What is the expected behavior?
To avoid regressions by stopping the commit process if unit tests fail.

Improve the banner‘s UI

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
The lightsalmon banner contains a link to the GitHub repository. However, some users missed it and probably more users did too.

What is the expected behavior?
We should replace this texted link by a GitHub logo link, which is more visual and so more understandable. Some info about the UI :

Remove the background and the text on the banner;
Add this svg at the top right of the banner;
Add maybe 2em or 3em of padding on the banner to give this logo some space;
Surround the logo with the link to this repository;
Make sure that the logo has the currentColor and not the blue one from the ancher tag.

Update the playground‘s wording

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
The Playground's full sentence is quite long to read and the ending question is useless. Besides, it does not help to understand the table result shown right below this sentence.
Let‘s write
a [global or not] regex
verifying that the text
[type your text here]
does
[contain|start with|end with…]
[and so on…]
?

What is the expected behavior?
Since we show a table result of the String.match call results, we should try to simplify the sentence to the following pattern. Starting with a how would indicate that the user would discover how the match happens. Here‘s the new pattern:
How the string
[type your text here]
matches a [global or not] regex
[containing|starting with|ending with…]
[and so on…]
?

Capturing parentheses are misplaced

Do you want to request a feature or report a bug?
Bug.

What is the expected behavior?
As a user, when I add capturing parentheses on an opening expression, I got /(^\d+)/ instead of /^(\d+)/. I got the same misplaced parentheses for a closing expression, by having /(\d+$)/ instead of /(\d+)$/.

Add a quantifier step for sets of characters or words

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
As a user, by using the "a set" quantifier on Step 2, I'm not able to set any quantity on the expression I defined. If I'm looking for “one or many characters from A to F”, using the set of characters will give me [A-F] and there is no way to add a quantity after the closing bracket.

What is the expected behavior?
As a user, I want to be able to use a set of words or characters, and to set any quantity on it. If I'm looking for “one or many characters from A to F”, I should get [A-F]+. For “at least 6 characters from a to f”, I should get [a-f]{6,}. And so on for the other quantifiers.

Add an onboarding

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
As an user, when I land on the website, the playground appears and I'm not sure how to use it. A short onboarding could me to understand that.

What is the expected behavior?
First, the playground should be moved to /playground.
Then, the following text should be displayed on /:

Hi there, welcome! 👋

The Regex Guide helps you to write a regular expression matching a given string.
No regular expressions knowledge required!

Here's a snippet below on how you can use it:
![A Regex Guide use case](https://raw.githubusercontent.com/pacdiv/regex.guide/master/readme-image.gif "A Regex Guide use case")

Got it?

Finally, under this horizontally centered text should be added a grey button Let’s start! redirecting to /playground.

Add the “question mark” match

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
As a user, I want to be able to use the “question mark” to match the preceding expression 0 or 1 time. More info at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-questionmark.

Update the style of “transparent” buttons

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
Currently, transparent buttons, ie buttons with the “transparent-theme” classname, do not have background colors. It's difficult to understand if they are buttons or simply texts. To help users to understand that they are clickable, these transparent buttons could be underlined.

Add the “lookahead” match

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
As a user, I want to be able to use the “lookahead”, written x(?=y), to match 'x' only if 'x' is followed by 'y'. More info at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-lookahead.

Add “capturing parentheses” match

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
As a user, I want to be able to use “capturing parentheses”, written (x), to remember the match. More info at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-capturing-parentheses.

Update the robots.txt file

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
Add a line in the robots.txt file to allow the /playground URL.

Simplify how to get data from the core

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
Currently, the Playground component must call the core's getChunks and getRegexChunks methods after every condition add/update/delete.

What is the expected behavior?
As a maintainer, I should be able to call a function allowing to get both chunks and regexChunks, especially since regexChunks must stay synchronized with every change on chunks (this is also the case for capturedChunks, which only contains captures stored in chunks).

Code cleaning on ConditionInput and Playground components

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
Currently, the ConditionInput component contains some unused code:

In the propTypes and the state, exactQuantifierValue and queryString are used in these functions below;
The methods onChange and onExactLimitTextFieldChange are not used.

Also, the file Playground.spec.js.backUp is not used either.

What is the expected behavior?
These must be deleted.

A blank last step

Do you want to request a feature or report a bug?
Bug.

What is the current behavior?
As an user, every time I use the “zero or one” quantifier, a blank last step prints after the capturing parentheses step.

What is the expected behavior?
The last step should be the one asking about capturing parentheses.

Add the “lookbehind” match

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
As a user, I want to be able to use the “lookbehind”, written (?<=y)x, to match 'x' only if 'x' is preceded by 'y'. More info at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-lookbehind.

Add the “negated lookahead” match

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
As a user, I want to be able to use the “negated lookahead”, written x(?!y), to match 'x' only if 'x' is not followed by 'y'. More info at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-negated-look-ahead.

Add the “negated lookbehind” match

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
As a user, I want to be able to use the “negated lookbehind”, written (?<!y)x, to match 'x' only if 'x' is not preceded by 'y'. More info at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-negative-lookbehind.

Update condition form

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
The condition form steps are ordered this way:

Anchors, with Pick an anchor: as title;
Quantifiers, with Pick an quantifier: as title;
Characters, with Pick a type of characters: as title;
Capturing, with Will you need to match this with following expressions? as title.
For regex beginners, words as anchors or quantifiers can be difficult to understand. Also, as a user, characters are the first thing I‘m looking for then come the quantifiers. This means that the current process can be unexpected.

What is the expected behavior?
A more expected process with explicit titles:

Characters, with Which characters would you match? as title;
Quantifiers, with How many occurrences would you match? as title;
Anchors, with Any position restriction for this new rule? as title;
Capturing, with Should we keep in memory the match of this rule to be able to use it later? as title.

Add the “negated character set” match

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
As a user, I want to be able to use the “negated character set”, written [^xyz], to match anything that is not enclosed in the brackets. More info at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-negated-character-set.

Duplicates and misplaced “like” word

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
After adding a set a characters such as [A-F#;0-9a-z], the app, then, displays the sentence characters like from "A" to "F", "#", ";", "0", from "0" to "9", "a" or from "a" to "z".

First, characters like from is strange to read and continuing with like "#", ";", "0" can be difficult to understand. Also, it seems that "0" and "a" are duplicates from from "0" to "9" and from "a" to "z".

What is the expected behavior?
Maybe groups could be moved to the end of the sentence to display something like characters like "#", ";", "0", from "A" to "F", "0" to "9" or "a" to "z".

Update the header UI

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
Currently, the header text is PROOF OF CONCEPT IN DEVELOPMENT. GET INVOLVED HERE.. However, this project is no longer a proof of concept.

What is the expected behavior?
From now on, this text should be THE REGEX GUIDE IS OPEN SOURCE. JOIN US ON GITHUB!, where the previous text link HERE must be replaced by GITHUB. Also, should be added a fontSize to 700 on the header have a text more visible.

Update the homepage content

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
Currently, the homepage is an introduction/onboarding for the playground. However, the GIF on the homepage is pretty fast and does not successfully help to understand how to use the playground.

What is the expected behavior?
To replace the homepage by the following text:

Hi there, welcome! 👋

The RegexGuide helps you to perceive how useful and powerful regular expressions can be.

How? By helping you to write your first simple regular expressions without knowledge required!

Here’s what you need to do! Enter a text to match, then hit “Add a first condition” and icon buttons like “[add here the icon used in EditableText.js]” to add as much matching conditions as you need!

Disclaimer: Once you feel comfortable with these simple regexes, read some documentation and start writing more complex ones on your own! 🚀

Got it? Click the button below!

Update irrelevant website information

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
Some website info are irrelevant. We currently have:

As website description: Write a sentence, get a regex!
As homepage title: Write a sentence, get a regex
As background color: #663399
As theme color: #663399

What is the expected behavior?
These properties must need to be updated to:

As website description: Learn regular expressions through playing with plain english sentences.
As homepage title: The easiest way to learn regular expressions
As background color: #ffffff
As theme color: #ffffff

Add “back references” match

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
As a user, I want to be able to use “back references”, written \x where x is a number, to match a previous captured match. More info at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-backreference.

Is it related to other issues?
Yes. It can not be done before #36.

Add the “at least” match

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
As a user, I want to be able to use the “at least” quantifier, written {n,}, to match at least n occurrences of the preceding expression. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-quantifier.

Add a redirection from /playground to the homepage

Do you want to request a feature or report a bug?
Feature.

What is the current behavior?
The regex.guide link starts to be shared on a few websites and social networks accounts. However, some of these shares link to the playground page instead of the homepage. It‘s unfortunate because the homepage is the playground‘s onboarding. It will be better that newcomers see the homepage before the playground page.

What is the expected behavior?
Use the browser‘s sessionStorage to redirect /playground newcomers to the homepage.

Warnings during the build

Do you want to request a feature or report a bug?
Bug.

What is the current behavior?
Currently, the build prints 4 warnings.

What is the expected behavior?
The build should be clean and not print any warning or error.

Fix some linter errors

Do you want to request a feature or report a bug?
Bug.

What is the current behavior?
The same linter errors appears after every commit. As a developer, I don't commit them because they're not related to the issue I'm resolving.

What is the expected behavior?
To fix these issues by running a format command and pushing the updated files.

Add a sitemap file

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
Add a sitemap.xml file to the website and exclude the following paths:

/blog
/hello-world
/my-second-post
/new-beginnings

Title and description updates

Do you want to request a feature or report a bug?
Feature.

What is the expected behavior?
Please find below the updates:

Homepage title: RegexGuide: Online Tool for Future Regex Users.
Playground page title: The fastest way to start writing regular expressions
Website name: RegexGuide
Website description: The RegexGuide is a playground helping developers to start writing regular expressions. Trying the RegexGuide is adopting regular expressions!

pacdiv / regex.guide Goto Github PK

regex.guide's Introduction

Introduction

Contributing

Resources

Supporting

License

regex.guide's People

Contributors

Stargazers

Watchers

Forkers

regex.guide's Issues

Recommend Projects

Recommend Topics

Recommend Org