如何使用jquery获取高亮文本位置

Question

我正在尝试创建文本荧光笔。下面是html结构的例子。

<div id="donthighlight">Sea no iuvaret epicurei conceptam, id dicunt sensibus expetenda</div> 
<div id="highlightarea">Lorem ipsum dolor sit amet, an zril splendide est, discere accusam</div> 

如果我选择了第二个div字“排版”，我应该能够捕捉到起始字符位置和结束字符位置，并添加span标签围绕它的类。这将暂时突出文本的背景。函数只能在第二个div内工作。

我也想在DB中保存这些字符位置，以便下一次用户访问同一篇文章时，我应该能够显示以前突出显示的部分。用户也应该能够删除亮点。

我尝试了几个jquery插件，无法完成我的要求。我该如何做这项工作？任何帮助，将不胜感激

Answer 1

我找到了我正在寻找的东西。在下面找到该插件的链接

http://annotatorjs.org/

Answer 2

检查下面这个链接小提琴

http://jsfiddle.net/satishkumar_kt/20863oob/1/

检查replaceSelectedText功能它

希望它可以帮助

Answer 3

我猜你正在寻找这个.. getSelectionCharOffsetsWithin下返回的地方，你可以做你的进一步的任务，你可以通过它的位置获取单词，然后使用ajax调用将该单词保存到数据库...您可以为高亮显示提供严格的代码g字只在父div中。

<input type="button" onclick="alertSelection()" unselectable="on" value="Get selection"> 
<div id="main"> <div>hi</div> <div>dude!</div> </div> 
<script> 
function getSelectionCharOffsetsWithin(element) { 
var start = 0, end = 0; 
var sel, range, priorRange; 
if (typeof window.getSelection != "undefined") { 
    range = window.getSelection().getRangeAt(0); 
    priorRange = range.cloneRange(); 
    priorRange.selectNodeContents(element); 
    priorRange.setEnd(range.startContainer, range.startOffset); 
    start = priorRange.toString().length; 
    end = start + range.toString().length; 
}else if (typeof document.selection != "undefined" && 
    (sel = document.selection).type != "Control") { 
    range = sel.createRange(); 
    priorRange = document.body.createTextRange(); 
    priorRange.moveToElementText(element); 
    priorRange.setEndPoint("EndToStart", range); 
    start = priorRange.text.length; 
    end = start + range.text.length; 
} 
    return { 
    start: start, 
    end: end 
    }; 
} 
function alertSelection() { 
var mainDiv = document.getElementById("main"); 
var sel = getSelectionCharOffsetsWithin(mainDiv); 
alert(sel.start + ": " + sel.end); 
} 
</script>