这是 Microsoft Edge 浏览器的特定问题。我正在尝试使用 Range API 将 CSS 样式附加到选定的单词。当我尝试公开功能 range.endOffset 时，边缘浏览器出现问题。在这里我附上我的代码。
<!DOCTYPE html>
<html>
<body>
<p>This is sample content</p>
<p id="demo"></p>
<script>
var range = null;
var selection = window.getSelection();
if( selection && selection.rangeCount > 0 )
{
range = selection.getRangeAt( 0 );
}
var startOffset = range.startOffset;
var endOffset = range.endOffset;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset;
</script>
</body>
</html>
现在，如果我尝试从“P”标签中选择文本“content”，它会为 range.startOffset 提供正确的值，但为 range.endOffset 值提供不正确的值。这将导致整个“P”标签的样式困惑。此问题仅发生在 Microsoft Edge 浏览器中，并且如果所选文本以某个 html 标记结尾(如此处)，则它以“内容”文本结尾。如果我尝试选择文本之间的文本，则不会出现此问题。它在 chrome 浏览器中工作。在边缘浏览器中是否有解决此问题的解决方法？
最佳答案
你的 Edge 浏览器是什么版本？我在 Edge 42 和 Edge 44 版本上使用以下代码重现了您的问题。
<p>This is sample content</p>
<p id="demo"></p>
<script>
document.getElementsByTagName('p')[0].onmouseup = function () {
var range = null;
var selection = window.getSelection();
if (selection && selection.rangeCount > 0) {
range = selection.getRangeAt(0);
}
var startOffset = range.startOffset;
var endOffset = range.endOffset;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset;
}
</script>
在 Edge 42 版本上，如果我选择“content”，endOffset 将为 1。
在 Edge 44 版本上，如果我拖动以选择“内容”，则 endOffset 效果很好，但如果 我使用双击方法选择“内容”，endOffset 仍然是 1。
所以，这个问题和Edge浏览器有关，我已经把这个问题反馈给Edge Platform了。
作为解决方法，我建议您可以根据 startOffset 和所选文本计算 endOffset。尝试使用以下代码:
<p>This is sample content</p>
<p id="demo"></p>
<script>
document.getElementsByTagName('p')[0].onmouseup = function () {
var range = null;
var selection = window.getSelection();
if (selection && selection.rangeCount > 0) {
range = selection.getRangeAt(0);
}
var startOffset = range.startOffset;
var endOffset = startOffset + selection.toString().length;
document.getElementById("demo").innerHTML =
startOffset + "<br>" + endOffset + "<br/>" + selection;
}
</script>
截图如下:
关于javascript - Microsoft Edge 浏览器中的 range.endOffset 给出了错误的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55392522/