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

Question

我需要使用 JavaScript(无 jQuery)和 控制点 或 标记 突出显示选定的文本(左和右)，我真的不知道如何调用它们，就像在手机上一样，所以我可以随时通过拖动任何控制点来扩展选择。

示例: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/

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

Answer 1

在这里找到了解决方案:How do I wrap a text selection from window.getSelection().getRangeAt(0) with an html tag?

它只使用了一点 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);
    }
}

取自:Select whole word with getSelection

还有一点，我找到了一个可以正常工作的 js 库来做你想做的事...... http://www.mediawiki.org/wiki/Extension:MashaJS看看:)