Dapatkan teks yang Disorot / Dipilih

351

Apakah mungkin untuk mendapatkan teks yang disorot dalam paragraf situs web misalnya dengan menggunakan jQuery?

javascript jquery textselection Dan
sumber
2
Inilah solusi yang berfungsi dipaksblogonline.blogspot.in/2014/11/…
Dipak
Javascript sederhana bekerja untuk saya. document.getSelection (). anchorNode.data.substr (document.getSelection (). anchorOffset, document.getSelection (). focusOffset-document.getSelection (). anchorOffset)
Rohit Verma
@RohitVerma: Itu hanya akan bekerja dalam kasus sederhana dari seleksi yang terkandung dalam satu node teks, yang tidak dijamin sebagai kasusnya.
Tim Down
@Dipak Bagaimana Anda mereplikasi fungsi berbagi sosial dari blog yang Anda rujuk dalam posting Anda? Alih-alih mengembalikan string yang dipilih, saya mencoba mengisi variabel itu ke dalam tautan twitter.

Jawaban:

481

Mendapatkan teks yang dipilih pengguna relatif sederhana. Tidak ada manfaat yang bisa diperoleh dengan melibatkan jQuery karena Anda perlu apa-apa selain windowdan documentbenda-benda.

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;
}

Jika Anda tertarik pada implementasi yang juga akan menangani pilihan <textarea>dan <input>elemen teks , Anda bisa menggunakan yang berikut ini. Karena sekarang 2016 saya menghilangkan kode yang diperlukan untuk dukungan IE <= 8 tetapi saya telah memposting hal-hal untuk itu di banyak tempat di 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>
Luaskan cuplikan

Tim Down
sumber
9
Apa lagi kalau {} -fork bagus untuk? tentang apa "Kontrol"?
Dan
29
@Dan: Maaf, saya melewatkan pertanyaan ini (jangan kira SO mengingatkan saya untuk itu). Cabang kedua adalah untuk IE <= 8 (implementasi IE 9 window.getSelection()). The document.selection.typecek menguji bahwa seleksi adalah pilihan teks daripada pilihan kontrol. Di IE, pilihan kontrol adalah pilihan di dalam elemen yang dapat diedit yang mengandung satu atau lebih elemen (seperti gambar dan kontrol bentuk) dengan garis besar dan mengubah ukuran pegangan. Jika Anda memanggil .createRange()pilihan semacam itu, Anda mendapatkan ControlRangelebih dari satu TextRange, dan ControlRangetidak memiliki textproperti.
Tim Down
2
@TimDown Sangat tipis untuk mengatakan "jQuery tidak memiliki X", karena tentu saja, dengan plugin yang tepat, ia dapat melakukan apa saja yang dapat Anda lakukan di browser dengan javascript. Dalam hal ini, kami memiliki jquery.selection ( madapaja.github.io/jquery.selection ). Sama salahnya mengatakan "tidak seharusnya begitu". Saya tiba di sini karena saya sedang mencari ini. Saya punya use case, dan jQuery adalah solusi yang tepat.
Auspex
8
@ Auspex: Saya agak mengerti maksud Anda tetapi saya tidak setuju. Plugin jQuery adalah pustaka yang memiliki ketergantungan pada jQuery; itu bukan jQuery itu sendiri. Dalam hal penanganan pemilihan, jQuery sendiri tidak memberikan apa-apa (yang memang seharusnya karena penanganan pemilihan bukan untuk jQuery), jadi solusi apa pun yang menggunakan jQuery menggunakannya secara kebetulan.
Tim Down
1
@ Dennis98: Saya tidak kesal atau tersinggung :) Pemeriksaan untuk tipe input adalah karena Anda mendapatkan peringatan di konsol di Chrome jika Anda mencoba mengakses selectionStartatau selectionEnddalam <input>tipe elemen (seperti "angka") yang tidak mendukungnya (lihat jsfiddle.net/6zoposby/2 , misalnya). Saya meninggalkan cek untuk keberadaan selectionStartsehingga kode tidak akan rusak di IE <= 8. Saya akui cek untuk activeElementitu mungkin berlebihan sekarang. Saya menggunakan slicekarena lebih kuat (meskipun itu tidak berguna di sini) dan sedikit lebih pendek untuk mengetik daripada substring.
Tim Down
111

Dapatkan teks yang disorot dengan cara ini:

window.getSelection().toString()

dan tentu saja perlakuan khusus untuk:

document.selection.createRange().htmlText
ParPar
sumber
2
Untuk IE> = 10 " document.selection dukungan telah dihapus di IE10 dan diganti dengan window.getSelection ". Sumber: connect.microsoft.com/IE/feedback/details/795325/...
user2314737
Ini akan gagal dalam berbagai kondisi di berbagai browser (mis. Firefox).
Makyen
11

Solusi ini berfungsi jika Anda menggunakan chrome (tidak dapat memverifikasi browser lain) dan jika teksnya berada di Elemen DOM yang sama:

window.getSelection().anchorNode.textContent.substring(
  window.getSelection().extentOffset, 
  window.getSelection().anchorOffset)
Andrew Kennedy
sumber
0

Menggunakan window.getSelection().toString() .

Anda dapat membaca lebih lanjut di developer.mozilla.org

Ebuka
sumber