4

这个问题指的是一个类似的问题，这里询问如何将标签应用于选定的文本。该问题已得到回答，但该答案有一个主要缺陷，即如果所选文本存在于文档的其他地方，则<span>环绕副本，而不是有问题的文本。

我意识到这可能违反了一些 stackoverflow 协议，但我在这里发帖时没有关于如何继续的真正线索。我最好的猜测是以某种方式找到所选文本之前的字符串长度（沿着这些线），但是如何将其合并到替换函数本身......好吧我可以使用推送。任何人？

（我已将解决方案粘贴到下面的上一篇文章（由mathias-bynens 撰写）。）

    $("p").live("mouseup",function() {
    selection = getSelectedText();
    if(selection.length >= 3) {
        var spn = '<span class="selected">' + selection + '</span>';
        $(this).text($(this).html().replace(selection, spn));

    }
});

//Grab selected text
function getSelectedText(){
    if(window.getSelection){
        return window.getSelection().toString();
    }
    else if(document.getSelection){
        return document.getSelection();
    }
    else if(document.selection){
        return document.selection.createRange().text;
    }
}
4

3 回答 3

4

我作弊了，用 document.execCommand 包裹选中的文本，然后用 href（CreateLink execCommand 的第三个参数）找到元素，用我想要的包裹它，然后删除链接：

$("p").live("mouseup",function() {
    document.execCommand('CreateLink', false, 'uniqueid');
    var sel = $('a[href="uniqueid"]');
    sel.wrap('<span class="selected" />')
    sel.contents().unwrap();
});

所有主要浏览器都支持 document.execCommand，因此您应该安全地以这种方式破解它。在我测试过的浏览器中，浏览器本身会为您关闭和打开标签，因此如果您从一个 html 标签的中间选择另一个 html 标签的中间，它应该正确嵌套标签。

于 2013-02-23T08:14:52.810 回答
0

我认为您的关键是弄清楚 getSelection 返回并使用它。

在 Firefox 上，我能够做到这一点：

$(document.getSelection().anchorNode).wrap('<div style="color:blue">')

document.selection.createRange() 必须有一个类似的东西，可以让你找到被选中的东西。

所以像：

$("p").live("mouseup",function() {
    var $sel = getSelectedElem();
    if($.trim($sel.text()).length >= 3) {
        $sel.warp('<span class="selected">');
    }
});

//Grab selected text
function getSelectedElem(){
    if(window.getSelection){
        return $(window.getSelection().anchorNode);
    }
    else if(document.getSelection){
        return $(document.getSelection().anchorNode)
    }
    else if(document.selection){
        //todo figure out what to return here:
        return document.selection.createRange().text;
    }
    return $([]);
}
于 2012-05-15T21:50:00.750 回答
0

那这个呢？

document.execCommand("insertHTML", false, "<span class='own-class'>"+ document.getSelection()+"</span>");

来源YeppThat'sMe _

于 2014-12-12T06:27:34.680 回答