我目前正在开发一个chrome扩展程序,该扩展程序将js脚本注入访问过的网站。它获取当前选定的文本(由光标突出显示),然后在该文本上重新聚焦之后。我的saveSelection和restoreSelection函数如下:
saveSelection = function(containerEl) {
let range = window.getSelection()
.getRangeAt(0);
let preSelectionRange = range.cloneRange();
preSelectionRange.selectNodeContents(containerEl);
preSelectionRange.setEnd(range.startContainer, range.startOffset);
let start = preSelectionRange.toString()
.length;
return {start: start,
end: start + range.toString()
.length}
};
restoreSelection = function(containerEl, savedSel)
{
let charIndex = 0,
range = document.createRange();
range.setStart(containerEl, 0);
range.collapse(true);
let nodeStack = [containerEl],
node, foundStart = false,
stop = false;
while (!stop && (node = nodeStack.pop()))
{
if (node.nodeType === 3)
{
let 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
{
let i = node.childNodes.length;
while (i--)
{
nodeStack.push(node.childNodes[i]);
}
}
}
let sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
这些功能适用于段落中的文本,但适用于输入字段(例如google搜索栏,codepen,jsfiddle)中的文本,脚本无法重新关注文本。在调试中,我发现范围startOffset和endOffset =0。
我如何1)获取选择范围,以及2)重新关注搜索栏中的文本?