feat: add remove option field to playground (#445)

* feat: added `remove` field with regex parsing

* feat: added placeholder for `remove` field

* feat: fold advanced options under a <details> disclosure

Author: screensaversclub

index.html

@@ -13,14 +13,11 @@
 				<input type="text" id="input" placeholder="An Apple computer" autofocus>
 			</fieldset>
 
-
-
 			<fieldset>
 				<label for="replacement">Replacement character</label>
 				<input type="text" id="replacement" name="replacement" placeholder="-">
 			</fieldset>
 
-
 			<fieldset>
 			<label>
 				<input type="checkbox" name="lowercase" checked> Lowercase
@@ -39,6 +36,17 @@
 			</label>
 			</fieldset>
 
+			<details>
+				<summary><h4>Advanced options</h4></summary>
+			 <fieldset style="display: flex; justify-content: flex-start; align-items: center">
+        <label for="remove">Remove chars (regex)</label>&nbsp;
+        /<input type="text" id="remove" name="remove" placeholder="(?<= )((a)|(an)|(the))(?= )" />/<br />
+        <label> <input type="checkbox" name="regex_g" /> g </label>
+
+        <label> <input type="checkbox" name="regex_i" /> i </label>
+      </fieldset>
+			</details>
+
       <input type="submit" value="Slug it">
 
     </form>

playground.js

@@ -14,12 +14,21 @@ form.addEventListener('submit', function (e) {
   const trim = fd.get('trim')
   const fallback = fd.get('fallback')
 
+  const remove = fd.get('remove')
+  const regexG = fd.get('regex_g') === null ? '' : 'g'
+  const regexI = fd.get('regex_i') === null ? '' : 'i'
+
   const opts = {}
 
   if (replacement.length > 0) {
     opts.replacement = replacement
   }
 
+  if (remove !== null && remove.length > 0) {
+    const regex = new RegExp(`/${remove}/${regexG}${regexI}`)
+    opts.remove = regex
+  }
+
   opts.lower = lowercase !== null
 
   opts.trim = trim !== null