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.

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

Solution 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).

Solution 3

Without knowing more about the context, it is hard to give an exact answer, but yes it would be possible, but it will be quite complex for most cases. Depending on the usecase, there are a few ways to go.

Cookies or Local storage

You could use some sort of client-side storage (cookies, local storage or similar) and save information about what elements were modified and how. Whenever the page is reloaded you read that storage and apply the changes. How to implement it will depend on how those changes are made, and will be to0 extensive to cover in a single SO-answer I'm afraid.

Server-side storage

If you know who each user is (you have some form of authentication), whenever they change the appearance of something (however that is made), you make an ajax-request to the server and save those changes to a database. On every subsequent page load, you would then have to check what use is making the request, do a lookup in your database to see if they've made any changes, and in that case apply them accordingly.

Common for both the client- and server-side storage solutions is that they will be quite extensive to implement I believe.

Browser plugin

Another way to go would be to make use of plugins like Greasemonkey for Firefox that allow the user to customize the way a webpage is rendered. Those customizations will be persistent across page loads.

Comments

[Satish]

Local storage would be the option because its a offline application.

[Satish]

@ Tim Down: This solution is really very helpful. You are great man.

[ashutosh]

@TimDown: There seems to be an issue with the solution in the jsfiddle. If the last character of the editable area is a new line (and the caret is at the new line) and then you save and restore selection, the selection is restored to the end of the previous line. How can this be fixed?

[Tim Down]

@ashutosh: With difficulty. The problem is that the line break is caused by a <br> element, which isn't taken into account in my example code. You could alter the code to count every <br> as contributing one character.

[carmina]

This solution works when the cursor is in the middle of a content editable page. However, when it's at the very end it returns the cursor to the start.

[carmina]

@TimDown, the last character is not a new line. (regarding my comment above)

[Epsil0neR]

@TimDown your solution doesn't work with iframe elements, so I mede some changes to your code and now it's works also with iframe, also I made function definition only once istead of multiple function definition which helps to use them from intellisense. Updated JSFidle solution: jsfiddle.net/WeWy7/60

[Brian M. Hunt]

In the restoreSelection, I'm likely wrong but it seems the range.setStart(...); range.collapse(true) is superfluous? Or is it meant to catch an edge case (e.g. the selection no longer exists)? Lovely code. Cheers.

[Tim Down]

@BrianM.Hunt: I can't remember my thinking, but I think it's just a fallback in case the saved selection offsets are incorrect. It is superfluous if the selection offsets are valid.

[Clayton Grassick]

@carmina See the response I just added. It solves the problem with the cursor at the end.

[mayankcpdixit]

var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); this throws error in IE10: Could not complete the operation due to error 800a025e

[mayankcpdixit]

var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); This throws error in IE10: Could not complete the operation due to error 800a025e

[Tim Down]

@mayankcpdixit: I have seen this occasionally but never worked out what triggers it. Do you have an example page?

[mayankcpdixit]

@TimDown not yet. I'll try to put a demo online. will post here.

[newBike]

where does containerEl come from =_=!

[newBike]

where does containerEl come from =_=!

[Clayton Grassick]

I've updated it with bug fixes and Firefox changes. containerEl is the container element (e.g. the content editable node)

[Tim Down]

@newBike: That's the container element for the selection. Most commonly this will be a contenteditable element.

[akeem]

I've tested this on jsfiddle and it works fine. However, is there a way to create the range from a search string saveSelection = function(containerEl, search_text){ ... }, rather that using window.getSelection().getRangeAt(0);, while still spanning tags in the html.?!

[Tim Down]

@qräbnö: It could be reduced by removing the } else if (document.selection) { branch, which is only relevant to Internet Explorer < = 8.