Ich entwickle Epub Reader für iOS und Android. Ich möchte Texthervorhebungen implementieren und meinem Epub-Reader eine Notizfunktion hinzufügen. Und ich möchte wissen, wie man diese Funktionalität für Epubs mit festem Layout nutzt. Ich kann ein ausgewähltes Objekt von bekommenjavascript:window.getSelection(). Ich möchte diese Objekte für die zukünftige Verwendung speichern und abrufen. Hier der Code, den ich zum Markieren und Speichern von Text verwendet habe:

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

Ich habe diesen Code verwendet, um hervorgehobenen Text abzurufen:

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

Ich kann keinen abgerufenen Text hinzufügenselection.addRange. Was mache ich falsch?

Bitte geben Sie mir einige Ideen oder Vorschläge, um dieses Problem zu überwinden.

Vielen Dank im Voraus für jede Antwort oder Antwort.