Range范围选区的理解 

<!--
 * @Date: 2024-10-14 10:02:56
 * @Description: Modify here please
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Range范围选区的理解</title>
    <style>
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
          "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        font-variant: tabular-nums;
      }
      .edit {
        width: 100%;
        min-height: 210px;
        overflow-x: hidden;
        border: none;
        outline: none;
        background-color: transparent;
        color: #333;
        font-size: 14px;
        white-space: pre-wrap;
        word-break: break-all;
      }
      p {
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <p style="margin-bottom: 20px"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Range/toString" target="_blank">Range文档</a></p>
    <div class="edit" contenteditable="true" spellcheck="true" id="edit">
      <p><span>123456789</span><span style="color: red">高亮啦</span><span>abcde</span></p>
    </div>

    <script>
      // Range 接口表示一个包含节点与文本节点的一部分的文档片段
      var range = document.createRange();
      // Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。
      var s = window.getSelection();

      var editRef = document.getElementById("edit");

      var spanNode1 = document.getElementsByTagName("span").item(0);

      var spanNode2 = document.getElementsByTagName("span").item(1);

      var spanNode3 = document.getElementsByTagName("span").item(2);

      /**
       * 1： 以其它节点为基准，来设置 Range 的起始点或者终点---  Api
       */
      /**
       * range.setStartBefore(referenceNode)方法用于将一个范围（range）的起始位置设置在指定的参考节点（referenceNode）之前。
       * 理解为：用于将某个节点的起点位置设置为range对象的起点位置。
       */
      // range.setStartBefore(spanNode1);

      /**
       * range.setStartAfter(referenceNode)方法用于将一个范围（range）的起始点设置在指定的参考节点（referenceNode）之后。
       * 理解为：用于将某个节点的终点位置设置为range对象的起点位置。
       */
      // range.setStartAfter(spanNode1);

      /**
       * range.setEndBefore(referenceNode)方法用于将一个范围（range）的结束位置设置在指定的参考节点（referenceNode）之前。
       * 理解为：用于将某个节点的起点位置设置为range对象的终点位置。
       */
      // range.setEndBefore(spanNode1);

      /**
       * range.setEndAfter(referenceNode)方法用于将一个范围（range）的结束位置设置在指定的参考节点（referenceNode）之后
       * 理解为：表示用于将某个节点的终点位置设置为range对象的终点位置。
       */
      // range.setEndAfter(spanNode1);

      /**
       * 2. 选中节点, 把range的开始和结束
       */
      /**
       * 2.1 此操作将会选中spanNode1节点
       */
      // range.setStartBefore(spanNode1);
      // range.setEndAfter(spanNode1);

      /**
       * 2.2 此操作将会选中spanNode2节点
       */
      // range.setStartAfter(spanNode1);
      // range.setEndBefore(spanNode3);

      /**
       * 3. 选中某个节点, 把光标设置为节点的开始或结束位置
       */
      // 选中某个节点
      // range.selectNode(spanNode1);
      /**
       * ‌range.collapse()方法可以将某一区域或所选内容折叠到起始位置或结束位置。‌ 折叠后，起始位置和结束位置会相同。
       * 一个布尔值： true 折叠到 Range 的 start 节点，false 折叠到 end 节点。如果省略，则默认为 false
       * 要确定 Range 是否已折叠，使用Range.collapsed 属性
       */
      // range.collapse(true);

      /**
       * 4. Range.setStart(startNode, startOffset)方法用于设置一个范围（Range）的起始位置。
          参数说明：
          startNode：指定范围起始位置所在的节点，可以是一个元素节点、文本节点等。
          startOffset：一个整数，表示在startNode中的字符偏移量。如果startNode是一个元素节点，偏移量表示子节点的索引；如果startNode是一个文本节点，偏移量表示字符位置。
      */
      // range.setStart(spanNode1.firstChild, 0);
      // range.setEnd(spanNode1.firstChild, 3);
      console.log(range);

      s.addRange(range);
    </script>
  </body>
</html>

 

posted @ 2024-10-18 23:03  simple-love  阅读(41)  评论(0)    收藏  举报