Range对象的setStart方法和setEnd方法

MDN

首先挂上 MDN 的链接，最权威的解释就在这。

但由于翻译的原因，可能不太好理解。

https://developer.mozilla.org/zh-CN/docs/Web/API/Range/setStart

https://developer.mozilla.org/zh-CN/docs/Web/API/Range/setEnd

我的理解

告诉 Range 对象，选中的范围从哪里开始，到哪里结束。

Demo

在 https://developer.mozilla.org/zh-CN/docs/Web/API/Range/setEnd 这个页面的控制台输入并执行以下代码后，观察浏览器中的文本，它会呈现类似你用鼠标选中了一小段文字的效果。

dom = document.querySelector('#content > article > h1')
range = document.createRange()
range.setStart(dom.firstChild,6)
range.setEnd(dom.firstChild,12)
// 在浏览器中呈现选中效果
window.getSelection().addRange(range)

易错点

第一个参数是 node 节点，第二个是偏移量。

如果你是想选中一段文本的第几个字到第几个字，那你传入的第一个参数，不能只传入一个节点，而应该是具体的文本内容，比如在 https://developer.mozilla.org/zh-CN/docs/Web/API/Range/setEnd 这个页面你想选中以下内容：

你就不能这样子传参：

而是应该将节点下的具体文本节点传进去，如下：

参考

你还可以在以下地址找到本文：

• 语雀@blueju
• 掘金@blue ju
• CSDN@blue ju
• segmentfault@blueju
• 博客园@blueju