mirror of
https://github.com/pdemian/human2regex.git
synced 2025-05-16 04:20:35 -07:00
small changes to UI
This commit is contained in:
Patrick Demian
parent
fad904d43d
commit
a23efd3904
5
docs/bundle.min.css
vendored
5
docs/bundle.min.css
vendored
File diff suppressed because one or more lines are too long
34
docs/bundle.min.js
vendored
34
docs/bundle.min.js
vendored
File diff suppressed because one or more lines are too long
@ -1,4 +1,4 @@
|
||||
<!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"> 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">
|
||||
<!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"> 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" onkeydown='if(9===event.keyCode){var v=this.value,s=this.selectionStart,e=this.selectionEnd;return this.value=v.substring(0,s)+"\t"+v.substring(e),this.selectionStart=this.selectionEnd=s+1,!1}'>
|
||||
// H2R supports // # and /**/ as comments
|
||||
// A group is only captured if given a name.
|
||||
// You can use "and", "or", "not" to specify "[]" regex
|
||||
@ -37,4 +37,4 @@ 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 © 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>
|
||||
</textarea></div><br><div class="col-lg-4 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> optionally repeats the indented text 3 to 5 times</p><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 © 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>
|
||||
137
src/script.ts
137
src/script.ts
@ -1,96 +1,71 @@
|
||||
/*! Copyright (c) 2020 Patrick Demian; Licensed under MIT */
|
||||
"use strict";
|
||||
|
||||
import "./webpage/style.css";
|
||||
|
||||
import { Human2RegexLexer, Human2RegexLexerOptions } from "./lexer";
|
||||
import { Human2RegexParser, Human2RegexParserOptions } from "./parser";
|
||||
import { RobotLanguage } from "./generator";
|
||||
import { lexErrorToCommonError, parseErrorToCommonError, semanticErrorToCommonError, ICommonError } from "./utilities";
|
||||
import $ from "jquery";
|
||||
|
||||
import "./webpage/bootstrap.css";
|
||||
import "./webpage/cleanblog.css";
|
||||
import "./webpage/style.css";
|
||||
|
||||
|
||||
|
||||
/*
|
||||
$(function() {
|
||||
const total_errors: ICommonError[] = [];
|
||||
const lexer = new Human2RegexLexer(new Human2RegexLexerOptions(true));
|
||||
const parser = new Human2RegexParser(new Human2RegexParserOptions(true));
|
||||
const result = lexer.tokenize($("#human").text());
|
||||
|
||||
});
|
||||
*/
|
||||
result.errors.map(lexErrorToCommonError).forEach((x) => total_errors.push(x));
|
||||
|
||||
|
||||
|
||||
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.
|
||||
// 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
|
||||
`);
|
||||
console.timeEnd("tokenize");
|
||||
|
||||
|
||||
const total_errors: ICommonError[] = [];
|
||||
|
||||
|
||||
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));
|
||||
|
||||
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.time("to regex");
|
||||
const r = regex.toRegex(RobotLanguage.JS);
|
||||
console.timeEnd("to regex");
|
||||
parser.input = result.tokens;
|
||||
|
||||
console.log(r);
|
||||
const regex = parser.parse();
|
||||
|
||||
parser.errors.map(parseErrorToCommonError).forEach((x) => total_errors.push(x));
|
||||
|
||||
let lang: RobotLanguage = RobotLanguage.JS;
|
||||
switch ($("#dialect option:selected").val()) {
|
||||
case "dotnet":
|
||||
lang = RobotLanguage.DotNet;
|
||||
break;
|
||||
case "java":
|
||||
lang = RobotLanguage.Java;
|
||||
break;
|
||||
case "perl":
|
||||
lang = RobotLanguage.Perl;
|
||||
break;
|
||||
default:
|
||||
lang = RobotLanguage.JS;
|
||||
break;
|
||||
}
|
||||
|
||||
const valid = regex.validate(lang);
|
||||
|
||||
valid.map(semanticErrorToCommonError).forEach((x) => total_errors.push(x));
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||
if (total_errors.length === 0) {
|
||||
const r = regex.toRegex(lang);
|
||||
$("#regex").attr("value", r);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
console.log("Errors = " + total_errors);
|
||||
console.log("Errors = " + total_errors);
|
||||
|
||||
$("#dialect").on("selectionchanged", () => {
|
||||
//do something
|
||||
});
|
||||
|
||||
$("#human").on("input", () => {
|
||||
//do something
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
9005
src/webpage/bootstrap.css
vendored
Normal file
9005
src/webpage/bootstrap.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
223
src/webpage/cleanblog.css
Normal file
223
src/webpage/cleanblog.css
Normal file
@ -0,0 +1,223 @@
|
||||
|
||||
/*!
|
||||
* Start Bootstrap - Clean Blog v5.0.8 (https://startbootstrap.com/template-overviews/clean-blog)
|
||||
* Copyright 2013-2019 Start Bootstrap
|
||||
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-clean-blog/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
body {
|
||||
font-size: 20px;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
p a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.form-inline .form-control {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.form-inline label {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-inline .form-group {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
-ms-flex-flow: row wrap;
|
||||
flex-flow: row wrap;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 800;
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
color: #fff;
|
||||
background: #0085a1;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: #fff;
|
||||
background: #0085a1;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#mainNav {
|
||||
position: absolute;
|
||||
border-bottom: 1px solid transparent;
|
||||
background-color: #232323;
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#mainNav .navbar-brand {
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#mainNav .navbar-toggler {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
padding: 13px;
|
||||
text-transform: uppercase;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
#mainNav .navbar-nav > li.nav-item > a {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
#mainNav {
|
||||
position: fixed;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
#mainNav .navbar-brand {
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
}
|
||||
#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
#mainNav .navbar-nav > li.nav-item > a {
|
||||
padding: 10px 20px;
|
||||
color: #fff;
|
||||
}
|
||||
#mainNav .navbar-nav > li.nav-item > a:focus, #mainNav .navbar-nav > li.nav-item > a:hover {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
header.masthead {
|
||||
background: no-repeat center center;
|
||||
background-color: #868e96;
|
||||
background-attachment: scroll;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
header.masthead .overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #212529;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
header.masthead .site-heading {
|
||||
padding: 60px 0 20px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
header.masthead .site-heading {
|
||||
padding: 60px 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
header.masthead .site-heading {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header.masthead .site-heading h1 {
|
||||
font-size: 50px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
header.masthead .site-heading .subheading {
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
line-height: 1.1;
|
||||
display: block;
|
||||
margin: 10px 0 0;
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
header.masthead .site-heading h1 {
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#maincontent {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
padding: 20px 0 20px;
|
||||
background-color: #232323;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 14px;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #00748c;
|
||||
border-color: #00748c;
|
||||
}
|
||||
|
||||
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
|
||||
color: #fff;
|
||||
background-color: #004b5c !important;
|
||||
border-color: #004b5c !important;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
font-size: 16px;
|
||||
padding: 25px 35px;
|
||||
}
|
||||
@ -16,7 +16,7 @@
|
||||
<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">
|
||||
<textarea class="form-control" id="human" rows="25" onkeydown="if(event.keyCode===9){var v=this.value,s=this.selectionStart,e=this.selectionEnd;this.value=v.substring(0, s)+'\t'+v.substring(e);this.selectionStart=this.selectionEnd=s+1;return false;}">
|
||||
// H2R supports // # and /**/ as comments
|
||||
// A group is only captured if given a name.
|
||||
// You can use "and", "or", "not" to specify "[]" regex
|
||||
@ -58,7 +58,7 @@ create an optional group
|
||||
</textarea>
|
||||
</div>
|
||||
<br>
|
||||
<div class="col-lg-4" class="margin-when-small">
|
||||
<div class="col-lg-4 margin-when-small">
|
||||
<div class="cheatsheet">
|
||||
<h2>Cheat Sheet:</h2>
|
||||
<p>Full documentation available <a href="tutorial.html">here</a></p>
|
||||
@ -72,7 +72,7 @@ create an optional group
|
||||
<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><code>optionally repeat between 3 to 5</code> optionally repeats the indented text 3 to 5 times</p>
|
||||
<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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user