获取选定文本的范围,相对于元素
Get range of selected text, relative to element
我从 another Whosebug post 中找到了这个函数,它根据相对于父元素的指定开始和结束范围突出显示文本。然而,不幸的是,我并不完全确定它是如何工作的。这是方法:
function setSelectionRange(el, start, end) {
if (document.createRange && window.getSelection) {
var range = document.createRange();
range.selectNodeContents(el);
var textNodes = getTextNodesIn(el);
var foundStart = false;
var charCount = 0, endCharCount;
for (var i = 0, textNode; textNode = textNodes[i++]; ) {
endCharCount = charCount + textNode.length;
if (!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i < textNodes.length))) {
range.setStart(textNode, start - charCount);
foundStart = true;
}
if (foundStart && end <= endCharCount) {
range.setEnd(textNode, end - charCount);
break;
}
charCount = endCharCount;
}
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && document.body.createTextRange) {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(true);
textRange.moveEnd("character", end);
textRange.moveStart("character", start);
textRange.select();
}
}
现在我想反其道而行之。我想获得相对于元素的选择范围,特别是 getSelectionRange
明确定义的 start
和 end
值。
我将如何使用与 setSelectionRange
中使用的类似方法编写相对于父元素的 "getSelectionRange" 方法,以便我可以将这两种方法用于 get/set 选择范围?
您可以使用 window.getSelection()
检索的 Selection
对象已经有一个 getRange
方法可以为您提供当前 select 的 range
对象.这个 range
对象与您提到的函数中使用的对象相同,包含有关当前 selected 内容的所有信息,这意味着开始节点、结束节点、startOffset、endOffset 等等。参见 https://developer.mozilla.org/en-US/docs/Web/API/Range
这几乎与你在这里的意思相反,如果你 select 页面中的内容,你可以这样做来获取和设置你 select 编辑的内容。
var current_range = window.getSelection().getRangeAt(0);
window.getSelection().removeAllRanges();
window.getSelection().addRange(current_range);
逆过程更简单:给定范围和父元素,过程为
- 创建包含元素内容的新范围
- 将该范围的结束设置为您正在测量的范围的开始边界
- 在量程上调用
toString()
得到返回字符串的长度。这是您的起始偏移量。
- 获取在原始范围上调用
toString()
返回的字符串的长度,并将其添加到起始偏移量。这是你的结束偏移量。
查看 saveSelection
函数 here 示例。
我从 another Whosebug post 中找到了这个函数,它根据相对于父元素的指定开始和结束范围突出显示文本。然而,不幸的是,我并不完全确定它是如何工作的。这是方法:
function setSelectionRange(el, start, end) {
if (document.createRange && window.getSelection) {
var range = document.createRange();
range.selectNodeContents(el);
var textNodes = getTextNodesIn(el);
var foundStart = false;
var charCount = 0, endCharCount;
for (var i = 0, textNode; textNode = textNodes[i++]; ) {
endCharCount = charCount + textNode.length;
if (!foundStart && start >= charCount && (start < endCharCount || (start == endCharCount && i < textNodes.length))) {
range.setStart(textNode, start - charCount);
foundStart = true;
}
if (foundStart && end <= endCharCount) {
range.setEnd(textNode, end - charCount);
break;
}
charCount = endCharCount;
}
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
} else if (document.selection && document.body.createTextRange) {
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.collapse(true);
textRange.moveEnd("character", end);
textRange.moveStart("character", start);
textRange.select();
}
}
现在我想反其道而行之。我想获得相对于元素的选择范围,特别是 getSelectionRange
明确定义的 start
和 end
值。
我将如何使用与 setSelectionRange
中使用的类似方法编写相对于父元素的 "getSelectionRange" 方法,以便我可以将这两种方法用于 get/set 选择范围?
您可以使用 window.getSelection()
检索的 Selection
对象已经有一个 getRange
方法可以为您提供当前 select 的 range
对象.这个 range
对象与您提到的函数中使用的对象相同,包含有关当前 selected 内容的所有信息,这意味着开始节点、结束节点、startOffset、endOffset 等等。参见 https://developer.mozilla.org/en-US/docs/Web/API/Range
这几乎与你在这里的意思相反,如果你 select 页面中的内容,你可以这样做来获取和设置你 select 编辑的内容。
var current_range = window.getSelection().getRangeAt(0);
window.getSelection().removeAllRanges();
window.getSelection().addRange(current_range);
逆过程更简单:给定范围和父元素,过程为
- 创建包含元素内容的新范围
- 将该范围的结束设置为您正在测量的范围的开始边界
- 在量程上调用
toString()
得到返回字符串的长度。这是您的起始偏移量。 - 获取在原始范围上调用
toString()
返回的字符串的长度,并将其添加到起始偏移量。这是你的结束偏移量。
查看 saveSelection
函数 here 示例。