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

时间:2011-04-07 07:58:49

标签: javascript jquery position

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

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

有什么想法吗?

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

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

5 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分: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

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

答案 4 :(得分:0)

好吧,即使您找到了第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
}