在HTML中选择后，保持范围对象的更改

Question

在HTML中选择后，保持范围对象的更改

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

编辑：详细解释。

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

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

更改（将文本突出显示为黄色）保留，直到重新加载页面。但是当重新加载页面时，这些更改不存在。我想要的是以某种方式保存这些更改，如在本地数据库sqlite中，以便在重新加载/刷新页面时，应显示HTML页面中的更改。

知道如何做到这一点。我是否需要保存其范围起始偏移量和结束偏移量，可以在下次加载页面时用于创建范围。请提供您的见解。

Answer 1

如果光标位于新段落的开头，则使用字符偏移不起作用。下面的方法遍历DOM节点并将所有节点计入偏移量。它还可以单独处理开始和结束，以确保选择记住其确切位置。这是我在一个主要项目中使用的更新版本（参见最后的函数）：/* &nbsp;Gets&nbsp;the&nbsp;offset&nbsp;of&nbsp;a&nbsp;node&nbsp;within&nbsp;another&nbsp;node.&nbsp;Text&nbsp;nodes&nbsp;are &nbsp;counted&nbsp;a&nbsp;n&nbsp;where&nbsp;n&nbsp;is&nbsp;the&nbsp;length.&nbsp;Entering&nbsp;(or&nbsp;passing)&nbsp;an &nbsp;element&nbsp;is&nbsp;one&nbsp;offset.&nbsp;Exiting&nbsp;is&nbsp;0. &nbsp;*/var&nbsp;getNodeOffset&nbsp;=&nbsp;function(start,&nbsp;dest)&nbsp;{ &nbsp;&nbsp;var&nbsp;offset&nbsp;=&nbsp;0; &nbsp;&nbsp;var&nbsp;node&nbsp;=&nbsp;start; &nbsp;&nbsp;var&nbsp;stack&nbsp;=&nbsp;[]; &nbsp;&nbsp;while&nbsp;(true)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node&nbsp;===&nbsp;dest)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;offset; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Go&nbsp;into&nbsp;children &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node.firstChild)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Going&nbsp;into&nbsp;first&nbsp;one&nbsp;doesn't&nbsp;count &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node&nbsp;!==&nbsp;start) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset&nbsp;+=&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stack.push(node); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;node&nbsp;=&nbsp;node.firstChild; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;If&nbsp;can&nbsp;go&nbsp;to&nbsp;next&nbsp;sibling &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if&nbsp;(stack.length&nbsp;>&nbsp;0&nbsp;&&&nbsp;node.nextSibling)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;If&nbsp;text,&nbsp;count&nbsp;length&nbsp;(plus&nbsp;1) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node.nodeType&nbsp;===&nbsp;3) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset&nbsp;+=&nbsp;node.nodeValue.length&nbsp;+&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset&nbsp;+=&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;node&nbsp;=&nbsp;node.nextSibling; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;If&nbsp;text,&nbsp;count&nbsp;length &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node.nodeType&nbsp;===&nbsp;3) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset&nbsp;+=&nbsp;node.nodeValue.length&nbsp;+&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset&nbsp;+=&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;No&nbsp;children&nbsp;or&nbsp;siblings,&nbsp;move&nbsp;up&nbsp;stack &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while&nbsp;(true)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(stack.length&nbsp;<=&nbsp;1) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;offset; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;next&nbsp;=&nbsp;stack.pop(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Go&nbsp;to&nbsp;sibling &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(next.nextSibling)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;node&nbsp;=&nbsp;next.nextSibling; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}};//&nbsp;Calculate&nbsp;the&nbsp;total&nbsp;offsets&nbsp;of&nbsp;a&nbsp;nodevar&nbsp;calculateNodeOffset&nbsp;=&nbsp;function(node)&nbsp;{ &nbsp;&nbsp;var&nbsp;offset&nbsp;=&nbsp;0; &nbsp;&nbsp;//&nbsp;If&nbsp;text,&nbsp;count&nbsp;length &nbsp;&nbsp;if&nbsp;(node.nodeType&nbsp;===&nbsp;3) &nbsp;&nbsp;&nbsp;&nbsp;offset&nbsp;+=&nbsp;node.nodeValue.length&nbsp;+&nbsp;1; &nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;offset&nbsp;+=&nbsp;1; &nbsp;&nbsp;if&nbsp;(node.childNodes)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i=0;i<node.childNodes.length;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset&nbsp;+=&nbsp;calculateNodeOffset(node.childNodes[i]); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;} &nbsp;&nbsp;return&nbsp;offset;};//&nbsp;Determine&nbsp;total&nbsp;offset&nbsp;length&nbsp;from&nbsp;returned&nbsp;offset&nbsp;from&nbsp;rangesvar&nbsp;totalOffsets&nbsp;=&nbsp;function(parentNode,&nbsp;offset)&nbsp;{ &nbsp;&nbsp;if&nbsp;(parentNode.nodeType&nbsp;==&nbsp;3) &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;offset; &nbsp;&nbsp;if&nbsp;(parentNode.nodeType&nbsp;==&nbsp;1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;total&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Get&nbsp;child&nbsp;nodes &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i=0;i<offset;i++)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;total&nbsp;+=&nbsp;calculateNodeOffset(parentNode.childNodes[i]); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;total; &nbsp;&nbsp;} &nbsp;&nbsp;return&nbsp;0;};var&nbsp;getNodeAndOffsetAt&nbsp;=&nbsp;function(start,&nbsp;offset)&nbsp;{ &nbsp;&nbsp;var&nbsp;node&nbsp;=&nbsp;start; &nbsp;&nbsp;var&nbsp;stack&nbsp;=&nbsp;[]; &nbsp;&nbsp;while&nbsp;(true)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;If&nbsp;arrived &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(offset&nbsp;<=&nbsp;0) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;node:&nbsp;node,&nbsp;offset:&nbsp;0&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;If&nbsp;will&nbsp;be&nbsp;within&nbsp;current&nbsp;text&nbsp;node &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node.nodeType&nbsp;==&nbsp;3&nbsp;&&&nbsp;(offset&nbsp;<=&nbsp;node.nodeValue.length)) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;node:&nbsp;node,&nbsp;offset:&nbsp;Math.min(offset,&nbsp;node.nodeValue.length)&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Go&nbsp;into&nbsp;children&nbsp;(first&nbsp;one&nbsp;doesn't&nbsp;count) &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node.firstChild)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node&nbsp;!==&nbsp;start) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset&nbsp;-=&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stack.push(node); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;node&nbsp;=&nbsp;node.firstChild; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;If&nbsp;can&nbsp;go&nbsp;to&nbsp;next&nbsp;sibling &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;if&nbsp;(stack.length&nbsp;>&nbsp;0&nbsp;&&&nbsp;node.nextSibling)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;If&nbsp;text,&nbsp;count&nbsp;length &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node.nodeType&nbsp;===&nbsp;3) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset&nbsp;-=&nbsp;node.nodeValue.length&nbsp;+&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset&nbsp;-=&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;node&nbsp;=&nbsp;node.nextSibling; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;No&nbsp;children&nbsp;or&nbsp;siblings,&nbsp;move&nbsp;up&nbsp;stack &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while&nbsp;(true)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(stack.length&nbsp;<=&nbsp;1)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;No&nbsp;more&nbsp;options,&nbsp;use&nbsp;current&nbsp;node &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node.nodeType&nbsp;==&nbsp;3) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;node:&nbsp;node,&nbsp;offset:&nbsp;Math.min(offset,&nbsp;node.nodeValue.length)&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;node:&nbsp;node,&nbsp;offset:&nbsp;0&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;next&nbsp;=&nbsp;stack.pop(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Go&nbsp;to&nbsp;sibling &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(next.nextSibling)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;If&nbsp;text,&nbsp;count&nbsp;length &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(node.nodeType&nbsp;===&nbsp;3) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset&nbsp;-=&nbsp;node.nodeValue.length&nbsp;+&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset&nbsp;-=&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;node&nbsp;=&nbsp;next.nextSibling; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}};exports.save&nbsp;=&nbsp;function(containerEl)&nbsp;{ &nbsp;&nbsp;//&nbsp;Get&nbsp;range &nbsp;&nbsp;var&nbsp;selection&nbsp;=&nbsp;window.getSelection(); &nbsp;&nbsp;if&nbsp;(selection.rangeCount&nbsp;>&nbsp;0)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;range&nbsp;=&nbsp;selection.getRangeAt(0); &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;start:&nbsp;getNodeOffset(containerEl,&nbsp;range.startContainer)&nbsp;+&nbsp;totalOffsets(range.startContainer,&nbsp;range.startOffset), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end:&nbsp;getNodeOffset(containerEl,&nbsp;range.endContainer)&nbsp;+&nbsp;totalOffsets(range.endContainer,&nbsp;range.endOffset) &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;} &nbsp;&nbsp;else &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;null;};exports.restore&nbsp;=&nbsp;function(containerEl,&nbsp;savedSel)&nbsp;{ &nbsp;&nbsp;if&nbsp;(!savedSel) &nbsp;&nbsp;&nbsp;&nbsp;return; &nbsp;&nbsp;var&nbsp;range&nbsp;=&nbsp;document.createRange(); &nbsp;&nbsp;var&nbsp;startNodeOffset,&nbsp;endNodeOffset; &nbsp;&nbsp;startNodeOffset&nbsp;=&nbsp;getNodeAndOffsetAt(containerEl,&nbsp;savedSel.start); &nbsp;&nbsp;endNodeOffset&nbsp;=&nbsp;getNodeAndOffsetAt(containerEl,&nbsp;savedSel.end); &nbsp;&nbsp;range.setStart(startNodeOffset.node,&nbsp;startNodeOffset.offset); &nbsp;&nbsp;range.setEnd(endNodeOffset.node,&nbsp;endNodeOffset.offset); &nbsp;&nbsp;var&nbsp;sel&nbsp;=&nbsp;window.getSelection(); &nbsp;&nbsp;sel.removeAllRanges(); &nbsp;&nbsp;sel.addRange(range);};这仅适用于现代浏览器（至少IE 9+）。

Answer 2

在不了解更多关于上下文的情况下，很难给出确切的答案，但是是的，这是可能的，但对于大多数情况来说这将是非常复杂的。根据用例，有几种方法可以使用。Cookie或本地存储您可以使用某种客户端存储（cookie，本地存储或类似存储），并保存有关修改了哪些元素以及如何修改元素的信息。每当重新加载页面时，您都会读取该存储并应用更改。如何实施它将取决于这些变化是如何进行的，并且我将在一个单一的SO答案中进行广泛的讨论。服务器端存储如果您知道每个用户是谁（您有某种形式的身份验证），那么每当他们更改某些内容（无论如何）时，您都会向服务器发出ajax请求并将这些更改保存到数据库中。在每个后续页面加载时，您必须检查发出请求的用途，在数据库中进行查找以查看它们是否进行了任何更改，并在这种情况下相应地应用它们。客户端和服务器端存储解决方案的共同之处在于，我相信它们的实现范围非常广泛。浏览器插件另一种方法是使用像Greasemonkey for Firefox这样的插件，允许用户自定义网页的呈现方式。这些自定义将在页面加载中保持不变。