3

我需要使用JavaScript（没有 jQuery）和具有或（左右）highlight的选定文本，我真的不知道如何调用它们，就像在手机上一样，所以我可以通过拖动任何控件随时扩展选择点。control pointsmarkers

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

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

4

1 回答 1

2

在这里找到了一个解决方案：如何使用 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 看看 :)

于 2013-10-27T21:58:07.420 回答