title: Make selected text bold/unbold
body: <p>I'm wrapping the selected text in span tags, when you click a button. If I then select a different piece of text and click the button, that text also gets wrapped in tags. However, when I select a piece of text that's already wrapped in span tags, I'd like to remove those tags to unembolden the text, instead of wrapping those tags in more tags.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div contenteditable="true" class="textEditor"&gt;Some random text.&lt;/div&gt;
  
  &lt;a href="#" class="embolden"&gt;Bold&lt;/a&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$('.embolden').click(function(){
      var highlight = window.getSelection();  
      var span = '&lt;span class="bold"&gt;' + highlight + '&lt;/span&gt;';
      var text = $('.textEditor').html();
      $('.textEditor').html(text.replace(highlight, span));
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/XCb95/" rel="noreferrer">JSFiddle Demo</a></p>
  
  <p>I'm probably getting greedy with this request but I select just part of a piece of text that's already wrapped in span tags, but not all of it, I'd like to close the original tag at the start of the selection, open a new tag right after that, then close the new tag at the end of the selection and open a new tag after that.</p>