Persisting the changes of range objects after selection in HTML

Question

Is there a way to save the changes like changing the background of HTML text that span over multiple tags so that when it is loaded again the changes made should be reflected in the HTML page.

EDIT: Detailed explanation.

When the HTML page is loaded, the text is selected and highlighted using the range object and the executeCommand:

             document.execCommand("BackColor", false, 'yellow'); 

The changes (highlighting the text as yellow) remain until the page is reloaded. But when the page is reloaded these changes are not there. What i want is to save somehow these changes like in local DB sqlite so that when page is reloaded/refreshed the changes in HTML page should appear.

Any idea how to do it. Do i need to save its range start offset and end offset which can be used to create range next time the page is loaded. Please give your insights.

Answer 1

For each selection, you could serialize the selected range to character offsets and deserialize it again on reload using something like this:

Demo: http://jsfiddle.net/WeWy7/3/

Code:

var saveSelection, restoreSelection;  if (window.getSelection && document.createRange) {     saveSelection = function(containerEl) {         var range = window.getSelection().getRangeAt(0);         var preSelectionRange = range.cloneRange();         preSelectionRange.selectNodeContents(containerEl);         preSelectionRange.setEnd(range.startContainer, range.startOffset);         var start = preSelectionRange.toString().length;          return {             start: start,             end: start + range.toString().length         };     };      restoreSelection = function(containerEl, savedSel) {         var charIndex = 0, range = document.createRange();         range.setStart(containerEl, 0);         range.collapse(true);         var nodeStack = [containerEl], node, foundStart = false, stop = false;          while (!stop && (node = nodeStack.pop())) {             if (node.nodeType == 3) {                 var nextCharIndex = charIndex + node.length;                 if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {                     range.setStart(node, savedSel.start - charIndex);                     foundStart = true;                 }                 if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {                     range.setEnd(node, savedSel.end - charIndex);                     stop = true;                 }                 charIndex = nextCharIndex;             } else {                 var i = node.childNodes.length;                 while (i--) {                     nodeStack.push(node.childNodes[i]);                 }             }         }          var sel = window.getSelection();         sel.removeAllRanges();         sel.addRange(range);     } } else if (document.selection) {     saveSelection = function(containerEl) {         var selectedTextRange = document.selection.createRange();         var preSelectionTextRange = document.body.createTextRange();         preSelectionTextRange.moveToElementText(containerEl);         preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange);         var start = preSelectionTextRange.text.length;          return {             start: start,             end: start + selectedTextRange.text.length         }     };      restoreSelection = function(containerEl, savedSel) {         var textRange = document.body.createTextRange();         textRange.moveToElementText(containerEl);         textRange.collapse(true);         textRange.moveEnd("character", savedSel.end);         textRange.moveStart("character", savedSel.start);         textRange.select();     }; } 

Answer 2

Using character offsets doesn't work if the cursor is at the beginning of a new paragraph. The approach below walks the DOM node and counts all nodes towards the offset. It also handles start and end individually to make sure that the selection remembers its exact position. Here is an updated version that I use in a major project (see functions at end):

/*  Gets the offset of a node within another node. Text nodes are  counted a n where n is the length. Entering (or passing) an  element is one offset. Exiting is 0.  */ var getNodeOffset = function(start, dest) {   var offset = 0;    var node = start;   var stack = [];    while (true) {     if (node === dest) {       return offset;     }      // Go into children     if (node.firstChild) {       // Going into first one doesn't count       if (node !== start)         offset += 1;       stack.push(node);       node = node.firstChild;     }     // If can go to next sibling     else if (stack.length > 0 && node.nextSibling) {       // If text, count length (plus 1)       if (node.nodeType === 3)         offset += node.nodeValue.length + 1;       else         offset += 1;        node = node.nextSibling;     }     else {       // If text, count length       if (node.nodeType === 3)         offset += node.nodeValue.length + 1;       else         offset += 1;        // No children or siblings, move up stack       while (true) {         if (stack.length <= 1)           return offset;          var next = stack.pop();          // Go to sibling         if (next.nextSibling) {           node = next.nextSibling;           break;         }       }     }   } };  // Calculate the total offsets of a node var calculateNodeOffset = function(node) {   var offset = 0;    // If text, count length   if (node.nodeType === 3)     offset += node.nodeValue.length + 1;   else     offset += 1;    if (node.childNodes) {     for (var i=0;i<node.childNodes.length;i++) {       offset += calculateNodeOffset(node.childNodes[i]);     }   }    return offset; };  // Determine total offset length from returned offset from ranges var totalOffsets = function(parentNode, offset) {   if (parentNode.nodeType == 3)     return offset;    if (parentNode.nodeType == 1) {     var total = 0;     // Get child nodes     for (var i=0;i<offset;i++) {       total += calculateNodeOffset(parentNode.childNodes[i]);     }     return total;   }    return 0; };  var getNodeAndOffsetAt = function(start, offset) {   var node = start;   var stack = [];    while (true) {     // If arrived     if (offset <= 0)       return { node: node, offset: 0 };      // If will be within current text node     if (node.nodeType == 3 && (offset <= node.nodeValue.length))       return { node: node, offset: Math.min(offset, node.nodeValue.length) };      // Go into children (first one doesn't count)     if (node.firstChild) {       if (node !== start)         offset -= 1;       stack.push(node);       node = node.firstChild;     }     // If can go to next sibling     else if (stack.length > 0 && node.nextSibling) {       // If text, count length       if (node.nodeType === 3)         offset -= node.nodeValue.length + 1;       else         offset -= 1;        node = node.nextSibling;     }     else {       // No children or siblings, move up stack       while (true) {         if (stack.length <= 1) {           // No more options, use current node           if (node.nodeType == 3)             return { node: node, offset: Math.min(offset, node.nodeValue.length) };           else             return { node: node, offset: 0 };         }          var next = stack.pop();          // Go to sibling         if (next.nextSibling) {           // If text, count length           if (node.nodeType === 3)             offset -= node.nodeValue.length + 1;           else             offset -= 1;            node = next.nextSibling;           break;         }       }     }   } };  exports.save = function(containerEl) {   // Get range   var selection = window.getSelection();   if (selection.rangeCount > 0) {     var range = selection.getRangeAt(0);     return {       start: getNodeOffset(containerEl, range.startContainer) + totalOffsets(range.startContainer, range.startOffset),       end: getNodeOffset(containerEl, range.endContainer) + totalOffsets(range.endContainer, range.endOffset)     };   }   else     return null; };  exports.restore = function(containerEl, savedSel) {   if (!savedSel)     return;    var range = document.createRange();    var startNodeOffset, endNodeOffset;   startNodeOffset = getNodeAndOffsetAt(containerEl, savedSel.start);   endNodeOffset = getNodeAndOffsetAt(containerEl, savedSel.end);    range.setStart(startNodeOffset.node, startNodeOffset.offset);   range.setEnd(endNodeOffset.node, endNodeOffset.offset);    var sel = window.getSelection();   sel.removeAllRanges();   sel.addRange(range); }; 

This only works on modern browsers (IE 9+ at least).