title: How to highlight an editable word in dynamically generated text?
body: <h3>Intro</h3>
  <p>I am creating a content editor in which I want to add the functionality to choose a word which you would like to be highlighted while typing your content.</p>
  <p>At this moment I achieved to search any word chosen in the <code>#dynamicWord</code> and then typed in #contentAreaContainer and give it a red border by adding <em>em</em> around the keyword and style the <em>em</em> trough CSS:</p>
  <h3>Part of the Code:</h3>
  <pre><code>&lt;div class=&quot;word&quot;&gt;
        Dynamic word to highlight: &lt;input name=&quot;dynamic_word&quot; id=&quot;dynamicWord&quot; value=&quot;Enter word..&quot;&gt;
  &lt;/div&gt;
  
  &lt;div id=&quot;contentAreaContainer&quot; oninput=&quot;highlighter()&quot;&gt;
      &lt;textarea id=&quot;contentArea&quot;&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  </code></pre>
  <hr />
  <pre><code>function highlighter()
  {
  var contentAreaContainer = document.getElementById('contentAreaContainer');
  var dynamicWord = document.getElementById('dynamicWord').value;
  wrapWord(contentAreaContainer, dynamicWord);
  };
  </code></pre>
  <p>wrapWord() does:</p>
  <pre><code>function wrapWord(el, word)
  {
  var expr = new RegExp(word, &quot;i&quot;);
  var nodes = [].slice.call(el.childNodes, 0);
  for (var i = 0; i &lt; nodes.length; i++)
  {
      var node = nodes[i];
      if (node.nodeType == 3) // textNode
      {
          var matches = node.nodeValue.match(expr);
          if (matches)
          {
              var parts = node.nodeValue.split(expr);
              for (var n = 0; n &lt; parts.length; n++)
              {
                  if (n)
                  {
                      var em = el.insertBefore(document.createElement(&quot;em&quot;), node);
                      em.appendChild(document.createTextNode(matches[n - 1]));
                  }
                  if (parts[n])
                  {
                      el.insertBefore(document.createTextNode(parts[n]), node);
                  }
              }
              el.removeChild(node);
          }
      }
      else
      {
          wrapWord(node, word);
      }
    }
  }
  </code></pre>
  <hr />
  <pre><code>em{border: 1px solid red;}
  </code></pre>
  <h3>The problem:</h3>
  <p>Now at this moment every time on input in #contentAreaContainer the keyword chosen is highlighted a short period in the #contentAreaContainer, because <code>highlighter()</code> is triggered on input. But it should stay highlighted after finding it instead of only oninput.</p>
  <ol>
  <li>I need oninput to search for the #dynamicWord value with <code>wrapWord()</code> while some one is typing;</li>
  <li>Any time the #dynamicWord value was found it should permanently get an <em>em</em></li>
  </ol>
  <p>So how can I sort of 'save' the found keywords and permanently give them the  element until the dynamic keyword gets edited?</p>
  <p>Check the <strong><a href="http://dynamicword.voogd-wd.nl/" rel="nofollow noreferrer">DEMO version</a></strong></p>
  <h3>Solved:</h3>
  <p>Using <code>setTimeout()</code> instead of oninput I managed to make the highlight look constant. The change:</p>
  <pre><code>function highlighter()
  {
  var contentAreaContainer = document.getElementById('contentAreaContainer');
  var mainKeyword = document.getElementById('main_keyword').value;
  wrapWord(contentAreaContainer, mainKeyword);
  repeater = setTimeout(highlighter, 0.1);
  }
  highlighter();
  </code></pre>
  <p>I removed <code>oninput=&quot;highlighter()&quot;</code> from <code>#contentAreaContainer</code>.</p>