Kiểm tra xem văn bản có được chọn không JavaScript

Chọn các phần tử thường có hai giá trị mà bạn muốn truy cập. Đầu tiên, có giá trị được gửi đến máy chủ, điều này thật dễ dàng

1

2

$( "#myselect" ).val();
// => 1

Thứ hai là giá trị văn bản của lựa chọn. Ví dụ: sử dụng hộp chọn sau

1

2

3

4

5

6

7

<select id="myselect">
    <option value="1">Mr</option>
    <option value="2">Mrs</option>
    <option value="3">Ms</option>
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>

Nếu bạn muốn lấy chuỗi "Mr" nếu tùy chọn đầu tiên được chọn (thay vì chỉ "1") bạn sẽ thực hiện theo cách sau

Trong chương này, chúng ta sẽ đề cập đến lựa chọn trong tài liệu, cũng như lựa chọn trong các trường biểu mẫu, chẳng hạn như

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

JavaScript có thể truy cập một lựa chọn hiện có, chọn/bỏ chọn toàn bộ hoặc một phần các nút DOM, xóa nội dung đã chọn khỏi tài liệu, gói nội dung đó vào một thẻ, v.v.

Bạn có thể tìm thấy một số công thức cho các nhiệm vụ phổ biến ở cuối chương, trong phần “Tóm tắt”. Có thể điều đó đáp ứng nhu cầu hiện tại của bạn, nhưng bạn sẽ nhận được nhiều hơn thế nếu bạn đọc toàn bộ văn bản

Các đối tượng

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Khái niệm cơ bản của lựa chọn là, đó thực chất là một cặp “điểm biên”. phạm vi bắt đầu và phạm vi kết thúc

Một đối tượng

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

let range = new Range();

Sau đó, chúng ta có thể đặt ranh giới lựa chọn bằng cách sử dụng

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Như bạn có thể đoán, hơn nữa chúng ta sẽ sử dụng các đối tượng

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Điều thú vị là đối số đầu tiên

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Nếu

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Ví dụ, với phần tử

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p, 0);
  range.setEnd(p, 2);

  // toString of a range returns its content as text, without tags
  console.log(range); // Example: italic

  // apply this range for document selection (explained later below)
  document.getSelection().addRange(range);
</script>

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

Ở đây, chúng tôi chọn con đầu tiên của

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p, 0);
  range.setEnd(p, 2);

  // toString of a range returns its content as text, without tags
  console.log(range); // Example: italic

  // apply this range for document selection (explained later below)
  document.getSelection().addRange(range);
</script>

Ngoài ra, nếu

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Điều đó rất hữu ích để tạo các phạm vi chứa toàn bộ các nút, không dừng ở đâu đó bên trong văn bản của chúng

Ví dụ: chúng tôi có một đoạn tài liệu phức tạp hơn

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Đây là cấu trúc DOM của nó với cả nút phần tử và nút văn bản

Hãy tạo một phạm vi cho

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p, 0);
  range.setEnd(p, 2);

  // toString of a range returns its content as text, without tags
  console.log(range); // Example: italic

  // apply this range for document selection (explained later below)
  document.getSelection().addRange(range);
</script>

Như chúng ta có thể thấy, cụm từ này bao gồm chính xác hai con của

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p, 0);
  range.setEnd(p, 2);

  // toString of a range returns its content as text, without tags
  console.log(range); // Example: italic

  // apply this range for document selection (explained later below)
  document.getSelection().addRange(range);
</script>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p, 0);
  range.setEnd(p, 2);

  // toString of a range returns its content as text, without tags
  console.log(range); // Example: italic

  // apply this range for document selection (explained later below)
  document.getSelection().addRange(range);
</script>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p, 0);
  range.setEnd(p, 2);

  // toString of a range returns its content as text, without tags
  console.log(range); // Example: italic

  // apply this range for document selection (explained later below)
  document.getSelection().addRange(range);
</script>

• Điểm bắt đầu có

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <script>
    let range = new Range();
  
    range.setStart(p, 0);
    range.setEnd(p, 2);
  
    // toString of a range returns its content as text, without tags
    console.log(range); // Example: italic
  
    // apply this range for document selection (explained later below)
    document.getSelection().addRange(range);
  </script>

  1 là cha mẹ

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7 và

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <script>
    let range = new Range();
  
    range.setStart(p, 0);
    range.setEnd(p, 2);
  
    // toString of a range returns its content as text, without tags
    console.log(range); // Example: italic
  
    // apply this range for document selection (explained later below)
    document.getSelection().addRange(range);
  </script>

  6 là phần bù

  Vì vậy, chúng tôi có thể đặt nó là

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  From <input id="start" type="number" value=1> – To <input id="end" type="number" value=4>
  <button id="button">Click to select</button>
  <script>
    button.onclick = () => {
      let range = new Range();
  
      range.setStart(p, start.value);
      range.setEnd(p, end.value);
  
      // apply the selection, explained later below
      document.getSelection().removeAllRanges();
      document.getSelection().addRange(range);
    };
  </script>

  1

• Điểm kết thúc cũng có

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <script>
    let range = new Range();
  
    range.setStart(p, 0);
    range.setEnd(p, 2);
  
    // toString of a range returns its content as text, without tags
    console.log(range); // Example: italic
  
    // apply this range for document selection (explained later below)
    document.getSelection().addRange(range);
  </script>

  1 là gốc

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7, nhưng

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  From <input id="start" type="number" value=1> – To <input id="end" type="number" value=4>
  <button id="button">Click to select</button>
  <script>
    button.onclick = () => {
      let range = new Range();
  
      range.setStart(p, start.value);
      range.setEnd(p, end.value);
  
      // apply the selection, explained later below
      document.getSelection().removeAllRanges();
      document.getSelection().addRange(range);
    };
  </script>

  4 là phần bù (nó chỉ định phạm vi lên tới, nhưng không bao gồm

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  9)

  Vì vậy, chúng tôi có thể đặt nó là

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  From <input id="start" type="number" value=1> – To <input id="end" type="number" value=4>
  <button id="button">Click to select</button>
  <script>
    button.onclick = () => {
      let range = new Range();
  
      range.setStart(p, start.value);
      range.setEnd(p, end.value);
  
      // apply the selection, explained later below
      document.getSelection().removeAllRanges();
      document.getSelection().addRange(range);
    };
  </script>

  6

Đây là bản demo. Nếu bạn chạy nó, bạn có thể thấy văn bản được chọn

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p, 0);
  range.setEnd(p, 2);

  // toString of a range returns its content as text, without tags
  console.log(range); // Example: italic

  // apply this range for document selection (explained later below)
  document.getSelection().addRange(range);
</script>

Đây là một giá thử nghiệm linh hoạt hơn, nơi bạn có thể đặt số bắt đầu/kết thúc phạm vi và khám phá các biến thể khác

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

From <input id="start" type="number" value=1> – To <input id="end" type="number" value=4>
<button id="button">Click to select</button>
<script>
  button.onclick = () => {
    let range = new Range();

    range.setStart(p, start.value);
    range.setEnd(p, end.value);

    // apply the selection, explained later below
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(range);
  };
</script>

E. g. chọn trong cùng một

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p, 0);
  range.setEnd(p, 2);

  // toString of a range returns its content as text, without tags
  console.log(range); // Example: italic

  // apply this range for document selection (explained later below)
  document.getSelection().addRange(range);
</script>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p, 0);
  range.setEnd(p, 2);

  // toString of a range returns its content as text, without tags
  console.log(range); // Example: italic

  // apply this range for document selection (explained later below)
  document.getSelection().addRange(range);
</script>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

From <input id="start" type="number" value=1> – To <input id="end" type="number" value=4>
<button id="button">Click to select</button>
<script>
  button.onclick = () => {
    let range = new Range();

    range.setStart(p, start.value);
    range.setEnd(p, end.value);

    // apply the selection, explained later below
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(range);
  };
</script>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p.firstChild, 2);
  range.setEnd(p.querySelector('b').firstChild, 3);

  console.log(range); // ample: italic and bol

  // use this range for selection (explained later)
  window.getSelection().addRange(range);
</script>

Các nút bắt đầu và kết thúc có thể khác nhau

Chúng tôi không phải sử dụng cùng một nút trong

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p.firstChild, 2);
  range.setEnd(p.querySelector('b').firstChild, 3);

  console.log(range); // ample: italic and bol

  // use this range for selection (explained later)
  window.getSelection().addRange(range);
</script>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p.firstChild, 2);
  range.setEnd(p.querySelector('b').firstChild, 3);

  console.log(range); // ample: italic and bol

  // use this range for selection (explained later)
  window.getSelection().addRange(range);
</script>

Hãy tạo một vùng chọn lớn hơn trong ví dụ của chúng ta, như thế này

Chúng tôi đã biết làm thế nào để làm điều đó. Chúng ta chỉ cần đặt phần đầu và phần cuối làm phần bù tương đối trong các nút văn bản

Chúng ta cần phải tạo ra một phạm vi, mà

• bắt đầu từ vị trí thứ 2 trong

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <script>
    let range = new Range();
  
    range.setStart(p, 0);
    range.setEnd(p, 2);
  
    // toString of a range returns its content as text, without tags
    console.log(range); // Example: italic
  
    // apply this range for document selection (explained later below)
    document.getSelection().addRange(range);
  </script>

  1 con đầu lòng (lấy tất cả trừ hai chữ cái đầu của "Ví dụ. ")
• kết thúc ở vị trí thứ 3 trong

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <script>
    let range = new Range();
  
    range.setStart(p.firstChild, 2);
    range.setEnd(p.querySelector('b').firstChild, 3);
  
    console.log(range); // ample: italic and bol
  
    // use this range for selection (explained later)
    window.getSelection().addRange(range);
  </script>

  4 con đầu lòng (lấy ba chữ cái đầu tiên của chữ “đậm”, nhưng không nhiều hơn)

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p.firstChild, 2);
  range.setEnd(p.querySelector('b').firstChild, 3);

  console.log(range); // ample: italic and bol

  // use this range for selection (explained later)
  window.getSelection().addRange(range);
</script>

Như bạn có thể thấy, khá dễ dàng để tạo ra một loạt bất cứ thứ gì chúng ta muốn

Nếu chúng tôi muốn lấy toàn bộ các nút, chúng tôi có thể chuyển các phần tử trong

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p.firstChild, 2);
  range.setEnd(p.querySelector('b').firstChild, 3);

  console.log(range); // ample: italic and bol

  // use this range for selection (explained later)
  window.getSelection().addRange(range);
</script>

Đối tượng phạm vi mà chúng tôi đã tạo trong ví dụ trên có các thuộc tính sau

• <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <script>
    let range = new Range();
  
    range.setStart(p.firstChild, 2);
    range.setEnd(p.querySelector('b').firstChild, 3);
  
    console.log(range); // ample: italic and bol
  
    // use this range for selection (explained later)
    window.getSelection().addRange(range);
  </script>

  6,

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <script>
    let range = new Range();
  
    range.setStart(p.firstChild, 2);
    range.setEnd(p.querySelector('b').firstChild, 3);
  
    console.log(range); // ample: italic and bol
  
    // use this range for selection (explained later)
    window.getSelection().addRange(range);
  </script>

  7 – nút và phần bù của điểm bắt đầu,
  • trong ví dụ trên. nút văn bản đầu tiên bên trong

    <p id="p">Example: <i>italic</i> and <b>bold</b></p>
    
    <script>
      let range = new Range();
    
      range.setStart(p, 0);
      range.setEnd(p, 2);
    
      // toString of a range returns its content as text, without tags
      console.log(range); // Example: italic
    
      // apply this range for document selection (explained later below)
      document.getSelection().addRange(range);
    </script>

    1 và

    <p id="p">Example: <i>italic</i> and <b>bold</b></p>
    
    From <input id="start" type="number" value=1> – To <input id="end" type="number" value=4>
    <button id="button">Click to select</button>
    <script>
      button.onclick = () => {
        let range = new Range();
    
        range.setStart(p, start.value);
        range.setEnd(p, end.value);
    
        // apply the selection, explained later below
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(range);
      };
    </script>

    4

• Click buttons to run methods on the selection, "resetExample" to reset it.
  
  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <p id="result"></p>
  <script>
    let range = new Range();
  
    // Each demonstrated method is represented here:
    let methods = {
      deleteContents() {
        range.deleteContents()
      },
      extractContents() {
        let content = range.extractContents();
        result.innerHTML = "";
        result.append("extracted: ", content);
      },
      cloneContents() {
        let content = range.cloneContents();
        result.innerHTML = "";
        result.append("cloned: ", content);
      },
      insertNode() {
        let newNode = document.createElement('u');
        newNode.innerHTML = "NEW NODE";
        range.insertNode(newNode);
      },
      surroundContents() {
        let newNode = document.createElement('u');
        try {
          range.surroundContents(newNode);
        } catch(e) { console.log(e) }
      },
      resetExample() {
        p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
        result.innerHTML = "";
  
        range.setStart(p.firstChild, 2);
        range.setEnd(p.querySelector('b').firstChild, 3);
  
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
      }
    };
  
    for(let method in methods) {
      document.write(`<div><button onclick="methods.${method}()">${method}</button></div>`);
    }
  
    methods.resetExample();
  </script>

  0,

  Click buttons to run methods on the selection, "resetExample" to reset it.
  
  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <p id="result"></p>
  <script>
    let range = new Range();
  
    // Each demonstrated method is represented here:
    let methods = {
      deleteContents() {
        range.deleteContents()
      },
      extractContents() {
        let content = range.extractContents();
        result.innerHTML = "";
        result.append("extracted: ", content);
      },
      cloneContents() {
        let content = range.cloneContents();
        result.innerHTML = "";
        result.append("cloned: ", content);
      },
      insertNode() {
        let newNode = document.createElement('u');
        newNode.innerHTML = "NEW NODE";
        range.insertNode(newNode);
      },
      surroundContents() {
        let newNode = document.createElement('u');
        try {
          range.surroundContents(newNode);
        } catch(e) { console.log(e) }
      },
      resetExample() {
        p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
        result.innerHTML = "";
  
        range.setStart(p.firstChild, 2);
        range.setEnd(p.querySelector('b').firstChild, 3);
  
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
      }
    };
  
    for(let method in methods) {
      document.write(`<div><button onclick="methods.${method}()">${method}</button></div>`);
    }
  
    methods.resetExample();
  </script>

  1 – nút và phần bù của phần cuối,
  • trong ví dụ trên. nút văn bản đầu tiên bên trong

    <p id="p">Example: <i>italic</i> and <b>bold</b></p>
    
    <script>
      let range = new Range();
    
      range.setStart(p.firstChild, 2);
      range.setEnd(p.querySelector('b').firstChild, 3);
    
      console.log(range); // ample: italic and bol
    
      // use this range for selection (explained later)
      window.getSelection().addRange(range);
    </script>

    4 và

    Click buttons to run methods on the selection, "resetExample" to reset it.
    
    <p id="p">Example: <i>italic</i> and <b>bold</b></p>
    
    <p id="result"></p>
    <script>
      let range = new Range();
    
      // Each demonstrated method is represented here:
      let methods = {
        deleteContents() {
          range.deleteContents()
        },
        extractContents() {
          let content = range.extractContents();
          result.innerHTML = "";
          result.append("extracted: ", content);
        },
        cloneContents() {
          let content = range.cloneContents();
          result.innerHTML = "";
          result.append("cloned: ", content);
        },
        insertNode() {
          let newNode = document.createElement('u');
          newNode.innerHTML = "NEW NODE";
          range.insertNode(newNode);
        },
        surroundContents() {
          let newNode = document.createElement('u');
          try {
            range.surroundContents(newNode);
          } catch(e) { console.log(e) }
        },
        resetExample() {
          p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
          result.innerHTML = "";
    
          range.setStart(p.firstChild, 2);
          range.setEnd(p.querySelector('b').firstChild, 3);
    
          window.getSelection().removeAllRanges();
          window.getSelection().addRange(range);
        }
      };
    
      for(let method in methods) {
        document.write(`<div><button onclick="methods.${method}()">${method}</button></div>`);
      }
    
      methods.resetExample();
    </script>

    3

• Click buttons to run methods on the selection, "resetExample" to reset it.
  
  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <p id="result"></p>
  <script>
    let range = new Range();
  
    // Each demonstrated method is represented here:
    let methods = {
      deleteContents() {
        range.deleteContents()
      },
      extractContents() {
        let content = range.extractContents();
        result.innerHTML = "";
        result.append("extracted: ", content);
      },
      cloneContents() {
        let content = range.cloneContents();
        result.innerHTML = "";
        result.append("cloned: ", content);
      },
      insertNode() {
        let newNode = document.createElement('u');
        newNode.innerHTML = "NEW NODE";
        range.insertNode(newNode);
      },
      surroundContents() {
        let newNode = document.createElement('u');
        try {
          range.surroundContents(newNode);
        } catch(e) { console.log(e) }
      },
      resetExample() {
        p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
        result.innerHTML = "";
  
        range.setStart(p.firstChild, 2);
        range.setEnd(p.querySelector('b').firstChild, 3);
  
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
      }
    };
  
    for(let method in methods) {
      document.write(`<div><button onclick="methods.${method}()">${method}</button></div>`);
    }
  
    methods.resetExample();
  </script>

  4 – boolean,

  Click buttons to run methods on the selection, "resetExample" to reset it.
  
  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <p id="result"></p>
  <script>
    let range = new Range();
  
    // Each demonstrated method is represented here:
    let methods = {
      deleteContents() {
        range.deleteContents()
      },
      extractContents() {
        let content = range.extractContents();
        result.innerHTML = "";
        result.append("extracted: ", content);
      },
      cloneContents() {
        let content = range.cloneContents();
        result.innerHTML = "";
        result.append("cloned: ", content);
      },
      insertNode() {
        let newNode = document.createElement('u');
        newNode.innerHTML = "NEW NODE";
        range.insertNode(newNode);
      },
      surroundContents() {
        let newNode = document.createElement('u');
        try {
          range.surroundContents(newNode);
        } catch(e) { console.log(e) }
      },
      resetExample() {
        p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
        result.innerHTML = "";
  
        range.setStart(p.firstChild, 2);
        range.setEnd(p.querySelector('b').firstChild, 3);
  
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
      }
    };
  
    for(let method in methods) {
      document.write(`<div><button onclick="methods.${method}()">${method}</button></div>`);
    }
  
    methods.resetExample();
  </script>

  5 nếu phạm vi bắt đầu và kết thúc tại cùng một điểm (vì vậy không có nội dung bên trong phạm vi),
  • trong ví dụ trên.

    Click buttons to run methods on the selection, "resetExample" to reset it.
    
    <p id="p">Example: <i>italic</i> and <b>bold</b></p>
    
    <p id="result"></p>
    <script>
      let range = new Range();
    
      // Each demonstrated method is represented here:
      let methods = {
        deleteContents() {
          range.deleteContents()
        },
        extractContents() {
          let content = range.extractContents();
          result.innerHTML = "";
          result.append("extracted: ", content);
        },
        cloneContents() {
          let content = range.cloneContents();
          result.innerHTML = "";
          result.append("cloned: ", content);
        },
        insertNode() {
          let newNode = document.createElement('u');
          newNode.innerHTML = "NEW NODE";
          range.insertNode(newNode);
        },
        surroundContents() {
          let newNode = document.createElement('u');
          try {
            range.surroundContents(newNode);
          } catch(e) { console.log(e) }
        },
        resetExample() {
          p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
          result.innerHTML = "";
    
          range.setStart(p.firstChild, 2);
          range.setEnd(p.querySelector('b').firstChild, 3);
    
          window.getSelection().removeAllRanges();
          window.getSelection().addRange(range);
        }
      };
    
      for(let method in methods) {
        document.write(`<div><button onclick="methods.${method}()">${method}</button></div>`);
      }
    
      methods.resetExample();
    </script>

    6

• Click buttons to run methods on the selection, "resetExample" to reset it.
  
  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <p id="result"></p>
  <script>
    let range = new Range();
  
    // Each demonstrated method is represented here:
    let methods = {
      deleteContents() {
        range.deleteContents()
      },
      extractContents() {
        let content = range.extractContents();
        result.innerHTML = "";
        result.append("extracted: ", content);
      },
      cloneContents() {
        let content = range.cloneContents();
        result.innerHTML = "";
        result.append("cloned: ", content);
      },
      insertNode() {
        let newNode = document.createElement('u');
        newNode.innerHTML = "NEW NODE";
        range.insertNode(newNode);
      },
      surroundContents() {
        let newNode = document.createElement('u');
        try {
          range.surroundContents(newNode);
        } catch(e) { console.log(e) }
      },
      resetExample() {
        p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
        result.innerHTML = "";
  
        range.setStart(p.firstChild, 2);
        range.setEnd(p.querySelector('b').firstChild, 3);
  
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
      }
    };
  
    for(let method in methods) {
      document.write(`<div><button onclick="methods.${method}()">${method}</button></div>`);
    }
  
    methods.resetExample();
  </script>

  7 – tổ tiên chung gần nhất của tất cả các nút trong phạm vi,
  • trong ví dụ trên.

    <p id="p">Example: <i>italic</i> and <b>bold</b></p>
    
    <script>
      let range = new Range();
    
      range.setStart(p, 0);
      range.setEnd(p, 2);
    
      // toString of a range returns its content as text, without tags
      console.log(range); // Example: italic
    
      // apply this range for document selection (explained later below)
      document.getSelection().addRange(range);
    </script>

    1

Có nhiều phương pháp thuận tiện để thao tác phạm vi

Chúng ta đã thấy

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p.firstChild, 2);
  range.setEnd(p.querySelector('b').firstChild, 3);

  console.log(range); // ample: italic and bol

  // use this range for selection (explained later)
  window.getSelection().addRange(range);
</script>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p.firstChild, 2);
  range.setEnd(p.querySelector('b').firstChild, 3);

  console.log(range); // ample: italic and bol

  // use this range for selection (explained later)
  window.getSelection().addRange(range);
</script>

Đặt phạm vi bắt đầu

• <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  From <input id="from" disabled> – To <input id="to" disabled>
  <script>
    document.onselectionchange = function() {
      let selection = document.getSelection();
  
      let {anchorNode, anchorOffset, focusNode, focusOffset} = selection;
  
      // anchorNode and focusNode are text nodes usually
      from.value = `${anchorNode?.data}, offset ${anchorOffset}`;
      to.value = `${focusNode?.data}, offset ${focusOffset}`;
    };
  </script>

  1 bắt đầu lúc. vị trí

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  9 trong

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7

• <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  From <input id="from" disabled> – To <input id="to" disabled>
  <script>
    document.onselectionchange = function() {
      let selection = document.getSelection();
  
      let {anchorNode, anchorOffset, focusNode, focusOffset} = selection;
  
      // anchorNode and focusNode are text nodes usually
      from.value = `${anchorNode?.data}, offset ${anchorOffset}`;
      to.value = `${focusNode?.data}, offset ${focusOffset}`;
    };
  </script>

  4 bắt đầu lúc. ngay trước

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7

• <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  From <input id="from" disabled> – To <input id="to" disabled>
  <script>
    document.onselectionchange = function() {
      let selection = document.getSelection();
  
      let {anchorNode, anchorOffset, focusNode, focusOffset} = selection;
  
      // anchorNode and focusNode are text nodes usually
      from.value = `${anchorNode?.data}, offset ${anchorOffset}`;
      to.value = `${focusNode?.data}, offset ${focusOffset}`;
    };
  </script>

  6 bắt đầu lúc. ngay sau khi

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7

Đặt phạm vi kết thúc (phương pháp tương tự)

• <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  From <input id="from" disabled> – To <input id="to" disabled>
  <script>
    document.onselectionchange = function() {
      let selection = document.getSelection();
  
      let {anchorNode, anchorOffset, focusNode, focusOffset} = selection;
  
      // anchorNode and focusNode are text nodes usually
      from.value = `${anchorNode?.data}, offset ${anchorOffset}`;
      to.value = `${focusNode?.data}, offset ${focusOffset}`;
    };
  </script>

  8 đặt kết thúc tại. vị trí

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  9 trong

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7

• <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  Cloned: <span id="cloned"></span>
  <br>
  As text: <span id="astext"></span>
  
  <script>
    document.onselectionchange = function() {
      let selection = document.getSelection();
  
      cloned.innerHTML = astext.innerHTML = "";
  
      // Clone DOM nodes from ranges (we support multiselect here)
      for (let i = 0; i < selection.rangeCount; i++) {
        cloned.append(selection.getRangeAt(i).cloneContents());
      }
  
      // Get as text
      astext.innerHTML += selection;
    };
  </script>

  1 kết thúc tại. ngay trước

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7

• <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  Cloned: <span id="cloned"></span>
  <br>
  As text: <span id="astext"></span>
  
  <script>
    document.onselectionchange = function() {
      let selection = document.getSelection();
  
      cloned.innerHTML = astext.innerHTML = "";
  
      // Clone DOM nodes from ranges (we support multiselect here)
      for (let i = 0; i < selection.rangeCount; i++) {
        cloned.append(selection.getRangeAt(i).cloneContents());
      }
  
      // Get as text
      astext.innerHTML += selection;
    };
  </script>

  3 kết thúc tại. ngay sau khi

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7

Về mặt kỹ thuật,

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p.firstChild, 2);
  range.setEnd(p.querySelector('b').firstChild, 3);

  console.log(range); // ample: italic and bol

  // use this range for selection (explained later)
  window.getSelection().addRange(range);
</script>

Trong tất cả các phương thức này,

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Thậm chí nhiều phương pháp hơn để tạo phạm vi

• <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  Cloned: <span id="cloned"></span>
  <br>
  As text: <span id="astext"></span>
  
  <script>
    document.onselectionchange = function() {
      let selection = document.getSelection();
  
      cloned.innerHTML = astext.innerHTML = "";
  
      // Clone DOM nodes from ranges (we support multiselect here)
      for (let i = 0; i < selection.rangeCount; i++) {
        cloned.append(selection.getRangeAt(i).cloneContents());
      }
  
      // Get as text
      astext.innerHTML += selection;
    };
  </script>

  8 thiết lập phạm vi để chọn toàn bộ

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7
• Phạm vi thiết lập

  <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  <script>
    // select from 0th child of <p> to the last child
    document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length);
  </script>

  0 để chọn toàn bộ nội dung của

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7

• <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  <script>
    // select from 0th child of <p> to the last child
    document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length);
  </script>

  2 nếu

  <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  <script>
    // select from 0th child of <p> to the last child
    document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length);
  </script>

  3 đặt kết thúc=bắt đầu, nếu không thì đặt bắt đầu=kết thúc, do đó thu gọn phạm vi

• <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  <script>
    // select from 0th child of <p> to the last child
    document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length);
  </script>

  4 tạo một phạm vi mới có cùng điểm bắt đầu/kết thúc

Khi phạm vi được tạo, chúng ta có thể thao tác nội dung của nó bằng các phương thức này

• <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  <script>
    // select from 0th child of <p> to the last child
    document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length);
  </script>

  5 – xóa nội dung phạm vi khỏi tài liệu

• <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  <script>
    // select from 0th child of <p> to the last child
    document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length);
  </script>

  6 – xóa nội dung phạm vi khỏi tài liệu và trả về dưới dạng

• <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  <script>
    // select from 0th child of <p> to the last child
    document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length);
  </script>

  7 – sao chép nội dung phạm vi và trả về dưới dạng

• <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
  
  <script>
    // select from 0th child of <p> to the last child
    document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length);
  </script>

  8 – chèn

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7 vào tài liệu ở đầu phạm vi

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  00 – quấn

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7 xung quanh nội dung phạm vi. Để điều này hoạt động, phạm vi phải chứa cả thẻ mở và thẻ đóng cho tất cả các phần tử bên trong nó. không có phạm vi một phần như

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  02

Với những phương pháp này, về cơ bản chúng ta có thể làm bất cứ điều gì với các nút đã chọn

Đây là giá đỡ thử nghiệm để xem chúng hoạt động

Click buttons to run methods on the selection, "resetExample" to reset it.

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="result"></p>
<script>
  let range = new Range();

  // Each demonstrated method is represented here:
  let methods = {
    deleteContents() {
      range.deleteContents()
    },
    extractContents() {
      let content = range.extractContents();
      result.innerHTML = "";
      result.append("extracted: ", content);
    },
    cloneContents() {
      let content = range.cloneContents();
      result.innerHTML = "";
      result.append("cloned: ", content);
    },
    insertNode() {
      let newNode = document.createElement('u');
      newNode.innerHTML = "NEW NODE";
      range.insertNode(newNode);
    },
    surroundContents() {
      let newNode = document.createElement('u');
      try {
        range.surroundContents(newNode);
      } catch(e) { console.log(e) }
    },
    resetExample() {
      p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
      result.innerHTML = "";

      range.setStart(p.firstChild, 2);
      range.setEnd(p.querySelector('b').firstChild, 3);

      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  };

  for(let method in methods) {
    document.write(`<div><button onclick="methods.${method}()">${method}</button></div>`);
  }

  methods.resetExample();
</script>

Cũng tồn tại các phương pháp để so sánh các phạm vi, nhưng chúng hiếm khi được sử dụng. Khi bạn cần chúng, vui lòng tham khảo hướng dẫn hoặc MDN

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Chúng tôi có thể tạo

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Việc lựa chọn tài liệu được đại diện bởi đối tượng

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

Đây là ảnh chụp màn hình của vùng chọn có 3 phạm vi, được tạo trên Firefox

Các trình duyệt khác hỗ trợ tối đa 1 phạm vi. Như chúng ta sẽ thấy, một số phương pháp

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Đây là một bản trình diễn nhỏ hiển thị lựa chọn hiện tại (chọn thứ gì đó và nhấp) dưới dạng văn bản

cảnh báo (tài liệu. getSelection())

Như đã nói, về lý thuyết, một vùng chọn có thể chứa nhiều phạm vi. Chúng ta có thể lấy các đối tượng phạm vi này bằng phương thức

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  10 – lấy phạm vi thứ i, bắt đầu từ

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <script>
    let range = new Range();
  
    range.setStart(p, 0);
    range.setEnd(p, 2);
  
    // toString of a range returns its content as text, without tags
    console.log(range); // Example: italic
  
    // apply this range for document selection (explained later below)
    document.getSelection().addRange(range);
  </script>

  6. Trong tất cả các trình duyệt ngoại trừ Firefox, chỉ có

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <script>
    let range = new Range();
  
    range.setStart(p, 0);
    range.setEnd(p, 2);
  
    // toString of a range returns its content as text, without tags
    console.log(range); // Example: italic
  
    // apply this range for document selection (explained later below)
    document.getSelection().addRange(range);
  </script>

  6 được sử dụng

Ngoài ra, tồn tại các thuộc tính thường mang lại sự thuận tiện tốt hơn

Tương tự như một phạm vi, một đối tượng lựa chọn có phần đầu, được gọi là "neo" và phần cuối, được gọi là "tiêu điểm"

Các thuộc tính lựa chọn chính là

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  13 – nút bắt đầu lựa chọn,

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  14 – phần bù trong

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  13 nơi bắt đầu lựa chọn,

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  16 – nút nơi lựa chọn kết thúc,

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  17 – phần bù trong

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  16 khi lựa chọn kết thúc,

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  19 –

  Click buttons to run methods on the selection, "resetExample" to reset it.
  
  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <p id="result"></p>
  <script>
    let range = new Range();
  
    // Each demonstrated method is represented here:
    let methods = {
      deleteContents() {
        range.deleteContents()
      },
      extractContents() {
        let content = range.extractContents();
        result.innerHTML = "";
        result.append("extracted: ", content);
      },
      cloneContents() {
        let content = range.cloneContents();
        result.innerHTML = "";
        result.append("cloned: ", content);
      },
      insertNode() {
        let newNode = document.createElement('u');
        newNode.innerHTML = "NEW NODE";
        range.insertNode(newNode);
      },
      surroundContents() {
        let newNode = document.createElement('u');
        try {
          range.surroundContents(newNode);
        } catch(e) { console.log(e) }
      },
      resetExample() {
        p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
        result.innerHTML = "";
  
        range.setStart(p.firstChild, 2);
        range.setEnd(p.querySelector('b').firstChild, 3);
  
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
      }
    };
  
    for(let method in methods) {
      document.write(`<div><button onclick="methods.${method}()">${method}</button></div>`);
    }
  
    methods.resetExample();
  </script>

  5 nếu lựa chọn không chọn gì (phạm vi trống) hoặc không tồn tại

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  21 – số phạm vi trong lựa chọn, tối đa

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <script>
    let range = new Range();
  
    range.setStart(p, 0);
    range.setEnd(p, 2);
  
    // toString of a range returns its content as text, without tags
    console.log(range); // Example: italic
  
    // apply this range for document selection (explained later below)
    document.getSelection().addRange(range);
  </script>

  7 trong tất cả các trình duyệt ngoại trừ Firefox

Lựa chọn kết thúc/bắt đầu so với Phạm vi

Có một sự khác biệt quan trọng của điểm neo/tiêu điểm lựa chọn so với điểm bắt đầu/kết thúc của

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Như chúng ta đã biết,

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Đối với các lựa chọn, không phải lúc nào cũng vậy

Chọn thứ gì đó bằng chuột có thể được thực hiện theo cả hai hướng. “từ trái sang phải” hoặc “từ phải sang trái”

Nói cách khác, khi nút chuột được nhấn và sau đó nó di chuyển về phía trước trong tài liệu, thì điểm kết thúc (tiêu điểm) của nó sẽ ở sau điểm bắt đầu (điểm neo)

E. g. nếu người dùng bắt đầu chọn bằng chuột và chuyển từ “Ví dụ” sang “in nghiêng”

…Nhưng cùng một lựa chọn có thể được thực hiện ngược lại. bắt đầu từ “in nghiêng” đến “Ví dụ” (hướng ngược), sau đó phần cuối của nó (tiêu điểm) sẽ ở trước phần bắt đầu (neo)

Có các sự kiện để theo dõi lựa chọn

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  25 – khi một lựa chọn bắt đầu cụ thể trên phần tử

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  26 (hoặc bên trong nó). Chẳng hạn, khi người dùng nhấn nút chuột vào nó và bắt đầu di chuyển con trỏ
  • Ngăn chặn hành động mặc định hủy bỏ lựa chọn bắt đầu. Vì vậy, bắt đầu lựa chọn từ phần tử này trở nên không thể, nhưng phần tử vẫn có thể chọn được. Khách truy cập chỉ cần bắt đầu lựa chọn từ nơi khác

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  27 – bất cứ khi nào lựa chọn thay đổi hoặc bắt đầu
  • Xin lưu ý. trình xử lý này chỉ có thể được đặt trên

    <p id="p">Hello</p>
    <script>
      let range = new Range();
      range.setStart(p.firstChild, 2);
      range.setEnd(p.firstChild, 4);
    
      // toString of a range returns its content as text
      console.log(range); // ll
    </script>

    28, nó theo dõi tất cả các lựa chọn trong đó

Đây là một bản demo nhỏ. Nó theo dõi lựa chọn hiện tại trên

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

<p id="p">Select me: <i>italic</i> and <b>bold</b></p>

From <input id="from" disabled> – To <input id="to" disabled>
<script>
  document.onselectionchange = function() {
    let selection = document.getSelection();

    let {anchorNode, anchorOffset, focusNode, focusOffset} = selection;

    // anchorNode and focusNode are text nodes usually
    from.value = `${anchorNode?.data}, offset ${anchorOffset}`;
    to.value = `${focusNode?.data}, offset ${focusOffset}`;
  };
</script>

Có hai cách để sao chép nội dung đã chọn

1. Chúng ta có thể sử dụng

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   30 để lấy nó dưới dạng văn bản
2. Mặt khác, để sao chép toàn bộ DOM, e. g. nếu chúng ta cần tiếp tục định dạng, chúng ta có thể lấy các phạm vi cơ bản với

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   31. Ngược lại, một đối tượng

   <p id="p">Example: <i>italic</i> and <b>bold</b></p>

   1 có phương thức

   <p id="p">Select me: <i>italic</i> and <b>bold</b></p>
   
   <script>
     // select from 0th child of <p> to the last child
     document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length);
   </script>

   7 sao chép nội dung của nó và trả về dưới dạng đối tượng

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   34, mà chúng ta có thể chèn vào nơi khác

Đây là bản demo sao chép nội dung đã chọn dưới dạng văn bản và dưới dạng các nút DOM

<p id="p">Select me: <i>italic</i> and <b>bold</b></p>

Cloned: <span id="cloned"></span>
<br>
As text: <span id="astext"></span>

<script>
  document.onselectionchange = function() {
    let selection = document.getSelection();

    cloned.innerHTML = astext.innerHTML = "";

    // Clone DOM nodes from ranges (we support multiselect here)
    for (let i = 0; i < selection.rangeCount; i++) {
      cloned.append(selection.getRangeAt(i).cloneContents());
    }

    // Get as text
    astext.innerHTML += selection;
  };
</script>

Chúng ta có thể làm việc với vùng chọn bằng cách thêm/xóa phạm vi

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  10 – lấy phạm vi thứ i, bắt đầu từ

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <script>
    let range = new Range();
  
    range.setStart(p, 0);
    range.setEnd(p, 2);
  
    // toString of a range returns its content as text, without tags
    console.log(range); // Example: italic
  
    // apply this range for document selection (explained later below)
    document.getSelection().addRange(range);
  </script>

  6. Trong tất cả các trình duyệt ngoại trừ Firefox, chỉ có

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <script>
    let range = new Range();
  
    range.setStart(p, 0);
    range.setEnd(p, 2);
  
    // toString of a range returns its content as text, without tags
    console.log(range); // Example: italic
  
    // apply this range for document selection (explained later below)
    document.getSelection().addRange(range);
  </script>

  6 được sử dụng

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  38 – thêm

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  39 vào lựa chọn. Tất cả các trình duyệt ngoại trừ Firefox bỏ qua cuộc gọi, nếu lựa chọn đã có một phạm vi liên quan

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  40 – loại bỏ

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  39 khỏi vùng chọn

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  42 – xóa tất cả các phạm vi

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  43 – bí danh của

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  44

Ngoài ra còn có các phương pháp thuận tiện để thao tác trực tiếp phạm vi lựa chọn mà không cần gọi ____2_______1 trung gian

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  46 – thay thế phạm vi đã chọn bằng một phạm vi mới bắt đầu và kết thúc tại

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7 đã cho, tại vị trí

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  9

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  49 – bí danh của

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  50

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  51 – thu gọn (thay thế bằng một phạm vi trống) để bắt đầu lựa chọn,

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  52 – thu gọn đến cuối lựa chọn,

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  53 – di chuyển tiêu điểm của vùng chọn đến

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7 đã cho, vị trí

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  9,

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  56 – thay thế phạm vi lựa chọn bằng bắt đầu đã cho

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  57 và kết thúc

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  58. Tất cả nội dung ở giữa chúng được chọn

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  59 – chọn tất cả con của

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  61 – xóa nội dung đã chọn khỏi tài liệu

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  62 – kiểm tra xem lựa chọn có chứa

  <p id="p">Example: <i>italic</i> and <b>bold</b></p>

  7 hay không (một phần nếu đối số thứ hai là

  Click buttons to run methods on the selection, "resetExample" to reset it.
  
  <p id="p">Example: <i>italic</i> and <b>bold</b></p>
  
  <p id="result"></p>
  <script>
    let range = new Range();
  
    // Each demonstrated method is represented here:
    let methods = {
      deleteContents() {
        range.deleteContents()
      },
      extractContents() {
        let content = range.extractContents();
        result.innerHTML = "";
        result.append("extracted: ", content);
      },
      cloneContents() {
        let content = range.cloneContents();
        result.innerHTML = "";
        result.append("cloned: ", content);
      },
      insertNode() {
        let newNode = document.createElement('u');
        newNode.innerHTML = "NEW NODE";
        range.insertNode(newNode);
      },
      surroundContents() {
        let newNode = document.createElement('u');
        try {
          range.surroundContents(newNode);
        } catch(e) { console.log(e) }
      },
      resetExample() {
        p.innerHTML = `Example: <i>italic</i> and <b>bold</b>`;
        result.innerHTML = "";
  
        range.setStart(p.firstChild, 2);
        range.setEnd(p.querySelector('b').firstChild, 3);
  
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
      }
    };
  
    for(let method in methods) {
      document.write(`<div><button onclick="methods.${method}()">${method}</button></div>`);
    }
  
    methods.resetExample();
  </script>

  5)

Đối với hầu hết các tác vụ, các phương thức này đều ổn, không cần truy cập đối tượng

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Ví dụ, chọn toàn bộ nội dung của đoạn văn

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<script>
  let range = new Range();

  range.setStart(p, 0);
  range.setEnd(p, 2);

  // toString of a range returns its content as text, without tags
  console.log(range); // Example: italic

  // apply this range for document selection (explained later below)
  document.getSelection().addRange(range);
</script>

<p id="p">Select me: <i>italic</i> and <b>bold</b></p>

<script>
  // select from 0th child of <p> to the last child
  document.getSelection().setBaseAndExtent(p, 0, p, p.childNodes.length);
</script>

Điều tương tự khi sử dụng phạm vi

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

Để chọn thứ gì đó, trước tiên hãy xóa lựa chọn hiện có

Nếu một lựa chọn tài liệu đã tồn tại, hãy làm trống nó trước với

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

Ngoại lệ là một số phương pháp lựa chọn, thay thế lựa chọn hiện có, chẳng hạn như

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

Các phần tử biểu mẫu, chẳng hạn như

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Của cải

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  73 – vị trí bắt đầu lựa chọn (có thể ghi),

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  74 – vị trí kết thúc lựa chọn (có thể ghi),

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  75 – hướng lựa chọn, một trong. “tiến”, “lùi” hoặc “không” (nếu e. g. được chọn bằng cách nhấp đúp chuột),

Sự kiện

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  76 – kích hoạt khi thứ gì đó được chọn

phương pháp

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  77 – chọn mọi thứ trong điều khiển văn bản (có thể là

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  70 thay vì

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  69),

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  80 – thay đổi lựa chọn để kéo dài từ vị trí

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  81 đến

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  82, theo hướng đã cho (tùy chọn)

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  83 – thay thế một dãy văn bản bằng văn bản mới

  Các đối số tùy chọn

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  81 và

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  82, nếu được cung cấp, hãy đặt phạm vi bắt đầu và kết thúc, nếu không thì lựa chọn của người dùng sẽ được sử dụng

  Đối số cuối cùng,

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  86, xác định cách thiết lập lựa chọn sau khi văn bản được thay thế. Các giá trị có thể là

  • <p id="p">Hello</p>
    <script>
      let range = new Range();
      range.setStart(p.firstChild, 2);
      range.setEnd(p.firstChild, 4);
    
      // toString of a range returns its content as text
      console.log(range); // ll
    </script>

    87 – văn bản mới chèn sẽ được chọn

  • <p id="p">Hello</p>
    <script>
      let range = new Range();
      range.setStart(p.firstChild, 2);
      range.setEnd(p.firstChild, 4);
    
      // toString of a range returns its content as text
      console.log(range); // ll
    </script>

    88 – phạm vi lựa chọn thu gọn ngay trước văn bản được chèn (con trỏ sẽ ở ngay phía trước nó)

  • <p id="p">Hello</p>
    <script>
      let range = new Range();
      range.setStart(p.firstChild, 2);
      range.setEnd(p.firstChild, 4);
    
      // toString of a range returns its content as text
      console.log(range); // ll
    </script>

    89 – phạm vi lựa chọn thu gọn ngay sau văn bản được chèn (con trỏ sẽ ở ngay sau nó)

  • <p id="p">Hello</p>
    <script>
      let range = new Range();
      range.setStart(p.firstChild, 2);
      range.setEnd(p.firstChild, 4);
    
      // toString of a range returns its content as text
      console.log(range); // ll
    </script>

    90 – cố gắng duy trì lựa chọn. Đây là mặc định

Bây giờ hãy xem các phương pháp này hoạt động

Ví dụ: mã này sử dụng sự kiện

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

Xin lưu ý

• <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  91 kích hoạt khi thứ gì đó được chọn, nhưng không kích hoạt khi lựa chọn bị xóa
• Sự kiện

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  27 không được kích hoạt cho các lựa chọn bên trong điều khiển biểu mẫu, theo , vì nó không liên quan đến lựa chọn và phạm vi của

  <p id="p">Hello</p>
  <script>
    let range = new Range();
    range.setStart(p.firstChild, 2);
    range.setEnd(p.firstChild, 4);
  
    // toString of a range returns its content as text
    console.log(range); // ll
  </script>

  28. Một số trình duyệt tạo ra nó, nhưng chúng ta không nên dựa vào nó

Chúng ta có thể thay đổi

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

Một trường hợp cạnh quan trọng là khi

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

Vì vậy, bằng cách đặt

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

Ví dụ

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

Để sửa đổi nội dung của vùng chọn ta có thể sử dụng phương thức

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Đó là một phương pháp hơi phức tạp. Ở dạng một đối số đơn giản nhất, nó thay thế phạm vi người dùng đã chọn và xóa lựa chọn

Ví dụ: ở đây, lựa chọn của người dùng sẽ được bao bọc bởi

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

Với nhiều đối số hơn, chúng ta có thể đặt phạm vi

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

Trong ví dụ này, chúng tôi tìm thấy

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

Nếu không có gì được chọn, hoặc chúng ta sử dụng

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Chúng tôi cũng có thể chèn một cái gì đó "tại con trỏ" bằng cách sử dụng

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Đây là nút chèn

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Hello</p>
<script>
  let range = new Range();
  range.setStart(p.firstChild, 2);
  range.setEnd(p.firstChild, 4);

  // toString of a range returns its content as text
  console.log(range); // ll
</script>

Để làm cho một cái gì đó không thể chọn, có ba cách

1. Sử dụng thuộc tính CSS

   <p id="p">Example: <i>italic</i> and <b>bold</b></p>

   15

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   6

   Điều này không cho phép lựa chọn bắt đầu tại

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   26. Nhưng người dùng có thể bắt đầu lựa chọn ở nơi khác và bao gồm

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   26 vào đó

   Sau đó,

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   26 sẽ trở thành một phần của

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   08, vì vậy việc lựa chọn thực sự xảy ra, nhưng nội dung của nó thường bị bỏ qua trong quá trình sao chép-dán

2. Ngăn hành động mặc định trong các sự kiện

   <p id="p">Example: <i>italic</i> and <b>bold</b></p>

   20 hoặc

   <p id="p">Example: <i>italic</i> and <b>bold</b></p>

   21

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   7

   Điều này ngăn việc bắt đầu lựa chọn trên

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   26, nhưng khách truy cập có thể bắt đầu lựa chọn đó ở một phần tử khác, sau đó mở rộng đến

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   26

   Điều đó thuận tiện khi có một trình xử lý sự kiện khác trên cùng một hành động kích hoạt lựa chọn (e. g.

   <p id="p">Example: <i>italic</i> and <b>bold</b></p>

   21). Vì vậy, chúng tôi vô hiệu hóa lựa chọn để tránh xung đột, vẫn cho phép sao chép nội dung

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   26

3. Chúng tôi cũng có thể xóa lựa chọn post-factum sau khi nó xảy ra với

   <p id="p">Example: <i>italic</i> and <b>bold</b></p>

   26. Điều đó hiếm khi được sử dụng, vì điều này gây ra hiện tượng nhấp nháy không mong muốn khi lựa chọn xuất hiện-biến mất

Chúng tôi đã đề cập đến hai API khác nhau cho các lựa chọn

1. Đối với tài liệu.

   <p id="p">Example: <i>italic</i> and <b>bold</b></p>

   2 và

   <p id="p">Example: <i>italic</i> and <b>bold</b></p>

   1 đối tượng
2. Cho

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   69,

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   70. các phương thức và thuộc tính bổ sung

API thứ hai rất đơn giản vì nó hoạt động với văn bản

Các công thức nấu ăn được sử dụng nhiều nhất có lẽ là

1. Lấy lựa chọn

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   8

2. Đặt lựa chọn

   <p id="p">Hello</p>
   <script>
     let range = new Range();
     range.setStart(p.firstChild, 2);
     range.setEnd(p.firstChild, 4);
   
     // toString of a range returns its content as text
     console.log(range); // ll
   </script>

   9

Và cuối cùng, về con trỏ. Vị trí con trỏ trong các thành phần có thể chỉnh sửa, như

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

<p id="p">Example: <i>italic</i> and <b>bold</b></p>

Làm cách nào để kiểm tra xem văn bản có được chọn không JavaScript?

Làm cách nào để kiểm tra xem văn bản có được chọn hay không trong jQuery?

Làm cách nào để chọn một văn bản bằng JavaScript?

Làm cách nào để in văn bản đã chọn trong JavaScript?