Range表示一个包含节点与文本节点的一部分文档片段

创建范围

var range = document.createRange()

Range属性

startContainer： 包含范围起点的节点（即选区中第一个节点的父节点）。
startOffset：范围的起点在startContainer中的位置。
endContainer： 包含范围终点的节点（即选区中最后一个节点的父节点）。
endOffset：范围的终点在endContainer中的位置。
commonAncestorContainer：返回完整包含 startContainer 和 endContainer 的最深一级的节点。

定位方法

setStart() 设置 Range 的起点。
range.setStart(startNode, startOffset)
startNode 用于设定 Range的起始位置。
startOffset 必须为不小于 0 的整数。表示从startNode的开始位置算起的偏移量。

setEnd() 设置 Range 的终点。
range.setEnd(endNode, endOffset)
endNode用于设定 Range的结束位置。
endOffset必须为不小于 0 的整数。表示从endNode的结束位置算起的偏移量。

setStartBefore() 以其它节点为基准，设置 Range 的起点。
range.setStartBefore(referenceNode)
setStartAfter() 以其它节点为基准，设置 Range 的起点。
range.setStartAfter(referenceNode)
setEndBefore() 以其它节点为基准，设置 Range 的终点。
range.setEndBefore(referenceNode)
Range.setEndAfter() 以其它节点为基准，设置 Range 的终点。
range.setEndAfter(referenceNode)
selectNode() 选择整个节点，包括其子节点。
range.selectNode(referenceNode)
selectNodeContents() 只选择节点的子节点。
range.selectNodeContents(referenceNode)
collapse() 将 Range 折叠至其端点（boundary points，起止点，指起点或终点）之一。
range.collapse(toStart)
toStart 一个布尔值： true 折叠到 Range 的 start 节点，false 折叠到 end 节点。如果省略，则默认为 false

编辑方法

通过以下方法，可以从 Range 中获得节点，改变 Range 的内容。
Range.deleteContents() 从文档中移除 Range 包含的内容。
Range.cloneContents() 返回一个包含 Range 中所有节点的文档片段。

与extractContents()的区别在于cloneContents() 返回的文档片段包含的是范围中节点的副本，而不是实际的节点。

Range.extractContents() 把 Range 的内容从文档树移动到一个文档片段中。
Range.insertNode() 在 Range 的起点处插入一个节点。
Range.surroundContents() 将 Range 的内容移动到一个新的节点中。

  1. <body>
  2.   <p id="p1"><b>Hello</b>world</p>
  3. </body>
  1. var p1 = document.getElementById('p1'),
  2.     helloNode = p1.firstChild.firstChild,
  3.     worldNode = p1.lastChild;
  4. const range = document.createRange();
  5. range.setStart(helloNode,2);
  6. range.setEnd(worldNode,3);
  8. range.deleteContents()
  9. // 执行后DOM结构变为：<p><b>He</b>ld</P>
  1. var p1 = document.getElementById('p1'),
  2.     helloNode = p1.firstChild.firstChild,
  3.     worldNode = p1.lastChild;
  4. const range = document.createRange();
  5. range.setStart(helloNode,2);
  6. range.setEnd(worldNode,3);
  8. var fragment = range.extractContents();
  9. p1.parentNode.appendChild(fragment);
  10. // 执行后DOM结构变为：
  11. // <p><b>He</b>rld</p>
  12. // <b>llo</b>wor
  1. var p1 = document.getElementById('p1'),
  2.     helloNode = p1.firstChild.firstChild,
  3.     worldNode = p1.lastChild;
  4. const range = document.createRange();
  5. range.setStart(helloNode,2);
  6. range.setEnd(worldNode,3);
  8. var span = document.createElement("span");
  9. span.style.color = "red";
  10. span.appendChild(document.createTextNode("Inserted text"));
  12. range.insertNode(span);
  13. // 执行后DOM结构变为：<p><b>He<span style="color:red">Inserted text</span>llo</b>world</p>
  1. var p1 = document.getElementById('p1'),
  2.     helloNode = p1.firstChild.firstChild,
  3.     worldNode = p1.lastChild;
  4. const range = document.createRange();
  5. range.selectNode(helloNode);
  6. var span = document.createElement("span");
  7. span.style.backgroundColor = "yellow";
  9. range.surroundContents(span);
  10. // 执行后DOM结构变为：
  11. // <p><b><span style="background-color:yellow">Hello</span>llo</b>world</p>

获取用户选中的文本范围

const selection = window.getSelection()// 等同于document.getSelection

返回的是一个Selection对象，若要转换为字符串，可以使用selection.join(“”)或者使用selection.toString()方法