我需要在内容不可编辑的div中获取所选文本的位置(不是textarea,不是rtf编辑器,只是一个简单的div)
我想这样做是为了让用户能够选择文章的部分并“突出显示”,将其包装在具有不同背景的范围中,当然,使用div和/或ps构建文章等,而不是textareas或rtfs
有什么想法吗?
P.S。你也可以使用jQuery:D
P.s.s。我需要选择的位置,而不是选择本身。 Aka:它从索引I开始到索引J.我需要这个,因为在父级中查找文本的常规方法并不总是返回一个唯一的结果,这会很糟糕:)
答案 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
}