Skip to content

Commit

Permalink
split and format
Browse files Browse the repository at this point in the history
  • Loading branch information
@Yamavu
Yamavu committed Aug 4, 2023
1 parent e94f567 commit 005ffa3
Show file tree
Hide file tree
Showing 3 changed files with 327 additions and 316 deletions.
268 changes: 268 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,268 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regex</title>

<script src="https://unpkg.com/lodash@4.17.21/lodash.min.js"></script>
<script src="https://unpkg.com/petite-vue"></script>
<script src="regex-petite-vue.js"></script>
<script>
function togglecheatsheet() {
cheatsheet = document.querySelector("#cheatsheet .content");
if (cheatsheet.style.visibility == "visible") {
cheatsheet.style.visibility = "hidden";
} else { // "hidden" or undefined
cheatsheet.style.visibility = "visible";
}
}
</script>
<script type="module">
PetiteVue.createApp(
{
query: 'fo+\\S+',
input: 'table football, foosball',
regex_flags: "g",
get getmarked() {
return marked(this.query, this.input, this.regex_flags);
},
get getmatches() {
return matches(this.query, this.input, this.regex_flags);
},
update_query: _.debounce(function (e) {
this.query = e.target.value
}, 100),
update_input: _.debounce(function (e) {
this.input = e.target.value
}, 100),

}).mount('#editor');
</script>
<script type="module" src="regex-petite-vue.js"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="editor">
<h1>Regex Static</h1>
<div class="label">Your regular expression:</div>
<div class="query">
/<input :value="query" @input="update_query"></textarea>/
</div>
<!--<div class="flags">
<i Ignore Casing Makes the expression search case-insensitively.
g Global Makes the expression search for all occurrences.
s Dot All Makes the wild character . match newlines as well.
m Multiline Makes the boundary characters ^ and $ match the beginning and ending of every single line instead of the beginning and ending of the whole string.
y Sticky Makes the expression start its searching from the index indicated in its lastIndex property.
u Unicode
</div>-->
<div class="content">
<div class="label">Your test string:</div>
<textarea class="input" :value="input" @input="update_input"></textarea>

<div class="output">
<div>
<div class="label">Match result:</div>
<div class="marked" v-html="getmarked"></div>
</div>
<div>
<div class="label">Match captures: <a id="download" type="text/csv">Download CSV</a></div>
<div class="matches" v-html="getmatches"></div>
</div>
</div>
</div>
<div id="cheatsheet">
<div class="header" onclick="togglecheatsheet()">
Regular expression cheatsheet
</div>
<div class="content">
<div>
<h3>Special characters</h3>
<div class="round">
<table>
<tbody>
<tr>
<th><code>\</code></th>
<td>escape special characters</td>
</tr>
<tr>
<th><code>.</code></th>
<td>matches any character</td>
</tr>
<tr>
<th><code>^</code></th>
<td>matches beginning of string</td>
</tr>
<tr>
<th><code>$</code></th>
<td>matches end of string</td>
</tr>
<tr>
<th><code>[5b-d]</code></th>
<td>matches any chars '5', 'b', 'c' or 'd'</td>
</tr>
<tr>
<th><code>[^a-c6]</code></th>
<td>matches any char except 'a', 'b', 'c' or '6'</td>
</tr>
<tr>
<th><code>R|S</code></th>
<td>matches either regex <code>R</code> or regex <code>S</code></th>
</tr>
<tr>
<th><code>()</code></th>
<td>creates a capture group and indicates precedence</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h3>Quantifiers</h3>
<div class="round">
<table>
<tbody>
<tr>
<th><code>*</code></th>
<td>0 or more (append <code>?</code> for non-greedy)</td>
</tr>
<tr>
<th><code>+</code></th>
<td>1 or more (append <code>?</code> for non-greedy)</td>
</tr>
<tr>
<th><code>?</code></th>
<td>0 or 1 (append <code>?</code> for non-greedy)</td>
</tr>
<tr>
<th><code>{m}</code></th>
<td>exactly <code>m</code>m occurrences</td>
</tr>
<tr>
<th><code>{m, n}</code></th>
<td>from <code>m</code> to <code>n</code>. <code>m</code> defaults to 0, <code>n</code> to infinity
</td>
</tr>
<tr>
<th><code>{m, n}?</code></th>
<td>from <code>m</code> to <code>n</code>, as few as possible</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h3>Special sequences</h3>
<div class="round">
<table>
<tbody>
<tr>
<th><code>\A</code></th>
<td>start of string</td>
</tr>
<tr>
<th><code>\b</code></th>
<td>matches empty string at word boundary (between <code>\w</code> and <code>\W</code>)</td>
</tr>
<tr>
<th><code>\B</code></th>
<td>matches empty string not at word boundary</td>
</tr>
<tr>
<th><code>\d</code></th>
<td>digit</td>
</tr>
<tr>
<th><code>\D</code></th>
<td>non-digit</td>
</tr>
<tr>
<th><code>\s</code></th>
<td>whitespace: <code>[ \t\n\r\f\v]</code></th>
</tr>
<tr>
<th><code>\S</code></th>
<td>non-whitespace</td>
</tr>
<tr>
<th><code>\w</code></th>
<td>alphanumeric: <code>[0-9a-zA-Z_]</code></th>
</tr>
<tr>
<th><code>\W</code></th>
<td>non-alphanumeric</td>
</tr>
<tr>
<th><code>\Z</code></th>
<td>end of string</td>
</tr>
<tr>
<th><code>\g&lt;id&gt;</code></th>
<td>matches a previously defined group</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h3>Special sequences</h3>
<div class="round">
<table>
<tbody>
<tr>
<th><code>(?iLmsux)</code></th>
<td>matches empty string, sets re.X flags</td>
</tr>
<tr>
<th><code>(?:...)</code></th>
<td>non-capturing version of regular parentheses</td>
</tr>
<tr>
<th><code>(?P<name>...)</name></code></th>
<td>matches whatever matched previously named group</td>
</tr>
<tr>
<th><code>(?P=<name>)</name></code></th>
<td>digit</td>
</tr>
<tr>
<th><code>(?#...)</code></th>
<td>a comment; ignored</td>
</tr>
<tr>
<th><code>(?=...)</code></th>
<td>lookahead assertion: matches without consuming</td>
</tr>
<tr>
<th><code>(?!...)</code></th>
<td>negative lookahead assertion</td>
</tr>
<tr>
<th><code>(?&lt;=...)</code></th>
<td>lookbehind assertion: matches if preceded</td>
</tr>
<tr>
<th><code>(?&lt;!...)</code></th>
<td>negative lookbehind assertion</td>
</tr>
<tr>
<th><code>(?(id)yes|no)</code></th>
<td>match 'yes' if group 'id' matched, else 'no'</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--<div id="python-regex-cheatsheet-credit">
Based on tartley's <a href="https://github.com/tartley/python-regex-cheatsheet/">python-regex-cheatsheet</a>.
</div>-->
</div>
</div>
</div>

</body>

</html>
59 changes: 59 additions & 0 deletions regex-petite-vue.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
function regex_matches(regex, input, regex_flags) {
try {
query = new RegExp(regex, regex_flags);
return input.matchAll(query);
} catch (error) {
console.log("invalid regexp: " + regex);
}
}
function marked(regex, input, regex_flags) {
const matches = regex_matches(regex, input, regex_flags);
let output = "";
let cur = 0;
//console.log(JSON.stringify(input));
if (matches == undefined) return;
for (const match of matches) {
output += input.slice(cur, match.index) + `<mark>${match[0]}</mark>`;
cur = match.index + match[0].length;
//console.log( `Found ${match[0]} start=${match.index} end=${match.index + match[0].length}.`,);
}
if (cur < input.length) {
output += input.slice(cur);
}
//output = output.replaceAll("\n","<br/>");
return output;
}
function add_dowload_data(matches, download_id) {
var csv = "";
console.log(matches);
for (match of matches) {
csv += match[0] + "\n";
}
console.log(csv);
data = new Blob([csv]); // create a blob object
var url = URL.createObjectURL(data); // create a data URL from the blob
var link = document.getElementById(download_id); // get the link element
if (link != undefined) link.href = url; // set the href attribute to the data URL
}
function matches(regex, input, regex_flags) {
const matches = regex_matches(regex, input, regex_flags);
let output = "<ul>";
if (matches == undefined) return;
for (const match of matches) {
let matchArr = [...match];
//console.log(matchArr, matchArr.length);
output += `<li class ="matched">${matchArr[0]}`;
/* if (matchArr.length > 1){
output += "<ol>";
for (let i = 1; i++; i<matchArr.length){
if (matchArr[i] == undefined){console.log(matchArr[i]);break;}
output += `<li class ="matched">${matchArr[i]}</li>`
}
output += "</ol>";
} */
output += "</li>";
}
output += "</ul";
add_dowload_data(regex_matches(regex, input, regex_flags), "download");
return output;
}
Loading

0 comments on commit 005ffa3

Please sign in to comment.