I would like to introduce you to the “Range” object in your browser. document.createRange() allows you to select a range of text ( even between elements, and it very well might be the basis for how the mouse is able to select text in a browser, or how chrome and firefox highlight search terms in the browser window.
Even though Range(s) seem to be used for visual elements, you can use them for less visual manipulation of the text in the page. I have also noticed that by using the range object, you can manipulate these objects much faster than you would otherwise through some other functions like ELEMENT.innerHTML() for instance.
I am still hacking on the RANGE object, but for now it’s promising. Later I will provide an update for a few tricks to use the RANGE object as I have had a few problems with the documentation. Firefox, and Chrome ( WebKit ) seem to work a bit differently, but for the most part are the same. Fortunately I am working on browser plugins at the moment so, I don’t have to worry about IE’s limited access to the object.
Here are a few links if you want to get started hacking on the RANGE object.