How to mimic JS ranges/selections with divs as backgrounds?

I need to mimic ranges/selections (those that highlight content on a website, and when you press for ex CTRL + C you copy the content) with divs as backgrounds. Chances are that the "highlighting divs开发者_开发问答" will be position:absolute;

<div id="highlight">
   <!-- The highlightor divs would go here -->
</div>
<div id="edit">
   <!-- The divs to be highlighted (that have text) would go here -->
</div>

Edit: Functionalities such as copying are essential.

PS: If you're curious about "why", refer to this question. I created a new question because I felt the old one was pretty much answered, and this one differed to much from that one.

---

Here's the concept, with some code to get you started. Every time text is selected in the page, append that text to a hidden textarea on the page and then select the textarea. Then, wrap the original selection in a span to make it look selected. This way, you have the appearance of a selection, and since the hidden textarea is actually selected, when the user hits "ctrl+c" they are copying the text from the textarea.

To get the full functionality you are looking for, you'll probably want to extend this. Sniff keys for "ctrl+a" (for select all). I don't think you'll be able to override right-click behavior... at least not easily or elegantly. But this much is at least a proof of concept for you to run with.

window.onload = init;
function init()
{
    document.getElementById("hidden").value = "";
    document.body.ondblclick = interceptSelection;
    document.body.onmouseup = interceptSelection;
}
function interceptSelection(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement;
    var hidden = document.getElementById("hidden");
    if (target == hidden) return;
    var range, text;
    if (window.getSelection)
    {
        var sel = getSelection();
        if (sel.rangeCount == 0) return;
        range = getSelection().getRangeAt(0);
    }
    else if (document.selection && document.selection.createRange)
    {
        range = document.selection.createRange();
    }
    text = "text" in range ? range.text : range.toString();
    if (text)
    {
        if (range.surroundContents)
        {
            var span = document.createElement("span");
            span.className = "selection";
            range.surroundContents(span);
        }
        else if (range.pasteHTML)
        {
            range.pasteHTML("<span class=\"selection\">" + text + "</span>")
        }
        hidden.value += text;
    }
    hidden.select();
}

Here's the css I used in my test to hide the textarea and style the selected text:

#hidden
{
    position: fixed;
    top: -100%;
}
.selection
{
    background-color: Highlight;
    color: HighlightText;
}