title: .wrap() a word from an array within an element
body: <p>I'm pulling information from a server via PHP and displaying it within a <code>&lt;pre&gt;</code> tag. My problem is that I'm trying to find a word within a set of text and wrap it with <code>&lt;span style="color:red;"&gt;&lt;/span&gt;</code>.</p>
  
  <p>Here is the code I'm been working with:</p>
  
  <pre><code>var total = $("pre").text().split(' ');
  for (var i = 0; i &lt; total.length; ++i) {
    if (total[i].toUpperCase() == $("#identifiedWord").text().toUpperCase()) {
      console.log("Found " + total[i] + " at " + i);
      // .wrap('&lt;span style="color:red;"&gt;&lt;/span&gt;');
    }
  }
  </code></pre>
  
  <p>I've tried using (in replacement of the commented out code above):</p>
  
  <pre><code>total[i].wrap('&lt;span style="color:red;"&gt;&lt;/span&gt;');
  
  $("pre").text().split(" ")[i].wrap('&lt;span style="color:red;"&gt;&lt;/span&gt;');
  </code></pre>
  
  <p>I've also tried <code>.html()</code> but that obviously didn't work.</p>
  
  <p><a href="http://jsfiddle.net/xhnkc3q8/" rel="nofollow">JSFiddle Demo</a></p>
  
  <p>Halp pls</p>