Question

我需要在内容不可编辑的div中获取所选文本的位置（不是textarea，不是rtf编辑器，只是一个简单的div）

我想这样做是为了让用户能够选择文章的部分并“突出显示”，将其包装在具有不同背景的范围中，当然，使用div和/或ps构建文章等，而不是textareas或rtfs

有什么想法吗？

P.S。你也可以使用jQuery：D

P.s.s。我需要选择的位置，而不是选择本身。 Aka：它从索引I开始到索引J.我需要这个，因为在父级中查找文本的常规方法并不总是返回一个唯一的结果，这会很糟糕：）

Answer 1

如果您只想更改所选文本的背景，最简单的方法是使用document.execCommand()。请在此处查看我的回答：Change CSS of selected text using Javascript

Answer 2

//Wrap selected text in span tags with the class 'hl'
//Take some action after (in this case, a simple alert)
$("p").live("mouseup",
    function() {
        selection = getSelectedText(); 
        if(selection.length >= 3) {
            $(this).html($(this).html().replace(selection, $('<\/span>').attr({'class':'hl'}).html(selection).parent().html()) );
            alert(selection);
        }       
    }
); 

//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; 
    } 
}

代码来自此处：http://esbueno.noahstokes.com/post/92274686/highlight-selected-text-with-jquery

Answer 3

您可以通过运行来检查文本是否已被选中：

window.getSelection and document.getSelection() and  document.selection

（因为浏览器可以通过不同方式检查）然后搜索包含此文本的div。

Answer 4

要获得选择的位置，请尝试以下链接：

http://bytes.com/topic/javascript/answers/153164-return-selectionstart-div

Set cursor position on contentEditable <div>

Answer 5

好吧，即使您找到了第2段所述问题的解决方案，我也不会认为您的主要问题的答案已经给出。：）

对象Selection有一个名为anchorOffset的属性，准确地给出了您要求的内容（元素中所选文本的位置）。以上链接将告诉您哪些浏览器支持它，我担心IE＆lt; 9可能不会。

function show_selected()
{
    var sel = selection();
    console.log(sel.anchorOffset + ':' + sel);
}

现在，如果您将show_selected绑定到mouseup，您将看到偏移量和所选文本打印在js控制台上。

fonction selection可能是以下内容，应该是跨浏览器：

function selection()
{
    var sel;
    if(window.getSelection){
      sel = window.getSelection()
    }
    else if(document.getSelection){
      sel = document.getSelection()
    }
    else if(document.selection){
      sel = document.selection.createRange()
    }
    return sel
}

使用javascript选择div文本的选择位置

5 个答案: