Question

我需要highlight使用 JavaScript （没有jQuery）和control points或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/

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

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 看一看：）

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

1 个答案: