Insert results as textContent instead of innerHtml

Fixes #7

README.md

@@ -9,10 +9,10 @@ Since some Stable Diffusion models were trained using this information, for exam
 
 I created this script as a convenience tool since it reduces the need of switching back and forth between the web UI and a booru site to copy-paste tags.
 
-You can either download the files manually as described below, or use a pre-packaged version from [Releases](https://github.com/DominikDoom/a1111-sd-webui-tagcomplete/releases).
+You can either clone / download the files manually as described [below](#installation), or use a pre-packaged version from [Releases](https://github.com/DominikDoom/a1111-sd-webui-tagcomplete/releases).
 
 ### NEW - Wildcard support
-Autocompletion also works with wildcard files used by [this script](https://github.com/jtkelm2/stable-diffusion-webui-1/blob/master/scripts/wildcards.py) of the same name (demo video further down). This enables you to either insert categories to be replaced by the script, or event replace them with the actual wildcard file content in the same step.
+Autocompletion also works with wildcard files used by [this script](https://github.com/jtkelm2/stable-diffusion-webui-1/blob/master/scripts/wildcards.py) of the same name (demo video further down). This enables you to either insert categories to be replaced by the script, or even replace them with the actual wildcard file content in the same step.
 #### Important:
 Since not everyone has the script, it is **disabled by default**. Edit the config to enable it and uncomment / add the filenames you use in `wildcardNames.txt`.
 As per the instructions of the wildcard script, the files are expected in `/scripts/wildcards/`, it will likely fail if you have another folder structure.
@@ -39,9 +39,13 @@ Dark and Light mode supported, including tag colors:
 
 
 ## Installation
-Simply put `tagAutocomplete.js` into the `javascript` folder of your web UI installation. It will run automatically the next time the web UI is started.
+Simply put `tagAutocomplete.js` into the **`javascript`** folder of your web UI installation (**NOT** the `scripts` folder where most other scripts are installed). It will run automatically the next time the web UI is started.
 For the script to work, you also need to download the `tags` folder from this repo and paste it and its contents into the web UI root, or create them there manually.
 
+The folder structure should look similar to this at the end:
+
+![image](https://user-images.githubusercontent.com/34448969/195697260-526a1ab8-4a63-4b8b-a9bf-ae0f3eef780f.png)
+
 The tags folder contains `config.json` and the tag data the script uses for autocompletion. By default, Danbooru and e621 tags are included.
 
 ### Config

tagAutocomplete.js

@@ -188,6 +188,10 @@ function hideResults(textArea) {
     selectedTag = null;
 }
 
+function escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}
+
 let hideBlocked = false;
 // On click, insert the tag into the prompt textbox with respect to the cursor position
 function insertTextAtCursor(textArea, result, tagword) {
@@ -206,7 +210,13 @@ function insertTextAtCursor(textArea, result, tagword) {
         sanitizedText = acConfig.replaceUnderscores ? text.replaceAll("_", " ") : text;
     }
 
-    sanitizedText = acConfig.escapeParentheses ? sanitizedText.replaceAll("(", "\\(").replaceAll(")", "\\)") : sanitizedText;
+    if (acConfig.escapeParentheses) {
+        sanitizedText = sanitizedText
+        .replaceAll("(", "\\(")
+        .replaceAll(")", "\\)")
+        .replaceAll("[", "\\[")
+        .replaceAll("]", "\\]");
+    }
 
     var prompt = textArea.value;
 
@@ -215,12 +225,12 @@ function insertTextAtCursor(textArea, result, tagword) {
     let editStart = Math.max(cursorPos - tagword.length, 0);
     let editEnd = Math.min(cursorPos + tagword.length, prompt.length);
     let surrounding = prompt.substring(editStart, editEnd);
-    let match = surrounding.match(new RegExp(`${tagword}`));
+    let match = surrounding.match(new RegExp(escapeRegExp(`${tagword}`)));
     let afterInsertCursorPos = editStart + match.index + sanitizedText.length;
 
     var optionalComma = "";
     if (tagType !== "wildcardFile") {
-        optionalComma = surrounding.match(new RegExp(`${tagword},`)) !== null ? "" : ", ";
+        optionalComma = surrounding.match(new RegExp(escapeRegExp(`${tagword},`))) !== null ? "" : ", ";
     }
 
     // Replace partial tag word with new text, add comma if needed
@@ -265,7 +275,7 @@ function addResultsToList(textArea, results, tagword) {
     for (let i = 0; i < results.length; i++) {
         let result = results[i];
         let li = document.createElement("li");
-        li.innerHTML = result[0];
+        li.textContent = result[0];
 
         // Wildcards have no tag type
         if (!result[1].startsWith("wildcard")) {