feat: regex memo

CHANGELOG.md

@@ -3,7 +3,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## Next
+## 1.8.0
+- [feat] [REGEX memo](https://it-tools.tech/regex-memo)
+
+## 1.7.0
 - [feat] [Crontab friendly generator](https://it-tools.tech/crontab-generator)
 
 ## 1.6.0

README.md

@@ -23,7 +23,7 @@ Here is an unordered list of the current functionalities, and some that may come
 - [x] Base 64 string converter
 - [x] Crontab friendly generator
 - [ ] CSS memo (cheat sheet)
-- [ ] REGEX memo (cheat sheet) + tester?
+- [x] REGEX memo (cheat sheet) + tester?
 - [ ] Minify/un-minify
 - [ ] Image exif editor/remover
 - [ ] Image format converter?

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "it-tools",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1196,6 +1196,12 @@
         "@types/node": "*"
       }
     },
+    "@types/json-schema": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
+      "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
+      "dev": true
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -1446,6 +1452,24 @@
           "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
           "dev": true
         },
+        "ajv": {
+          "version": "6.12.4",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.4.tgz",
+          "integrity": "sha512-eienB2c9qVQs2KWexhkrdMLVDoIQCz5KSeLxwg9Lzk4DOfBtIK9PQwwufcsn1jjGuf9WZmqPMbGxOzfcuphJCQ==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+          "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+          "dev": true
+        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1470,6 +1494,44 @@
             "rimraf": "^2.7.1",
             "ssri": "^7.0.0",
             "unique-filename": "^1.1.1"
+          },
+          "dependencies": {
+            "fs-minipass": {
+              "version": "2.1.0",
+              "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+              "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+              "dev": true,
+              "requires": {
+                "minipass": "^3.0.0"
+              }
+            },
+            "minipass-collect": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
+              "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
+              "dev": true,
+              "requires": {
+                "minipass": "^3.0.0"
+              }
+            },
+            "minipass-flush": {
+              "version": "1.0.5",
+              "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
+              "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
+              "dev": true,
+              "requires": {
+                "minipass": "^3.0.0"
+              }
+            },
+            "minipass-pipeline": {
+              "version": "1.2.4",
+              "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz",
+              "integrity": "sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==",
+              "dev": true,
+              "requires": {
+                "minipass": "^3.0.0"
+              }
+            }
           }
         },
         "find-cache-dir": {
@@ -1504,6 +1566,12 @@
             "universalify": "^0.1.0"
           }
         },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
         "locate-path": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -1514,9 +1582,9 @@
           }
         },
         "make-dir": {
-          "version": "3.0.2",
+          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.2.tgz",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-          "integrity": "sha512-rYKABKutXa6vXTXhoV18cBE7PaewPXHe/Bdq4v+ZLMhxbWApkFFplT0LcbMW+6BbjnQXzZ/sAvSE/JdguApG5w==",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
           "dev": true,
           "requires": {
             "semver": "^6.0.0"
@@ -1583,21 +1651,73 @@
             "minipass": "^3.1.1"
           }
         },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
         "terser-webpack-plugin": {
-          "version": "2.3.5",
+          "version": "2.3.8",
-          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.5.tgz",
+          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
-          "integrity": "sha512-WlWksUoq+E4+JlJ+h+U+QUzXpcsMSSNXkDy9lBVkSqDn1w23Gg29L/ary9GeJVYCGiNJJX7LnVc4bwL1N3/g1w==",
+          "integrity": "sha512-/fKw3R+hWyHfYx7Bv6oPqmk4HGQcrWLtV3X6ggvPuwPNHSnzvVV51z6OaaCOus4YLjutYGOz3pEpbhe6Up2s1w==",
           "dev": true,
           "requires": {
             "cacache": "^13.0.1",
-            "find-cache-dir": "^3.2.0",
+            "find-cache-dir": "^3.3.1",
-            "jest-worker": "^25.1.0",
+            "jest-worker": "^25.4.0",
-            "p-limit": "^2.2.2",
+            "p-limit": "^2.3.0",
-            "schema-utils": "^2.6.4",
+            "schema-utils": "^2.6.6",
-            "serialize-javascript": "^2.1.2",
+            "serialize-javascript": "^4.0.0",
             "source-map": "^0.6.1",
-            "terser": "^4.4.3",
+            "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
+          },
+          "dependencies": {
+            "jest-worker": {
+              "version": "25.5.0",
+              "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-25.5.0.tgz",
+              "integrity": "sha512-/dsSmUkIy5EBGfv/IjjqmFxrNAUpBERfGs1oHROyD7yxjG/w+t0GOJDX8O1k32ySmd7+a5IhnJU2qQFcJ4n1vw==",
+              "dev": true,
+              "requires": {
+                "merge-stream": "^2.0.0",
+                "supports-color": "^7.0.0"
+              }
+            },
+            "schema-utils": {
+              "version": "2.7.1",
+              "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+              "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+              "dev": true,
+              "requires": {
+                "@types/json-schema": "^7.0.5",
+                "ajv": "^6.12.4",
+                "ajv-keywords": "^3.5.2"
+              }
+            },
+            "serialize-javascript": {
+              "version": "4.0.0",
+              "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+              "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+              "dev": true,
+              "requires": {
+                "randombytes": "^2.1.0"
+              }
+            },
+            "terser": {
+              "version": "4.8.0",
+              "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
+              "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
+              "dev": true,
+              "requires": {
+                "commander": "^2.20.0",
+                "source-map": "~0.6.1",
+                "source-map-support": "~0.5.12"
+              }
+            }
           }
         }
       }
@@ -3553,9 +3673,9 @@
       "dev": true
     },
     "copy-webpack-plugin": {
-      "version": "5.1.1",
+      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-5.1.2.tgz",
-      "integrity": "sha512-P15M5ZC8dyCjQHWwd4Ia/dm0SgVvZJMYeykVIVYXbGyqO4dWB5oyPHp9i7wjwo5LhtlhKbiBCdS2NvM07Wlybg==",
+      "integrity": "sha512-Uh7crJAco3AjBvgAy9Z75CjK8IG+gxaErro71THQ+vv/bl4HaQcpkexAY8KVW/T6D2W2IRr+couF/knIRkZMIQ==",
       "dev": true,
       "requires": {
         "cacache": "^12.0.3",
@@ -3568,7 +3688,7 @@
         "normalize-path": "^3.0.0",
         "p-limit": "^2.2.1",
         "schema-utils": "^1.0.0",
-        "serialize-javascript": "^2.1.2",
+        "serialize-javascript": "^4.0.0",
         "webpack-log": "^2.0.0"
       },
       "dependencies": {
@@ -3624,6 +3744,15 @@
             "ajv-keywords": "^3.1.0"
           }
         },
+        "serialize-javascript": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+          "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+          "dev": true,
+          "requires": {
+            "randombytes": "^2.1.0"
+          }
+        },
         "slash": {
           "version": "1.0.0",
           "resolved": "https://registry.npmjs.org/slash/-/slash-1.0.0.tgz",
@@ -4507,9 +4636,9 @@
       "dev": true
     },
     "elliptic": {
-      "version": "6.5.2",
+      "version": "6.5.3",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
-      "integrity": "sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==",
+      "integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
       "dev": true,
       "requires": {
         "bn.js": "^4.4.0",
@@ -5443,15 +5572,6 @@
         "universalify": "^0.1.0"
       }
     },
-    "fs-minipass": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
-      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0"
-      }
-    },
     "fs-write-stream-atomic": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
@@ -7154,33 +7274,6 @@
       "integrity": "sha512-yV+gqbd5vaOYjqlbk16EG89xB5udgjqQF3C5FAORDg4f/IS1Yc5ERCv5e/57yBcfJYw05V5JyIXabhwb75Xxow==",
       "dev": true
     },
-    "jest-worker": {
-      "version": "25.2.6",
-      "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-25.2.6.tgz",
-      "integrity": "sha512-FJn9XDUSxcOR4cwDzRfL1z56rUofNTFs539FGASpd50RHdb6EVkhxQqktodW2mI49l+W3H+tFJDotCHUQF6dmA==",
-      "dev": true,
-      "requires": {
-        "merge-stream": "^2.0.0",
-        "supports-color": "^7.0.0"
-      },
-      "dependencies": {
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
     "js-message": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.5.tgz",
@@ -8348,33 +8441,6 @@
         }
       }
     },
-    "minipass-collect": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/minipass-collect/-/minipass-collect-1.0.2.tgz",
-      "integrity": "sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0"
-      }
-    },
-    "minipass-flush": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/minipass-flush/-/minipass-flush-1.0.5.tgz",
-      "integrity": "sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0"
-      }
-    },
-    "minipass-pipeline": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/minipass-pipeline/-/minipass-pipeline-1.2.2.tgz",
-      "integrity": "sha512-3JS5A2DKhD2g0Gg8x3yamO0pj7YeKGwVlDS90pF++kxptwx/F+B//roxf9SqYil5tQo65bijy+dAuAFZmYOouA==",
-      "dev": true,
-      "requires": {
-        "minipass": "^3.0.0"
-      }
-    },
     "mississippi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "it-tools",
   "description": "",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/StyledTextarea.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="StyledTextarea" @input="updateInput(true)" contenteditable></div>
+</template>
+
+<script>
+export default {
+  name: "StyledTextarea",
+  props: {
+    value: String,
+    fn: Function,
+  },
+  data () {
+    return {
+      content: this.value
+    }
+  },
+  methods: {
+    updateInput (moveCursor) {
+      if(this.$el.innerText){
+        this.$emit('input', this.$el.innerText);
+        
+        let html = this.fn(this.$el.innerText);
+        this.$el.innerHTML = html;
+
+        if(moveCursor){
+          /* Move cursor to end of selection */
+          this.$el.focus();
+          document.execCommand('selectAll', false, null);
+          document.getSelection().collapseToEnd();
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .StyledTextarea {
+    overflow:scroll;
+    height:100px;
+    width:100%;
+    border:solid;
+    border-width:1px;
+    resize: vertical;
+  }
+</style>

src/router.js

@@ -132,6 +132,13 @@ const toolsComponents = [
                 icon: 'fa-code-branch',
                 component: () => import('./routes/tools/GitMemo'),
                 keywords: ['git', 'push', 'rebase', 'merge', 'tag', 'commit', 'checkout']
+            },
+            {
+                text: 'Regex memo',
+                path: '/regex-memo',
+                icon: 'fa-code',
+                component: () => import('./routes/tools/RegexMemo'),
+                keywords: ['regex', 'regular', 'expression']
             }
         ]
     },

src/routes/tools/RegexMemo.vue

@@ -0,0 +1,254 @@
+<template>
+    <v-row >
+      <v-col cols="12" xl="6" lg="6" md="4" sm="12">
+        <v-card class="single-card" id="REGEX_Tester">
+            <v-card-title>REGEX Tester</v-card-title>
+            <v-card-text>
+                <v-text-field
+                        outlined
+                        v-model="inputRegex"
+                        @input="handleRegexInput"
+                        label="Regular Expression"
+                />
+                Input Text
+                <StyledTextarea v-model="inputText" ref="styledTextarea" :fn="this.handleInput" />
+            </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" xl="6" lg="6" md="8" sm="12">
+        <v-card class="single-card" id="REGEX_Memo">
+            <v-card-title>REGEX Memo</v-card-title>
+            <table>
+              <tr><th>Character Classes</th></tr>
+              <tr>
+                <td>.</td><td>Any character except newline</td>
+              </tr>
+              <tr>
+                <td>\w \d \s</td><td>Word, digit, whitespace</td>
+              </tr>
+              <tr>
+                <td>\w \d \s</td><td>Word, digit, whitespace</td>
+              </tr>
+              <tr>
+                <td>[abc]</td><td>Any of a, b, or c</td>
+              </tr>
+              <tr>
+                <td>[^abc]</td><td>Not a, b, or c</td>
+              </tr>
+              <tr>
+                <td>[a-f]</td><td>Character between a &amp; f</td>
+              </tr>
+
+              <tr><th>Anchors</th></tr>
+              <tr>
+                <td>^abc$</td><td>^ is the start of the string, $ end of string</td>
+              </tr>
+              <tr>
+                <td>\b \B</td><td>Word, not-word boundary</td>
+              </tr>
+
+              <tr><th>Escaped characters</th></tr>
+              <tr>
+                <td>\.\*\\</td><td>Escaped special characters</td>
+              </tr>
+              <tr>
+                <td>\t\n\r</td><td>tab, linefeed, carriage return</td>
+              </tr>
+
+              <tr><th>Groups &amp; Lookaround</th></tr>
+              <tr>
+                <td>(abc)</td><td>capture group</td>
+              </tr>
+              <tr>
+                <td>\1</td><td>Backreference to group #1</td>
+              </tr>
+              <tr>
+                <td>(?:abc)</td><td>Non-capturing group</td>
+              </tr>
+              <tr>
+                <td>(?=abc)</td><td>positive lookahead</td>
+              </tr>
+              <tr>
+                <td>(?!abc)</td><td>negative lookahead</td>
+              </tr>
+
+              <tr><th>Quantifiers &amp; Alternation</th></tr>
+              <tr>
+                <td>a*a+a?</td><td>0 or more, 1 or more, 0 or 1</td>
+              </tr>
+              <tr>
+                <td>a{5}a{2,}</td><td>exactly five a's, two or more a's</td>
+              </tr>
+              <tr>
+                <td>a{1,3}</td><td>between one &amp; three a's</td>
+              </tr>
+              <tr>
+                <td>a+?a{2,}?</td><td>match as few as possible</td>
+              </tr>
+              <tr>
+                <td>ab|cd</td><td>match ab or cd</td>
+              </tr>
+            </table>
+        </v-card>
+      </v-col>
+    </v-row>
+</template>
+
+<script>
+    import StyledTextarea from "../../components/StyledTextarea";
+
+    export default {
+        name: "RegexMemo",
+        data() {
+            return {
+                inputRegex: '',
+                inputText: '',
+                tips: [
+                {
+                    section: 'Character Classes',
+                    child: [
+                        {
+                            text: 'Any character except newline',
+                            code: '.'
+                        },
+                        {
+                            text: 'Word, digit, whitespace',
+                            code: '\\w \\d \\s'
+                        },
+                        {
+                            text: 'Not word, digit, whitespace',
+                            code: '\\W \\D \\S'
+                        },
+                        {
+                            text: 'Any of a, b, or c',
+                            code: '[abc]'
+                        },
+                        {
+                            text: 'Not a, b, or c',
+                            code: '[^abc]'
+                        },
+                        {
+                            text: 'Character between a & f',
+                            code: '[a-f]'
+                        }
+                    ]
+                },
+                {
+                    section: 'Anchors',
+                    child: [
+                        {
+                            text: '^ is the start of the string, $ end of string',
+                            code: '^abc$'
+                        },
+                        {
+                            text: 'Word, not word boundary',
+                            code: '\\b \\B'
+                        }
+                    ]
+                },
+                {
+                    section: 'I\'ve made a mistake',
+                    child: [
+                        {
+                            text: 'Change last commit message',
+                            code: 'git commit --amend'
+                        },
+                        {
+                            text: 'Undo most recent commit and keep changes',
+                            code: 'git reset HEAD~1'
+                        },
+                    ]
+                },
+                {
+                    section: 'Setup SSH',
+                    child: [
+                        [
+                            {
+                                text: '1). Generate an SSH key.',
+                                code: 'ssh-keygen -t rsa -b 4096 -C "[email]"'
+                            },
+                            {
+                                text: '2). Start the ssh-agent in the background.',
+                                code: 'eval "$(ssh-agent -s)"'
+                            },
+
+                        ]
+                    ]
+                },
+                {
+                    section: 'Merge and rebase',
+                    child: [
+                        {
+                            text: 'Merge a branch into the current',
+                            code: 'git merge [branch]'
+                        },
+                        {
+                            text: 'Abort merge (conflicts)',
+                            code: 'git merge --abort'
+                        },
+                        {
+                            text: 'Continue merge after resolving conflicts',
+                            code: 'git merge --continue'
+                        },
+                    ]
+                },
+            ]
+            }
+        },
+        methods: {
+            handleRegexInput () {
+              this.$refs.styledTextarea.updateInput(false);
+            },
+            handleInput(str) {
+              let output = str;
+              if(this.inputRegex) {
+                try {
+                  let regex = new RegExp(this.inputRegex, 'g');
+
+                  const matches = [...str.matchAll(regex)];
+                  const matchMap = {};
+                  for(const match of matches) {
+                    const idx = match.index;
+                    const val = match[0];
+                    matchMap[idx]=val;
+                  }
+
+                  let formattedString = '';
+                  for(let i =0; i < str.length; i++){
+                    let c = str[i];
+                    if(matchMap[i]){
+                      formattedString += `<span class='highlighted'>${matchMap[i]}</span>`;
+                      i += matchMap[i].length-1;
+                    } else {
+                      formattedString += c;
+                    }
+                  }
+                  output = formattedString;
+                } catch (e) {
+                  return str;
+                }
+              }
+              return output;
+            }
+        },
+        components: {
+            StyledTextarea,
+        }
+    }
+</script>
+
+<style lang="less">
+  table {
+    width: 100%;
+    margin-left: 10%;
+  }
+  th {
+    padding-top: 15px;
+    text-align: left;
+  }
+  .highlighted { 
+    background-color: rgb(76, 175, 80);
+    margin: 0px 1px;
+    color: black;
+  }
+</style>