Range範圍選區的理解

simple-love發表於2024-10-18
<!--
 * @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>

相關文章