title: Using RegEx and Quill JS to make a set of banned words bold?
body: <p>I'm trying to create a simple page where when you submit text to the server it checks against a list of banned words, and any found are made bold. Since textarea can't have formatting I'd decided to use Quill JS for the rich text area. Because of the index property on Quills insertText function it finds the banned words then inserts them in the wrong place. Is there a way to have the words replaced where they should be? </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Syntax Highlighting&lt;/title&gt;
  &lt;!-- Main Quill library --&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.quilljs.com/1.3.6/quill.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"&gt;
  
  &lt;style&gt; #editor-container { height: 130px; } &lt;/style&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
      &lt;div id="form-container" class="container"&gt;
          &lt;form name="badwords" method="post" action="" &gt;
              &lt;div class="row form-group"&gt;
                &lt;label for="about"&gt;Appraisal Info&lt;/label&gt;
                &lt;input name="about" type="hidden"&gt;
  
                &lt;div id="editor-container"&gt;
  
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;button class="btn btn-primary" id="formSub" type="submit"&gt;Submit!&lt;/button&gt;
            &lt;/div&gt;    
          &lt;/form&gt;
      &lt;/div&gt;
   &lt;/body&gt;
  
   &lt;script src="U:\Code Examples\Highlighting\parch.js"&gt;&lt;/script&gt;
   &lt;link href="U:\Code Examples\Highlighting\style.css" rel="stylesheet"&gt;
   &lt;script type="text/javascript"&gt;
  var div = document.getElementById('formSub'); 
  
  function replaceWords(event) {
      //Prevent form submission to server 
      event.preventDefault();
      var commentContent = quill.getText();
      var badWords = ["green", "red", "blue"];
      console.log(commentContent)
      commentContent =censore(commentContent, badWords);
  }   
  
  function censore(string, filters) {
      console.log('in')
      // "i" is to ignore case and "g" for global "|" for OR match
      var regex = new RegExp(filters.join("|"), "gi");
      return string.replace(regex, function (match) {
          //replace 
          var clean = match;
          console.log(clean);
          return quill.insertText(0, clean, 'bold', true);
      });
  }
  div.addEventListener('click',replaceWords); 
  &lt;/script&gt;
   &lt;/html&gt;
  </code></pre>