title: Javascript RegExp search
body: <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;script&gt;
  
  str = "This is an apple and I love it.";
  
  function searching(query){
      var patt = new RegExp(query,"gi");
      var query = "&lt;span style='color: red'&gt;"+query+"&lt;/span&gt;";
      document.getElementById("text").innerHTML = str.replace(patt,query);
      return str = document.getElementById("text").innerHTML;
      }
  
  /*
  patt1 = new RegExp("is","gi");
  patt2 = /\san\s/gi;
  document.write(str.replace(patt2,"&lt;span style='color:red'&gt; are &lt;/span&gt;"));
  */
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="text"&gt;&lt;script&gt;document.write(str)&lt;/script&gt;&lt;/div&gt;
  &lt;form&gt;
  &lt;input type="text" id="querys" value="" onkeyup="searching(this.value)" /&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want after each search the result replaces the original string with the hightlight (red).
  For example,
  For the first time, I search "apple".
  "apple" is highlighted in the string.
  Return the string in the div with the red highlight.
  For the second time, I search "is"
  "is" is highlighted with red in the string.</p>
  
  <p>I tried to use innerHTML but innerHTML will also return the inline CSS style tags.</p>