v/human2regex
1
0
Fork 0
mirror of https://github.com/pdemian/human2regex.git synced 2025-05-16 04:20:35 -07:00
Code Issues Projects Releases Wiki Activity

Created a semi-usable website UI

Browse Source
This commit is contained in:
Patrick Demian 2020-10-31 03:21:08 -04:00
parent 18d4c4418f
commit fad904d43d
12 changed files with 200 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/404.html
View File

@ -1 +1 @@
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="description" content="Not Found"><meta name="keywords" content="Human2Regex, Human, Regex, Natural, Language, Natural Language"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Error 404 - Not Found</title><link href="bundle.min.css" rel="stylesheet" type="text/css"><meta name="theme-color" content="#212529"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><link rel="icon" type="image/x-icon" href="favicon.ico"></head><body><a class="skip skip-top" href="#maincontent">Skip to main content</a><div class="wrapper"><nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"><div class="container"><a class="navbar-brand" href="index.html"><img src="favicon.png" width="30" height="30" class="d-inline-block align-top" alt="logo">&nbsp;Human2Regex</a></div></nav><header class="masthead"><div class="overlay"></div><div class="container"><div class="row"><div class="col-lg-12 col-md-12 mx-auto"><div class="site-heading"><h1>404</h1><span class="subheading">Not Found</span></div></div></div></div></header><div class="container" id="maincontent" role="main"><br><br><br><div class="row"><div class="col-12 mx-auto"><h3 class="align_header">The resource could not be found.</h3></div></div></div><footer><div class="container"><div class="row"><div class="col-lg-8 col-md-10 mx-auto"><p class="copyright">Copyright &copy; 2020 Patrick Demian. This page's source code is available at <a rel="noopener noreferrer" href="https://github.com/pdemian/">github.com/pdemian/</a></p></div></div></div></footer></div><script defer="defer" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script defer="defer" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script><script defer="defer" src="bundle.min.js"></script></body></html>
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="description" content="Not Found"><meta name="keywords" content="Human2Regex, Human, Regex, Natural, Language, Natural Language"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Error 404 - Not Found</title><link href="bundle.min.css" rel="stylesheet" type="text/css"><meta name="theme-color" content="#212529"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><link rel="icon" type="image/x-icon" href="favicon.ico"></head><body><a class="skip skip-top" href="#maincontent">Skip to main content</a><div class="wrapper"><nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"><div class="container"><a class="navbar-brand" href="index.html"><img src="favicon.png" width="30" height="30" class="d-inline-block align-top" alt="logo">&nbsp;Human2Regex</a></div></nav><header class="masthead"><div class="overlay"></div><div class="container"><div class="row"><div class="col-lg-12 col-md-12 mx-auto"><div class="site-heading"><h1>404</h1><span class="subheading">Not Found</span></div></div></div></div></header><div class="container" id="maincontent" role="main"><br><br><br><div class="row"><div class="col-12 mx-auto"><h3 class="align_header">The resource could not be found.</h3></div></div></div><footer><div class="container"><div class="row"><div class="col-lg-8 col-md-10 mx-auto"><p class="copyright">Copyright &copy; 2020 Patrick Demian. This page's source code is available at <a rel="noopener noreferrer" href="https://github.com/pdemian/">github.com/pdemian/</a></p></div></div></div></footer></div><script defer="defer" src="bundle.min.js"></script></body></html>

4
docs/bundle.min.css vendored
View File

File diff suppressed because one or more lines are too long

14
docs/bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

41
docs/index.html
View File

@ -1 +1,40 @@
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="description" content="Create regular expressions with natural, human language"><meta name="keywords" content="Human2Regex, Human, Regex, Natural, Language, Natural Language"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Human2Regex</title><link href="bundle.min.css" rel="stylesheet" type="text/css"><meta name="theme-color" content="#212529"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><link rel="icon" type="image/x-icon" href="favicon.ico"></head><body><a class="skip skip-top" href="#maincontent">Skip to main content</a><div class="wrapper"><nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"><div class="container"><a class="navbar-brand" href="index.html"><img src="favicon.png" width="30" height="30" class="d-inline-block align-top" alt="logo">&nbsp;Human2Regex</a></div></nav><div class="container" id="maincontent" role="main"><br><br><br><div class="row"><div class="col-12 mx-auto"><h3 class="align_header">Stuff here</h3></div></div></div><footer><div class="container"><div class="row"><div class="col-lg-8 col-md-10 mx-auto"><p class="copyright">Copyright &copy; 2020 Patrick Demian. This page's source code is available at <a rel="noopener noreferrer" href="https://github.com/pdemian/">github.com/pdemian/</a></p></div></div></div></footer></div><script defer="defer" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script defer="defer" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script><script defer="defer" src="bundle.min.js"></script></body></html>
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="description" content="Create regular expressions with natural, human language"><meta name="keywords" content="Human2Regex, Human, Regex, Natural, Language, Natural Language"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Human2Regex</title><link href="bundle.min.css" rel="stylesheet" type="text/css"><meta name="theme-color" content="#212529"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><link rel="icon" type="image/x-icon" href="favicon.ico"></head><body><a class="skip skip-top" href="#maincontent">Skip to main content</a><div class="wrapper"><nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"><div class="container"><a class="navbar-brand" href="index.html"><img src="favicon.png" width="30" height="30" class="d-inline-block align-top" alt="logo">&nbsp;Human2Regex</a></div></nav><div class="container" id="maincontent" role="main"><div class="row"><div class="col-lg-8"><div class="form-group row zero-margin-bottom"><p class="col-sm-4">Regex dialect:</p><span class="col-sm-8"><select class="form-control" id="dialect"><option value="js" selected="selected">Javascript</option><option value="dotnet">.NET</option><option value="java">Java</option><option value="perl">Perl</option></select></span></div><h4>Your Regular Expression:</h4><input readonly="readonly" class="form-control" id="regex"><h4>Human Speak:</h4><textarea class="form-control" id="human" rows="25">
// H2R supports // # and /**/ as comments
// A group is only captured if given a name.
// You can use "and", "or", "not" to specify "[]" regex
// You can use "then" to combine match statements, however I find using multiple "match" statements easier to read
// exact matching means use a ^ and $ to signify the start and end of the string
using global and exact matching
create an optional group called protocol
match "http"
optionally match "s"
match "://"
create an optional group called subdomain
repeat
match a word
match "."
create a group called domain
match 1+ words or "_" or "-"
match "."
match a word
# port, but we don't care about it, so ignore it
optionally match ":" then 0+ digits
create an optional group called path
repeat
match "/"
match 0+ words or "_" or "-"
create an optional group
# we don't want to capture the '?', so don't name the group until afterwards
match "?"
create a group called query
repeat
match 1+ words or "_" or "-"
match "="
match 1+ words or "_" or "-"
create an optional group
# fragment, again, we don't care, so ignore everything afterwards
match "#"
match 0+ any thing
</textarea></div><br><div class="col-lg-4" class="margin-when-small"><div class="cheatsheet"><h2>Cheat Sheet:</h2><p>Full documentation available <a href="tutorial.html">here</a></p><p class="font-weight-bold">Matching</p><p><code>match "hello world"</code> matches "hello world" exactly</p><p></p><p><code>match "hello" then optionally " world"</code> matches "hello" or "hello world"</p><p><code>match "hello" or "world"</code> matches "hello" or "world</p><p><code>match a word</code> matches any word</p><p class="font-weight-bold">Repetition</p><p><code>match 0+ "hello"</code> matches 0 or more "hello"s</p><p><code>match 3 "hello"</code> matches exactly "hellohellohello"</p><p><code>match 1 to 5 "hello"</code> matches between 1 to 5 "hello"s</p><p><code>repeat 0 or more</code> repeats the intended text 0 or more times (default)</p><p><code>optionally repeat between 3 to 5</code></p>optionally repeats the indented text 3 to 5 times<p class="font-weight-bold">Grouping</p><p><code>create a group called "mygroup"</code> creates a group called "mygroup"</p><p><code>create an optional group</code> creates an unnamed optional group</p></div></div></div></div><footer><div class="container"><div class="row"><div class="col-lg-8 col-md-10 mx-auto"><p class="copyright">Copyright &copy; 2020 Patrick Demian. This page's source code is available at <a rel="noopener noreferrer" href="https://github.com/pdemian/">github.com/pdemian/</a></p></div></div></div></footer></div><script defer="defer" src="bundle.min.js"></script></body></html>

1
docs/tutorial.html Normal file
View File

@ -0,0 +1 @@
<!DOCTYPE html><html lang="en" dir="ltr"><head><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="description" content="Create regular expressions with natural, human language"><meta name="keywords" content="Human2Regex, Human, Regex, Natural, Language, Natural Language"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Human2Regex Tutorial</title><link href="bundle.min.css" rel="stylesheet" type="text/css"><meta name="theme-color" content="#212529"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="default"><link rel="icon" type="image/x-icon" href="favicon.ico"></head><body><a class="skip skip-top" href="#maincontent">Skip to main content</a><div class="wrapper"><nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav"><div class="container"><a class="navbar-brand" href="index.html"><img src="favicon.png" width="30" height="30" class="d-inline-block align-top" alt="logo">&nbsp;Human2Regex</a></div></nav><div class="container" id="maincontent" role="main"><div class="row"><h2>Tutorial</h2><hr><p class="font-weight-bold">Preface</p><p>Human2Regex (H2R) is a way to spell out a regular expression in an easy to read, easy to modify language. H2R supports multiple languages as well as many (though not all) different regular expression types such as named groups and quantifiers. You may notice multiple keywords specifying the same thing, and that is intended! H2R is made to be flexible and easy to understand. With a range, do you prefer "...", "through", or "to"? It's up to you to choose, H2R supports all of those!</p><p class="font-weight-bold">Matching</p><p>Match using the keyword "match" followed by what you want to match. Example: <code>match "hello world"</code> will generate a regex that matches "hello world". You can chain multiple matches with the keyword "then", or use a newline and another match statement. Example: <code>match "hello" then " world"</code>. Matches that have a few possibilities can be matched with "or". Example: <code>match "hello world" or "hello"</code> will match either of those two. Matches which are optional can be done using the keyword "optional(ly)". Example: <code>optionally match "world"</code>. Anything inside the quoted string will be escaped to become a valid regular expression. H2R also comes with some convenience keywords "word(s)", "digit(s)", "character(s)", "whitespace(s)", and "number(s)" to capture words, single digits, characters, whitespace, and multiple digits respectively. Example: <code>match a word</code>. H2R can also capture a range of characters with the keywords from/to or between/and. Examples: <code>match from "a" to "z" then between "a" to "z"</code></p><p class="font-weight-bold">Repetition</p><p>H2R supports 2 types of repetition: single match repetition, or grouped repetition. When using "match" you can specify the number of captures you want just before the text you want to capture. Example: <code>match 2 digits</code> will match any 2 characters in a row. You can also specify a range you wish to capture. Example: <code>match 2..5 digits</code> will match 2, 3, 4, or 5 digits. You can specify if the final number is exclusive with the "exclusive" keyword. Example: <code>match 2 to 5 exclusive digits</code> will only match up to 4 digits. You can group a repetition using the "repeat" keyword. By default, this will match 0 or more of the following statements. The same qualifiers that exist for match exist for repeat. Example: <code>optionally repeat 3...7 times</code></p><p class="font-weight-bold">Grouping</p><p>Groups in H2R are created using the "create a group" phrase. With groups, you can specify if it is optional with the "optional" keyword, or if it has a name with "called" or "named". Example: <code>create an optional group called "MyGroup"</code></p></div></div><footer><div class="container"><div class="row"><div class="col-lg-8 col-md-10 mx-auto"><p class="copyright">Copyright &copy; 2020 Patrick Demian. This page's source code is available at <a rel="noopener noreferrer" href="https://github.com/pdemian/">github.com/pdemian/</a></p></div></div></div></footer></div><script defer="defer" src="bundle.min.js"></script></body></html>

19
src/script.ts
View File

@ -19,6 +19,7 @@ $(function() {
const lexer = new Human2RegexLexer(new Human2RegexLexerOptions(false));
const parser = new Human2RegexParser(new Human2RegexParserOptions(false));
console.time("tokenize");
const result = lexer.tokenize(`
// H2R supports // # and /**/ as comments
// A group is only captured if given a name.
@ -59,7 +60,7 @@ create an optional group
match "#"
match 0+ any thing
`);
console.timeEnd("tokenize");
const total_errors: ICommonError[] = [];
@ -69,14 +70,26 @@ result.errors.map(lexErrorToCommonError).forEach((x) => total_errors.push(x));
if (total_errors.length === 0) {
parser.input = result.tokens;
console.time("parse");
const regex = parser.parse();
console.timeEnd("parse");
parser.errors.map(parseErrorToCommonError).forEach((x) => total_errors.push(x));
regex.validate(RobotLanguage.JS).map(semanticErrorToCommonError).forEach((x) => total_errors.push(x));
console.time("validate");
const valid = regex.validate(RobotLanguage.JS);
console.timeEnd("validate");
valid.map(semanticErrorToCommonError).forEach((x) => total_errors.push(x));
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (total_errors.length === 0) {
console.log(regex.toRegex(RobotLanguage.JS));
console.time("to regex");
const r = regex.toRegex(RobotLanguage.JS);
console.timeEnd("to regex");
console.log(r);
}
}

2
src/tokens.ts
View File

@ -41,7 +41,7 @@ export const Exactly = createToken({name: "Exactly", pattern: /exact(ly)?/i});
export const Inclusive = createToken({name: "Inclusive", pattern: /inclusive(ly)?/i});
export const Exclusive = createToken({name: "Exclusive", pattern: /exclusive(ly)?/i});
export const From = createToken({name: "From", pattern: /from/i});
export const To = createToken({name: "To", pattern: /(to|\-|\.\.|\.\.\.)/i});
export const To = createToken({name: "To", pattern: /(to|through|thru|\-|\.\.|\.\.\.)/i});
export const Create = createToken({name: "Create", pattern: /create(s)?/i});
export const Called = createToken({name: "Called", pattern: /name(d)?|call(ed)?/i});
export const Repeat = createToken({name: "Repeat", pattern: /repeat(s|ing)?/i});

4
src/webpage/footer.mustache
View File

@ -13,10 +13,6 @@
</div>
<!-- Bootstrap core JavaScript -->
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<!-- Our script -->
<script defer src="bundle.min.js"></script>

83
src/webpage/index.mustache
View File

@ -1,12 +1,83 @@
{{> header}}
<!-- Main Content -->
<div class="container" id="maincontent" role="main">
<br><br><br>
<div class="row">
<div class="col-12 mx-auto">
<h3 class="align_header">Stuff here</h3>
<div class="row">
<div class="col-lg-8">
<div class="form-group row zero-margin-bottom">
<p class="col-sm-4">Regex dialect:</p>
<span class="col-sm-8">
<select class="form-control" id="dialect">
<option value="js" selected>Javascript</option>
<option value="dotnet">.NET</option>
<option value="java">Java</option>
<option value="perl">Perl</option>
</select>
</div>
<h4>Your Regular Expression:</h4>
<input readonly type="text" class="form-control" id="regex"></input>
<h4>Human Speak:</h4>
<textarea class="form-control" id="human" rows="25">
// H2R supports // # and /**/ as comments
// A group is only captured if given a name.
// You can use "and", "or", "not" to specify "[]" regex
// You can use "then" to combine match statements, however I find using multiple "match" statements easier to read
// exact matching means use a ^ and $ to signify the start and end of the string
using global and exact matching
create an optional group called protocol
match "http"
optionally match "s"
match "://"
create an optional group called subdomain
repeat
match a word
match "."
create a group called domain
match 1+ words or "_" or "-"
match "."
match a word
# port, but we don't care about it, so ignore it
optionally match ":" then 0+ digits
create an optional group called path
repeat
match "/"
match 0+ words or "_" or "-"
create an optional group
# we don't want to capture the '?', so don't name the group until afterwards
match "?"
create a group called query
repeat
match 1+ words or "_" or "-"
match "="
match 1+ words or "_" or "-"
create an optional group
# fragment, again, we don't care, so ignore everything afterwards
match "#"
match 0+ any thing
</textarea>
</div>
<br>
<div class="col-lg-4" class="margin-when-small">
<div class="cheatsheet">
<h2>Cheat Sheet:</h2>
<p>Full documentation available <a href="tutorial.html">here</a></p>
<p class="font-weight-bold">Matching</p>
<p><code>match "hello world"</code> matches "hello world" exactly<p>
<p><code>match "hello" then optionally " world"</code> matches "hello" or "hello world"</p>
<p><code>match "hello" or "world"</code> matches "hello" or "world</p>
<p><code>match a word</code> matches any word
<p class="font-weight-bold">Repetition</p>
<p><code>match 0+ "hello"</code> matches 0 or more "hello"s</p>
<p><code>match 3 "hello"</code> matches exactly "hellohellohello"</p>
<p><code>match 1 to 5 "hello"</code> matches between 1 to 5 "hello"s</p>
<p><code>repeat 0 or more</code> repeats the intended text 0 or more times (default)</p>
<p><code>optionally repeat between 3 to 5</code></p> optionally repeats the indented text 3 to 5 times
<p class="font-weight-bold">Grouping</p>
<p><code>create a group called "mygroup"</code> creates a group called "mygroup"</p>
<p><code>create an optional group</code> creates an unnamed optional group</p>
</div>
</div>
</div>
</div>
</div>
{{> footer}}

56
src/webpage/style.css
View File

@ -555,30 +555,6 @@ pre code {
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
.container-fluid {
width: 100%;
padding-right: 15px;
@ -9254,6 +9230,38 @@ footer {
/*! Copyright (c) 2020 Patrick Demian; Licensed under MIT */
@media (max-width: 992px) {
.margin-when-small {
margin-top: 10px;
margin-bottom: 10px;
}
}
h4 {
margin-top: 10px;
}
.cheatsheet {
height:100%;
padding:10px;
border-color: #ced4da;
border-style: solid;
border-radius: 10px;
border-width: 1px;
}
p {
font-size: 16px !important;
}
.zero-margin-bottom {
margin-bottom: 0px;
}
#maincontent {
margin-top: 75px;
}
.align_header {
text-align: center;
margin-bottom: 20px;

6
src/webpage/tutorial.json Normal file
View File

@ -0,0 +1,6 @@
{
"page": {
"title": "Human2Regex Tutorial",
"description": "Create regular expressions with natural, human language"
}
}

17
src/webpage/tutorial.mustache Normal file
View File

@ -0,0 +1,17 @@
{{> header}}
<!-- Main Content -->
<div class="container" id="maincontent" role="main">
<div class="row">
<h2>Tutorial</h2>
<hr>
<p class="font-weight-bold">Preface</p>
<p>Human2Regex (H2R) is a way to spell out a regular expression in an easy to read, easy to modify language. H2R supports multiple languages as well as many (though not all) different regular expression types such as named groups and quantifiers. You may notice multiple keywords specifying the same thing, and that is intended! H2R is made to be flexible and easy to understand. With a range, do you prefer "...", "through", or "to"? It's up to you to choose, H2R supports all of those!</p>
<p class="font-weight-bold">Matching</p>
<p>Match using the keyword "match" followed by what you want to match. Example: <code>match "hello world"</code> will generate a regex that matches "hello world". You can chain multiple matches with the keyword "then", or use a newline and another match statement. Example: <code>match "hello" then " world"</code>. Matches that have a few possibilities can be matched with "or". Example: <code>match "hello world" or "hello"</code> will match either of those two. Matches which are optional can be done using the keyword "optional(ly)". Example: <code>optionally match "world"</code>. Anything inside the quoted string will be escaped to become a valid regular expression. H2R also comes with some convenience keywords "word(s)", "digit(s)", "character(s)", "whitespace(s)", and "number(s)" to capture words, single digits, characters, whitespace, and multiple digits respectively. Example: <code>match a word</code>. H2R can also capture a range of characters with the keywords from/to or between/and. Examples: <code>match from "a" to "z" then between "a" to "z"</code></p>
<p class="font-weight-bold">Repetition</p>
<p>H2R supports 2 types of repetition: single match repetition, or grouped repetition. When using "match" you can specify the number of captures you want just before the text you want to capture. Example: <code>match 2 digits</code> will match any 2 characters in a row. You can also specify a range you wish to capture. Example: <code>match 2..5 digits</code> will match 2, 3, 4, or 5 digits. You can specify if the final number is exclusive with the "exclusive" keyword. Example: <code>match 2 to 5 exclusive digits</code> will only match up to 4 digits. You can group a repetition using the "repeat" keyword. By default, this will match 0 or more of the following statements. The same qualifiers that exist for match exist for repeat. Example: <code>optionally repeat 3...7 times</code>
<p class="font-weight-bold">Grouping</p>
<p>Groups in H2R are created using the "create a group" phrase. With groups, you can specify if it is optional with the "optional" keyword, or if it has a name with "called" or "named". Example: <code>create an optional group called "MyGroup"</code>
</div>
</div>
{{> footer}}