title: Create a Search box to find text on page
body: <p>I'm trying to create a search box  using only html, css and javascript that will search my page for text, if matching text is found, the function should highlight the text inside of a span.</p>
  
  <p>I searched around the web(and stackoverflow) and I was unable to find an answer relevant to my needs)</p>
  
  <p>I have an idea of what to do but i get stuck at a certain point. heres what my code looks like so far. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  function init(){
      //creates a variable equal to the value entered in the text box
      var lookfor = document.getElementById("q").value
      //splits the whole page into an array or words
      var words = document.body.innerHTML.split(" ");
      ///loops through the array to get each word
      for( var i=0; i&lt;words.length; i++){
  
      }   
      //This is where I get lost, i dont know how to make it so that what you enter
      //in the textbox(lookfor) matches somthing on the page. it will get highlighted. i
      //was thinking about using the find object, but im new to javascript and dont know 
      //how to properly use find yet.
      if(lookfor == words[i]) //Find()------
      { 
          '&lt;span class="highlight"&gt;' + words + '&lt;/span&gt;'
      }
      else{
          alert("Sorry, your search returned no results! Please Try again.")
      }
  
  }
  </code></pre>