JavaScript - 如何为选定的文本设置标记？

我需要highlight选定的文本JavaScript（没有 jQuery）并且有control points or markers（左和右），我真的不知道如何称呼它们，就像在手机上一样，所以我可以随时通过拖动任何控制点来扩展选择。

例子：http://screencast.com/t/KJBdvreeVW

我已经抓住了选定的文本，演示：http://jsfiddle.net/henrichro/HJ482/

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    alert(text);
}

if (window.Event) document.captureEvents(Event.MOUSEUP);
document.onmouseup = getSelectionText;

现在我有这个工作代码来获取文本，但我想在它周围有标记，如上面所写:)

2013 年 10 月 28 日更新：

在 Dementic 的指导（他的回答如下）之后，我想出了下一个工作代码：http://jsfiddle.net/henrichro/WFLU9/

当我选择时唯一的问题仍然存在多于一行。在这种情况下，标记显示错误。

在这里找到了解决方案：如何使用 html 标签包装 window.getSelection().getRangeAt(0) 中的文本选择？

它只使用了一点Jquery，将其修改为纯js（只是删除了选择器和onclick），您可以在这里找到一个工作示例：http://jsfiddle.net/3tvSL/83/

这会将选定的文本标记为黄色背景，并且需要更多的工作才能在两侧添加“标记”。

至于想法，你可以使用绝对定位的div作为标记， 当它被拖动时，你可以使用类似的东西：

function expand(range) {
    if (range.collapsed) {
        return;
    }

    while (range.toString()[0].match(/\w/)) {
        range.setStart(range.startContainer, range.startOffset - 1);   
    }

    while (range.toString()[range.toString().length - 1].match(/\w/)) {
        range.setEnd(range.endContainer, range.endOffset + 1);
    }
}

取自：使用 getSelection 选择整个单词

还有一件事， 我找到了一个有效的 js 库来完成你想要的事情......http://www.mediawiki.org/wiki/Extension:MashaJS看一看 ：）