JavaScript - 如何为所选文本设置标记？ [英] JavaScript - How can i set markers for selected text?

问题描述

我需要突出显示所选文字 JavaScript （没有jQuery）并且控制点或标记（左和右），我真的不知道怎么称呼它们，就像在手机上一样，所以我可以通过拖动任何时间来扩展选择控制点。

I need to highlight a selected text with JavaScript (no jQuery) and having control points or markers (left and right), I don't really know how to call them, similarly like on mobile phones so I can extend the selection anytime by dragging any of the control points.

示例： http：//截屏视频.com / t / KJBdvreeVW

我抓住了所选的文字，演示： http://jsfiddle.net/henrichro/HJ482/

I've grabbed the selected text, demo: 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;

现在我有了这个工作代码来获取文本，但我希望有它周围的标记，如上所述：）

Now I have this working code to get the text, but I would like to have markers around it, as written above :)

2013年10月28日更新：

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

After Dementic's directions (his answer below), I figured out the next working code: http://jsfiddle.net/henrichro/WFLU9/

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

The only problem persists when I select more than one line. On that scenario the markers are showing wrong.

推荐答案

在此处找到了解决方案：如何从window.getSelection（）中包装文本选择.getRangeAt（0 ）带有html标签？

found a solution here : How do I wrap a text selection from window.getSelection().getRangeAt(0) with an html tag?

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

which uses just a bit of Jquery, modified it so its pure js (just removed the selectors and the onclick), you can find a working example here: http://jsfiddle.net/3tvSL/83/

这标志着所选文本带有黄色背景，需要更多工作才能拥有标记 两边。

this marks the selected text with yellow background, and will need a bit more work to have "Markers" on the sides.

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

as for an idea, you can use an absolute positioned div as the marker, and while it is dragged, you can use something like:

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选择整个单词

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

one more thing, i have found a working js library to do exactly what you wish... http://www.mediawiki.org/wiki/Extension:MashaJS take a look :)

这篇关于JavaScript - 如何为所选文本设置标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！