title: Wrap each word of a html content in a span
body: <p>I'm not able to wrap each word of a html content with a span, keeping other markup as well.</p>
  
  <p>For example,If my code sample is </p>
  
  <p><code>&lt;p&gt;&lt;b&gt;Lorem ipsum dolor sit amet&lt;/b&gt;&lt;br/&gt; &lt;a href="#"&gt;consectetur&lt;/a&gt; adipiscing elit. Nam nec scelerisque nisl, vitae mattis diam. Proin fermentum lorem in interdum porttitor.&lt;/p&gt;</code></p>
  
  <p>What I'm trying to do is (code which retains other elements as well)</p>
  
  <pre><code>&lt;p&gt;&lt;b&gt;&lt;span class="sc"&gt;Lorem&lt;/span&gt; &lt;span class="sc"&gt;ipsum&lt;/span&gt; &lt;span class="sc"&gt;dolor&lt;/span&gt; &lt;span class="sc"&gt;sit&lt;/span&gt;&lt;/b&gt;&lt;br/&gt; &lt;span class="sc"&gt;amet&lt;/span&gt; &lt;a hre=""&gt;&lt;span class="sc"&gt;consectetur&lt;/span&gt;&lt;/a&gt; &lt;span class="sc"&gt;adipiscing&lt;/span&gt; &lt;span class="sc"&gt;elit.&lt;/span&gt; &lt;span class="sc"&gt;Nam&lt;/span&gt; &lt;span class="sc"&gt;nec&lt;/span&gt; &lt;span class="sc"&gt;scelerisque&lt;/span&gt; &lt;span class="sc"&gt;nisl,&lt;/span&gt; &lt;span class="sc"&gt;vitae&lt;/span&gt; &lt;span class="sc"&gt;mattis&lt;/span&gt; &lt;span class="sc"&gt;diam.&lt;/span&gt; &lt;span class="sc"&gt;Proin&lt;/span&gt; &lt;span class="sc"&gt;fermentum&lt;/span&gt; &lt;span class="sc"&gt;lorem&lt;/span&gt; &lt;span class="sc"&gt;in&lt;/span&gt; &lt;span class="sc"&gt;interdum&lt;/span&gt; &lt;span class="sc"&gt;porttitor.&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>What I'm getting out of below Js code is</p>
  
  <pre><code>    &lt;p&gt;&lt;span class="sc"&gt;Lorem&lt;/span&gt; &lt;span class="sc"&gt;ipsum&lt;/span&gt; &lt;span class="sc"&gt;dolor&lt;/span&gt; &lt;span class="sc"&gt;sit&lt;/span&gt; &lt;span class="sc"&gt;amet&lt;/span&gt; &lt;span class="sc"&gt;consectetur&lt;/span&gt; &lt;span class="sc"&gt;adipiscing&lt;/span&gt; &lt;span class="sc"&gt;elit.&lt;/span&gt; &lt;span class="sc"&gt;Nam&lt;/span&gt; &lt;span class="sc"&gt;nec&lt;/span&gt; &lt;span class="sc"&gt;scelerisque&lt;/span&gt; &lt;span class="sc"&gt;nisl,&lt;/span&gt; &lt;span class="sc"&gt;vitae&lt;/span&gt; &lt;span class="sc"&gt;mattis&lt;/span&gt; &lt;span class="sc"&gt;diam.&lt;/span&gt; &lt;span class="sc"&gt;Proin&lt;/span&gt; &lt;span class="sc"&gt;fermentum&lt;/span&gt; &lt;span class="sc"&gt;lorem&lt;/span&gt; &lt;span class="sc"&gt;in&lt;/span&gt; &lt;span class="sc"&gt;interdum&lt;/span&gt; &lt;span class="sc"&gt;porttitor.&lt;/span&gt;&lt;/p&gt;
  </code></pre>
  
  <p>As you can see I'm loosing the <code>&lt;b&gt;&lt;/b&gt;, &lt;br/&gt; &lt;a/&gt;</code> tag markups in my output.</p>
  
  <p>My Javacript code,</p>
  
  <pre><code>var articleContent = "";
  var totalWords = 0;
  $("#content").find('p').each(function(){
      var text = $(this).text().split(' ');
      for( var i = 0, len = text.length; i&lt;len; i++ ) {
          text[i] = '&lt;span class="sc"&gt;'+text[i]+'&lt;/span&gt;'; 
      }
      totalWords = totalWords + i;            
      articleContent = articleContent + "&lt;p&gt;"+text.join(' ')+"&lt;/p&gt;";
  });//End of each ,
  console.log(articleContent);
  </code></pre>
  
  <p>Here is the fiddle for the same <a href="http://jsfiddle.net/balarajv/0oqasa8z/" rel="nofollow">JSfiddle</a></p>
  
  <p>How to wrap each word in a span keeping other markup as well ?</p>
  
  <p>We can assume that my HTML code my contain only <code>&lt;b&gt; &lt;/br&gt; &lt;a&gt;</code> as other elements.</p>