title: bold portion of text selected with the mouse using javascript and css
body: <p>I'm trying to use javascript &amp; css to create a little tool that will allow the user to select an area of text(whole word, part of a word, single character) with the mouse and then click a button that will then bold that selection.</p>
  
  <p>I have 2 pieces working: I can bold the whole area, and I can write the mouse selection to the console.</p>
  
  <p>But I can't figure out how to only bold the portion of text that was selected with the mouse.</p>
  
  <p>I have a jsfiddle here:
  <a href="http://jsfiddle.net/75EwZ/4/" rel="nofollow">http://jsfiddle.net/75EwZ/4/</a></p>
  
  <p>Here's the code:</p>
  
  <pre><code>$(".boldtrigger").click(function() {
      var selection = getSelText();
      console.log('selected value', selection);
      //only bold text that is selected
      //get contents of .text
      //replace selected section with &lt;span class="selectedText"&gt;&lt;/span&gt;
      //ex:  user selects the word "the" with the mouse:
      //&lt;div class="text"&gt;Testing the waters&lt;/div&gt; becomes:
      //&lt;div class="text"&gt;Testing &lt;span class="selectedText"&gt;the&lt;/span&gt; waters&lt;/div&gt;
      //then bold contents of .selectedText
      $(".text").toggleClass("bold");
  });
  
  function getSelText()
  {
      var txt = '';
      if (window.getSelection)
        { txt = window.getSelection(); }
        else if (document.getSelection)
        { txt = document.getSelection(); }
        else if (document.selection)
       { txt = document.selection.createRange().text; }
       else return;
       return txt;
  }
  </code></pre>
  
  <p>thanks!</p>