Javascript epub reader ios中的文本突出显示和添加注释功能

我正在为ios和android开发epub阅读器。我想实现文本突出显示，并向我的epub阅读器添加注释功能。我想知道如何将这些功能用于固定布局epub。我可以通过

javascript:window.getSelection（）

获取所选对象。我想保存和检索这些对象以备将来使用。下面是我用来突出显示和保存文本的代码：

var selection;
var storedSelections[];

function highlightText() {
if (window.getSelection) {
    selection = window.getSelection();
}
 if (selection.rangeCount > 0) {
    var range = selection.getRangeAt(0);
    var selectedText = range.toString();
    var span = document.createElement("span");
    span.id = "span_" + range.startOffset + "_" + range.endOffset ;
     alert(span.id);
    span.onclick = function() {
    myOnclikFunction(selectedText);};
span.setAttribute("class","uiWebviewHighlight");
    span.style.backgroundColor  = "skyblue";
    range.surroundContents(span);

    selection.removeAllRanges();
    selection.addRange(range);

    for (var i = 0; i < selection.rangeCount; i++) {
        storedSelections.push (selection.getRangeAt (i));
    }
    selection.removeAllRanges();
    localStorage.setItem('storedSelections',storedSelections);
}}

var选择；
风险值[]；
函数highlightText（）{
if（window.getSelection）{
selection=window.getSelection（）；
}
如果（selection.rangeCount>0）{
var range=selection.getRangeAt（0）；
var selectedText=range.toString（）；
var span=document.createElement（“span”）；
span.id=“span_”+range.startOffset+“”+range.endOffset；
警报（span.id）；
span.onclick=函数（）{
myOnclikFunction（selectedText）；}；
setAttribute（“类”、“uiWebviewHighlight”）；
span.style.backgroundColor=“天蓝色”；
范围。周围内容物（跨度）；
selection.removeAllRanges（）；
选择。添加范围（范围）；
对于（变量i=0；i

我使用此代码检索突出显示的文本：

function ShowStoredSelections () {
storedSelections.length=0;
var retrieved= localStorage.getItem('storedSelections');
storedSelections.push (retrieved);
var selection = window.getSelection ();
for (var i = 0; i < storedSelections.length; i++) {
    selection.removeAllRanges ();
    selection.addRange (storedSelections[i]);
    if (selection.rangeCount > 0) {
        var range = selection.getRangeAt(0);
        var selectedText = range.toString();

        var span = document.createElement("span");
        span.id = "span_" + range.startOffset + "_" + range.endOffset ;
        span.onclick = function() {
            myOnclikFunction(selectedText);
        };
        span.setAttribute("class","uiWebviewHighlight");
        span.style.backgroundColor  = "red";
        range.surroundContents(span);
        selection.removeAllRanges();
        selection.addRange(range);
    }
}}

函数ShowStoredSelections（）{
storedSelections.length=0；
检索到的var=localStorage.getItem（'storedSelections'）；
storedSelections.push（已检索）；
var selection=window.getSelection（）；
对于（变量i=0；i0）{
var range=selection.getRangeAt（0）；
var selectedText=range.toString（）；
var span=document.createElement（“span”）；
span.id=“span_”+range.startOffset+“”+range.endOffset；
span.onclick=函数（）{
myonclik函数（selectedText）；
};
setAttribute（“类”、“uiWebviewHighlight”）；
span.style.backgroundColor=“红色”；
范围。周围内容物（跨度）；
selection.removeAllRanges（）；
选择。添加范围（范围）；
}
}}

我无法将检索到的文本添加到

selection.addRange

。我在这方面做错了什么

请给我一些想法或建议来克服这个问题

提前感谢您的回复。

我已经为安卓和iOS的本地epub播放器实现了所有这些——这是一个组织的产品研发

不要使用getSelection，而是按照下面的步骤操作。它虽然单调乏味，但功能完全在您的控制之下

->提供UIWebView（iOS）或WebView（android）的url

->在webview didload的回调中-将所有文本单词包装成具有唯一ID的跨距

->将触摸事件传播到webview-javascript将使用TouchMove（e）上的

函数处理这些触摸
->使用
document.element frompoint



->突出显示这些跨距（单词）
->您将获得每个span
$（“#wordID-”+sWordID）的位置。position（）
，您可以将这些值从javascript传递到本机代码


->将便笺视图添加到webview的超级视图

注意：最好在运行时将jQuery注入webview，以便将单词包装到范围中

hi可能有任何关于上述问题的解决方案，因为我也面临同样的问题，请帮助我完成文本突出显示，然后使用'NSString*html=[webview stringByEvaluatingJavaScriptFromString:@“document.documentElement.outerHTML”]；NSString*currentURL=webview.request.URL.absoluteString；[html writeToFile:currentURL原子：是编码：NSUTF8StringEncoding错误：&错误]；'我不知道我的做法对不对。但是它是有效的。嗨@Ashini我参考了链接我没有得到任何代码，如果可能的话你能发送代码，请帮助我。我花费了很多时间，但我没有任何回答谢谢，Mailid:dineshprasanna1987@gmail.comAshini你是用安卓系统做的吗？