Bagaimanakah saya boleh mengesan perkataan dalam blok teks yang telah diklik menggunakan JavaScript dan API Penyemak Imbas?

Mengesan Perkataan Diklik dalam Teks dengan JavaScript dan API Penyemak Imbas

Masalahnya melibatkan pengesanan perkataan yang telah diklik dalam teks pada halaman web dan menyimpannya dalam pembolehubah. Walaupun penyelesaian sebelumnya melibatkan penambahan elemen kelas individu untuk setiap perkataan dan menggunakan jQuery untuk menangkap klik, ia terbukti tidak cekap dan tidak menarik secara visual.

Penyelesaian JavaScript yang Diperbaiki

Lebih cekap penyelesaian memanfaatkan keupayaan pemilihan penyemak imbas:

1. Tentukan kelas untuk elemen dengan teks boleh klik, seperti

   .

2. Tangkap klik pada kelas ini menggunakan JavaScript :

<code class="javascript">$(".clickable").click(function(e) {
  s = window.getSelection();
  var range = s.getRangeAt(0);
  var node = s.anchorNode;

  // Find starting point
  while (range.toString().indexOf(" ") != 0) {
    range.setStart(node, range.startOffset - 1);
  }
  range.setStart(node, range.startOffset + 1);

  // Find ending point
  do {
    range.setEnd(node, range.endOffset + 1);
  } while (
    range.toString().indexOf(" ") == -1 &&
    range.toString().trim() != ""
  );

  // Alert result
  var str = range.toString().trim();
  alert(str);
});</code>

Penyelesaian API Penyemak Imbas

Jika JavaScript sahaja terbukti tidak mencukupi, pertimbangkan untuk memanfaatkan API penyemak imbas:

• Model Objek Dokumen (DOM): Akses dan manipulasi elemen HTML, termasuk nod teks.
• Kaedah ElementFromPoint(): Dapatkan semula elemen pada koordinat tertentu pada halaman, membenarkan anda untuk mengenal pasti perkataan yang diklik.
• API Acara Penunjuk: Pantau acara penunjuk (cth., klik) pada elemen tertentu, memberikan maklumat terperinci tentang lokasi yang diklik.

Memperluas Kefungsian dengan Sambungan Penyemak Imbas

Jika perlu, anda boleh membangunkan sambungan penyemak imbas untuk meningkatkan fungsi:

• Skrip Kandungan: Suntikan JavaScript ke dalam halaman web untuk memantau klik pada elemen tertentu.
• Pendengar Acara: Tetapkan pengendali acara untuk mengesan tindakan pengguna, seperti klik.
• Penyepaduan API: Gunakan API penyemak imbas, seperti yang dinyatakan di atas, untuk mengakses dan memanipulasi elemen halaman web.

Dengan menggabungkan JavaScript dan API penyemak imbas, anda boleh mencipta antara muka mesra pengguna dengan berkesan di mana pengguna boleh mengklik pada perkataan dalam teks dan menyimpan perkataan yang diklik dalam pembolehubah.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengesan perkataan dalam blok teks yang telah diklik menggunakan JavaScript dan API Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!