Javascript 在HTML中保存选择后范围对象的更改

是否有办法保存更改，例如更改跨多个标记的HTML文本的背景，以便在再次加载时，所做的更改应反映在HTML页面中

编辑：详细解释

加载HTML页面时，使用range对象和executeCommand选择并突出显示文本：

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

更改（将文本突出显示为黄色）将一直保留，直到重新加载页面。但是当重新加载页面时，这些更改并不存在。我想要的是以某种方式保存这些更改，比如在本地DB sqlite中，这样当页面被重新加载/刷新时，HTML页面中的更改就会出现

---

你知道怎么做吗。是否需要保存其范围开始偏移量和结束偏移量，以便下次加载页面时用于创建范围。请给出您的见解。

如果不了解更多的上下文，很难给出准确的答案，但是是的，这是可能的，但在大多数情况下会非常复杂。根据用例的不同，有几种方法

Cookies或本地存储

您可以使用某种类型的客户端存储（cookie、本地存储或类似存储），并保存有关修改了哪些元素以及如何修改的信息。每当重新加载页面时，您都会读取该存储并应用更改。如何实现它将取决于这些更改是如何进行的，并且将在一个单一的答案中涵盖范围非常广泛，所以我担心

服务器端存储

如果您知道每个用户是谁（您有某种形式的身份验证），每当他们更改某个东西的外观时（无论是如何更改的），您都会向服务器发出ajax请求，并将这些更改保存到数据库中。在随后的每次页面加载中，您都必须检查发出请求的用途，在数据库中进行查找以查看他们是否进行了任何更改，并在这种情况下相应地应用这些更改

客户端存储解决方案和服务器端存储解决方案的共同点是，我相信它们的实现将非常广泛

浏览器插件

---

另一种方法是使用这样的插件，允许用户自定义网页的呈现方式。这些自定义设置将在页面加载过程中保持不变。

对于每个选择，您可以将所选范围序列化为字符偏移量，并在重新加载时使用如下方式再次反序列化：

演示：

代码：

var保存选择、恢复选择；
if（window.getSelection&&document.createRange）{
saveSelection=函数（containerell）{
var range=window.getSelection（）.getRangeAt（0）；
var preselection range=range.cloneRange（）；
预选范围。选择节点内容（containerell）；
预选range.setEnd（range.startContainer，range.startOffset）；
var start=preSelectionRange.toString（）.length；
返回{
开始：开始，
结束：开始+范围.toString（）.length
};
};
restoreSelection=函数（containeerl、savedSel）{
var charIndex=0，range=document.createRange（）；
range.setStart（containerell，0）；
范围。塌陷（真）；
var nodeStack=[containerell]，node，foundStart=false，stop=false；
而（！stop&&（node=nodeStack.pop（））{
if（node.nodeType==3）{
var nextCharIndex=charIndex+node.length；
如果（！foundStart&&savedSel.start>=charIndex&&savedSel.start=charIndex&&savedSel.end如果光标位于新段落的开头，则使用字符偏移量不起作用。下面的方法将遍历DOM节点并向偏移量方向计数所有节点。它还单独处理开始和结束，以确保选择记住its确切位置。这是我在一个主要项目中使用的更新版本（请参见末尾的函数）：

/*
获取一个节点在另一个节点内的偏移量。文本节点为
计算一个n，其中n是长度。输入（或传递）一个
元素为一个偏移量。退出为0。
*/
var getNodeOffset=函数（开始、结束）{
var偏移=0；
var节点=开始；
var堆栈=[]；
while（true）{
如果（节点===dest）{
返回偏移量；
}
//调查儿童
if（node.firstChild）{
//进入第一个并不重要
如果（节点！==开始）
偏移量+=1；
栈推（节点）；
node=node.firstChild；
}
//如果可以去下一个兄弟姐妹那里
else if（stack.length>0&&node.nextSibling）{
//如果为文本，则计算长度（加1）
if（node.nodeType==3）
偏移量+=node.nodeValue.length+1；
其他的
偏移量+=1；
node=node.nextSibling；
}
否则{
//如果是文本，请计算长度
if（node.nodeType==3）
偏移量+=node.nodeValue.length+1；
其他的
偏移量+=1；
//无子项或兄弟姐妹，向上移动堆栈
while（true）{
如果（stack.length这些更改是如何进行的，由谁进行的？很抱歉，不太准确。我现在编辑了我的问题。本地存储将是一个选项，因为它是一个脱机应用程序。@Tim Down：这个解决方案真的很有帮助。你真是个伟人。@Tim Down:JSFIDLE中的解决方案似乎有问题。如果区域是新行（插入符号位于新行）然后保存并还原所选内容，所选内容将还原到上一行的末尾。如何修复此问题？@ashutosh：困难重重。问题是换行是由

元素引起的，在我的示例代码中没有考虑到这一点。您可以更改代码，将每个

作为一个元素进行计数一个字符。这个解决方案在光标位于一个内容可编辑页面的中间时起作用。然而，当它在最末尾时，它会将光标返回到开始。@ QR。
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();
    };
}

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