HTMLで選択した後、範囲オブジェクトの変更を永続化する
複数のタグにまたがるHTMLテキストの背景を変更するなどの変更を保存して、再度読み込まれたときに行われた変更がHTMLページに反映されるようにする方法はありますか。
編集：詳細な説明。
HTMLページが読み込まれると、範囲オブジェクトとexecuteCommandを使用してテキストが選択され、強調表示されます。
document.execCommand("BackColor", false, 'yellow');
変更（テキストを黄色で強調表示）は、ページが再読み込みされるまで残ります。しかし、ページがリロードされると、これらの変更はありません。私が欲しいのは、ローカルDB sqliteのようにこれらの変更を何らかの方法で保存して、ページがリロード/更新されたときにHTMLページの変更が表示されるようにすることです。
それを行う方法のアイデア。次回ページが読み込まれたときに範囲を作成するために使用できる範囲の開始オフセットと終了オフセットを保存する必要がありますか？あなたの洞察を与えてください。
選択ごとに、選択した範囲を文字オフセットにシリアル化し、次のようなものを使用してリロード時に再度シリアル化を解除できます。
デモ： http://jsfiddle.net/WeWy7/3/
コード：
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();
};
}
カーソルが新しい段落の先頭にある場合、文字オフセットの使用は機能しません。以下のアプローチでは、DOMノードをウォークし、オフセットに向かってすべてのノードをカウントします。また、開始と終了を個別に処理して、選択範囲が正確な位置を記憶していることを確認します。これは私が主要なプロジェクトで使用する更新されたバージョンです（最後の関数を参照）：
/*
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);
};
これは最新のブラウザ（少なくともIE 9以降）でのみ機能します。
文脈についてもっと知らなければ、正確な答えを出すのは難しいですが、そうです、それは可能ですが、ほとんどの場合、それは非常に複雑になります。ユースケースに応じて、いくつかの方法があります。
Cookieまたはローカルストレージ
ある種のクライアント側ストレージ（Cookie、ローカルストレージなど）を使用して、変更された要素とその方法に関する情報を保存できます。ページがリロードされるたびに、そのストレージを読み取り、変更を適用します。それをどのように実装するかは、それらの変更がどのように行われるかによって異なり、1つのSOでカバーするために広範囲に及ぶでしょう-私は恐れています。
サーバー側ストレージ
各ユーザーが誰であるかを知っている場合（何らかの認証があります）、ユーザーが何かの外観を変更するたびに（ただし、それが行われた場合）、サーバーにajaxリクエストを送信し、それらの変更をデータベースに保存します。その後のページの読み込みごとに、リクエストの用途を確認し、データベースを検索して変更が加えられているかどうかを確認し、変更があった場合はそれに応じて適用する必要があります。
クライアント側とサーバー側の両方のストレージソリューションに共通しているのは、実装するのに非常に広範囲にわたるということです。
ブラウザプラグイン
もう1つの方法は、 FirefoxのGreasemonkey のようなプラグインを使用して、ユーザーがWebページのレンダリング方法をカスタマイズできるようにすることです。これらのカスタマイズは、ページの読み込み後も保持されます。