title: Is there something better than document.execCommand?
body: <p>When implementing a web-based rich-text editor, I read that <code>document.execCommand</code> is useful for performing operations on an HTML document (like making a selection bold). However, I need something a bit better. Specifically, I need to know exactly what text is added or removed from the innerHTML, and in what location (as an offset into the entire document's HTML representation).</p>
  
  <p>I considered using the built in document.execCommand along side DOM4's mutation observer, but execCommand doesn't seem up to the task:</p>
  
  <ul>
  <li>I don't see a way to "un-bold" a selection</li>
  <li>the generated html seems to vary from browser to browser. (I'd like &lt; span > tags not &lt; b >, but consistency is more important)</li>
  <li>and there's no information on what it does to handle redundantly nested/adjacent &lt; span > tags. </li>
  </ul>
  
  <p>Also, using mutation observer seems a bit overkill based on my needs.</p>
  
  <p>My motivation: I'm trying to transmit document changes to the server periodically without re-transmitting the whole document. I'm sending the data as a collection of insertions and deletions upon the HTML representation. If someone knows a way to get this functionality out of, say, CKEditor (so I don't have to start from scratch), then I would love you forever.</p>
  
  <p>Note: Performing a text diff is not an option, due to its poor performance on very large documents.</p>
  
  <p>Otherwise, I'm not exactly afraid of trying to write something that does this. The methods provided by the DOM's range object would handle a lot of the heavy lifting. I'd also appreciate advice regarding this possibility.</p>