title: replace plain-text with html using jQuery
body: <p>I'm trying to write a replacewith function in jQuery that will replace specific words with html. </p>
  
  <p>Basically I'm trying to replace something like <code>[this]</code> with <code>&lt;span class='myclass'&gt;</code> as the document is loaded. I've looked around for a couple samples but the couple things I saw I was unable to get to work. I'm still learning jQuery so I'm hoping someone could give me a couple suggestions as what to try.</p>
  
  <p>Thanks in advance, Steven.</p>
  
  <p>HTML/text:</p>
  
  <pre><code>[this]hello world![/this]​
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(document).ready(function() {    
       // Using just replace
       $("body").text().replace(/[this]/g,'&lt;b&gt;')
  });​
  </code></pre>
  
  <p>--EDIT--</p>
  
  <p>I've made a few changes to the function using Nir's demo below.
  Heres a few more details about what I'm doing. I'm trying to make an inline fraction, which I already have the the appropriate classes and whatnot made. It works well when in html, but when I run the jQuery function It doesn't seem to work.</p>
  
  <p>It's obvious the tags are replaced, but my css doesnt really seem to be working as I mentioned.</p>
  
  <p>Heres a link to the HTML <a href="http://stevenschemers.com/Fraction.htm" rel="noreferrer">HERE</a></p>
  
  <p>and heres a link to the jsfiddle <a href="http://jsfiddle.net/stevenschemers/juTtG/30/" rel="noreferrer">HERE</a></p>
  
  <pre><code>$(document).ready(function() {    
  
  // Using just replace
  var text = $('body').text();
  $("body").html(text.replace(/\[math\]/g,'&lt;span class="container"&gt;').replace(/\[\/math\]/g,'&lt;/span&gt;'));
  
  var textt = $('body').text();
  $("body").html(textt.replace(/\[top\]/g,'&lt;div class="containme"&gt;').replace(/\[\/top\]/g,'&lt;/div&gt;'));
  
  var textl = $('body').text();
  $("body").html(textl.replace(/\[line\]/g,'&lt;div class="borderme"&gt;&amp;nbsp;&lt;/div&gt;'));
  
  var textb = $('body').text();
  $("body").html(textb.replace(/\[bot\]/g,'&lt;div class="containme2"&gt;').replace(/\[\/bot\]/g,'&lt;/div&gt;'));
   });​
  </code></pre>
  
  <p>This HTML </p>
  
  <pre><code> &lt;span class="readme"&gt;Whats up, here's a fraction.&amp;nbsp;
  &lt;span class="container"&gt;
      &lt;div class="containme"&gt;1&lt;/div&gt;
      &lt;div class="borderme"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div class="containme2"&gt;2&lt;/div&gt;
      &lt;/span&gt;
   &amp;nbsp;&amp;nbsp;Hello? Whats up, here's a fraction.&amp;nbsp;
      &lt;span class="container"&gt;
      &lt;div class="containme"&gt;1&lt;/div&gt;
      &lt;div class="borderme"&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div class="containme2"&gt;2&lt;/div&gt;
    &lt;/span&gt;
    &amp;nbsp;&amp;nbsp;Hello? Whats up, here's a fraction.&amp;nbsp;
    &lt;/span&gt;
  </code></pre>
  
  <p>to this shortend markup</p>
  
  <pre><code>&lt;span class="readme"&gt; Whats up, here's a fraction. [math][top]1[/top][line][bot]2[/bot][/math] &lt;/span&gt;
  </code></pre>