window.getSelection().baseOffset 错误答案

【问题标题】：window.getSelection().baseOffset is wrongwindow.getSelection().baseOffset 错误
【发布时间】：2020-08-19 04:48:36
【问题描述】：

如果您选择下面从第一个字符 H 开始的任何文本，则会显示所选内容的 baseOffset 是 5。在我的真实案例中，它显示7。我该如何纠正这个问题？

setInterval(()=>{
  console.log(window.getSelection().baseOffset);
}, 250);

<!DOCTYPE html>
<html>
  <body>
    <div id='main'data-alignment="center">
    Hello World!
    </div>
  </body>
</html>

【问题讨论】：

在<div id='main'data-alignment="center"> 的结尾和第一个H 之间，您计算了多少个空格字符？ => 结果是正确的。（并且这个属性不在规范中（还），最好使用anchorOffset）
有趣。谢谢，您可以将其发布为答案，以便我可以给您最佳答案吗？在我的现实生活中，问题是一样的。我的格式化程序正在缩进文本，我只是不认为它是这样的。

【解决方案1】：

结果是正确的，<div id='main'data-alignment="center"> 和H 之间正好有 5 个空格字符，这些将被计为偏移量。

为避免这种情况，您可以将 TextNode 包装在 <span> 元素中，这样就不会出现偏移。

另外，baseOffset 是 still 不在官方规范中，最好使用anchorOffset，我认为它的作用大致相同（但所有浏览器都支持）。

document.onselectionchange = ()=>{
  console.log(window.getSelection().anchorOffset);
};

<!DOCTYPE html>
<html>
  <body>
    <div id='main'data-alignment="center">
      <span>Hello World!</span>
    </div>
  </body>
</html>

【讨论】：