title: jQuery select text and add span to it in an paragraph
body: <p>I have a function that gets the selected text, the text is selected by mouse, and add it into a variable. I want to add  tags around that variable in the selected text - in that paragraph.</p>
  
  <pre><code>$("p").live("mouseup",function() {
      selection = getSelectedText();
      if(selection.length &gt;= 3) {
          var $spn = $("&lt;span&gt;&lt;/span&gt;").html(selection).addClass("selected");
          $("p").wrap($spn);
      }
  });
  
  //Grab selected text
  function getSelectedText(){
      if(window.getSelection){
          return window.getSelection().toString();
      }
      else if(document.getSelection){
          return document.getSelection();
      }
      else if(document.selection){
          return document.selection.createRange().text;
      }
  }
  </code></pre>
  
  <p>I can get the text selection variable but instead of placing the <code>&lt;span&gt;&lt;/span&gt;</code> around the selected text from the paragraph <code>&lt;p&gt;</code>, my function wraps this outside.</p>
  
  <p>How can I replace it in the paragraph?
  Thank you.</p>