Lấy văn bản nổi bật / được chọn

351

Có thể lấy văn bản được tô sáng trong một đoạn của trang web, ví dụ như bằng cách sử dụng jQuery?

javascript jquery textselection

— Dân
nguồn

2

Đây là một giải pháp hoạt động dipaksblogonline.blogspot.in/2014/11/ trên

— Dipak

Javascript đơn giản làm việc cho tôi. . document.getSelection () anchorNode.data.substr (document.getSelection () anchorOffset, document.getSelection () focusOffset-document.getSelection () anchorOffset...)

— Rohit Verma

@RohitVerma: Điều đó sẽ chỉ hoạt động trong trường hợp đơn giản của một lựa chọn được chứa trong một nút văn bản, điều này không có nghĩa là được đảm bảo là trường hợp.

— Tim Down

@Dipak Làm thế nào để bạn nhân rộng chức năng chia sẻ xã hội từ blog bạn tham khảo trong bài đăng của mình? Thay vì chỉ trả về chuỗi đã chọn, tôi đang cố gắng đưa biến đó vào liên kết twitter.

481

Lấy văn bản người dùng đã chọn là tương đối đơn giản. Không có lợi ích gì khi có được bằng cách liên quan đến jQuery vì bạn không cần gì ngoài các đối tượng windowvà document.

function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    return text;
}

Nếu bạn quan tâm đến việc triển khai cũng sẽ xử lý các lựa chọn trong các phần tử <textarea>texty <input>, bạn có thể sử dụng các phần sau. Kể từ bây giờ 2016 tôi đang bỏ qua mã cần thiết cho hỗ trợ IE <= 8 nhưng tôi đã đăng nội dung đó ở nhiều nơi trên SO.

function getSelectionText() {
    var text = "";
    var activeEl = document.activeElement;
    var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;
    if (
      (activeElTagName == "textarea") || (activeElTagName == "input" &&
      /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&
      (typeof activeEl.selectionStart == "number")
    ) {
        text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);
    } else if (window.getSelection) {
        text = window.getSelection().toString();
    }
    return text;
}

document.onmouseup = document.onkeyup = document.onselectionchange = function() {
  document.getElementById("sel").value = getSelectionText();
};

Selection:
<br>
<textarea id="sel" rows="3" cols="50"></textarea>
<p>Please select some text.</p>
<input value="Some text in a text input">
<br>
<input type="search" value="Some text in a search input">
<br>
<input type="tel" value="4872349749823">
<br>
<textarea>Some text in a textarea</textarea>

Mở rộng đoạn trích

— Tim xuống
nguồn

9

Điều gì khác nếu {} -fork tốt cho? "Kiểm soát" là gì?

— Dan

29

@Dan: Xin lỗi, tôi đã bỏ lỡ câu hỏi này (đừng nghĩ SO đã cảnh báo tôi về nó). Nhánh thứ hai dành cho IE <= 8 (IE 9 thực hiện window.getSelection()). Các document.selection.typekiểm tra là thử nghiệm mà lựa chọn là một lựa chọn văn bản chứ không phải là một lựa chọn kiểm soát. Trong IE, lựa chọn điều khiển là một lựa chọn bên trong một phần tử có thể chỉnh sửa có chứa một hoặc nhiều phần tử (chẳng hạn như điều khiển hình ảnh và biểu mẫu) với các phác thảo và thay đổi kích thước tay cầm. Nếu bạn gọi .createRange()một lựa chọn như vậy, bạn nhận được một ControlRangethay vì a TextRangevà ControlRangekhông có texttài sản.

— Tim Down

2

@TimDown Người ta nói rằng "jQuery không có X", vì dĩ nhiên, với plugin phù hợp, nó có thể làm bất cứ điều gì bạn có thể làm trong trình duyệt với javascript. Trong trường hợp này, chúng ta có jquery.selection ( madapaja.github.io/jquery.selection ). Thật sai lầm khi nói "cũng không nên". Tôi đến đây vì tôi đang tìm kiếm chính xác điều này. Tôi có một trường hợp sử dụng và jQuery là giải pháp phù hợp.

— Auspex

8

@Auspex: Tôi thấy quan điểm của bạn nhưng tôi không đồng ý. Một plugin jQuery là một thư viện có sự phụ thuộc vào jQuery; bản thân nó không phải là jQuery. Trong trường hợp xử lý lựa chọn, bản thân jQuery cung cấp chính xác không có gì (điều này đúng như vậy bởi vì xử lý lựa chọn không phải là thứ jQuery dùng để làm gì), vì vậy, bất kỳ giải pháp nào sử dụng jQuery đều sử dụng nó một cách tình cờ.

— Tim Down

1

@ Dennis98: Tôi không bị làm phiền hoặc bị xúc phạm từ xa :) Việc kiểm tra các loại đầu vào là do bạn nhận được cảnh báo trong bảng điều khiển trong Chrome nếu bạn cố truy cập selectionStarthoặc selectionEndtrong một <input>loại phần tử (chẳng hạn như "số") hỗ trợ nó (xem jsfiddle.net/6zoposby/2 chẳng hạn). Tôi đã để lại kiểm tra cho sự tồn tại của selectionStartmã để mã sẽ không bị hỏng trong IE <= 8. Tôi thừa nhận rằng kiểm tra activeElementcó lẽ là quá mức cần thiết. Tôi sử dụng slicevì nó mạnh hơn (mặc dù điều này không hữu ích ở đây) và hơi ngắn để gõ hơn substring.

— Tim Down

111

Nhận văn bản được tô sáng theo cách này:

window.getSelection().toString()

và tất nhiên là một điều trị đặc biệt cho:

document.selection.createRange().htmlText

— ParPar
nguồn

2

Đối với IE> = 10, document.selection hỗ trợ đã bị xóa trong IE10 và được thay thế bằng window.getSelection . Nguồn: connect.microsoft.com/IE/feedback/details/795325/

— Kẻ

Điều này sẽ thất bại trong nhiều điều kiện trong các trình duyệt khác nhau (ví dụ Firefox).

— Makyen

11

Giải pháp này hoạt động nếu bạn đang sử dụng chrome (không thể xác minh các trình duyệt khác) và nếu văn bản nằm trong cùng Phần tử DOM:

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)

— Andrew Kennedy
nguồn

0

Sử dụng window.getSelection().toString().

Bạn có thể đọc thêm trên developer.mozilla.org

— Ebuka
nguồn