使用 jquery 将某些内容附加到选定的文本答案

【问题标题】：Append something to selected text with jquery使用 jquery 将某些内容附加到选定的文本
【发布时间】：2012-03-06 14:34:13
【问题描述】：

当用户右键单击它时，我正在尝试将<a> 标记附加到选定的文本中。我搜索了堆栈，没有找到匹配项。

【问题讨论】：

标签： jquery append right-click selectedtext

【解决方案1】：

可靠地处理选定的文本跨浏览器有点棘手。 Tim Down 的库Rangy 在那里很有用，他对许多浏览器特性进行了平滑处理。（即使您不想使用该库，也可以学习它的技术。）

其中一个core Rangy demos 使用the RangyRange#surroundContents method 用一个元素包围选定的文本。演示中的代码如下所示：

function getFirstRange() {
    var sel = rangy.getSelection();
    return sel.rangeCount ? sel.getRangeAt(0) : null;
}
function surroundRange() {
    var range = getFirstRange();
    if (range) {
        var el = document.createElement("span");
        el.style.backgroundColor = "pink";
        try {
            range.surroundContents(el);
        } catch(ex) {
            if ((ex instanceof rangy.RangeException || Object.prototype.toString.call(ex) == "[object RangeException]") && ex.code == 1) {
                alert("Unable to surround range because range partially selects a non-text node. See DOM Level 2 Range spec for more information.\n\n" + ex);
            } else {
                alert("Unexpected errror: " + ex);
            }
        }
    }
}

您会做很多相同的事情，但使用 a 而不是 span。

【讨论】：

干得好，但是没有插件有什么解决方案吗？
@bizzare：正如我上面所说，如果您不想按原样使用 Rangy，您仍然可以研究 Rangy 是如何做到的并应用这些技术。看看getSelection 和surroundContents 是如何工作的。这是 Tim 制作 Rangy open source 的喜悦，而不是混淆它。

【解决方案2】：

EDIT注意到您谈论选定的文本有点太晚了。

也许您可以查看document.elementFromPoint，我认为仅在 FireFox 中支持。

你在寻找这样的东西吗：

HTML：

<div id="rightclick">
Right Click me:   
</div>

Javascript：

$("#rightclick").mousedown(function(e) {
    if (e.which === 3) {
        $(this).append("<a href='http://www.google.com'>Link</a>");
    }
});

查看演示： http://jsfiddle.net/BgW7x/2/

【讨论】：

OP 说 selected 文本（在问题和标签中）
哦，他的意思是在右键单击时获取选定的文本，哦，男孩，我很抱歉扫描问题太快了。
是的，我希望所选文本您的代码在 div 末尾附加一个链接
这不是他想要的。