Bagaimana Mengesan Perkataan yang Diklik dengan Cekap dalam Teks dengan JavaScript?

Kesan Perkataan yang Diklik dalam Teks dengan JavaScript

Apabila mencipta skrip JavaScript yang membolehkan pengguna memilih perkataan dengan mengklik padanya, soalan timbul: bagaimanakah perkara ini boleh dicapai dengan cekap dan elegan?

Kaedah Verbose Menggunakan Penghuraian Kelas

Pendekatan yang biasa tetapi membosankan melibatkan penghuraian keseluruhan HTML, memisahkan setiap perkataan yang dipisahkan oleh ruang, dan membalut setiap perkataan dalam unsur. Pendengar acara kemudian ditambahkan untuk mengesan klik pada kelas perkataan dan perkataan yang diklik diperoleh melalui $(this).innerHTML. Walaupun kaedah ini berfungsi, prestasi dan estetikanya meninggalkan banyak perkara yang diingini.

Penyelesaian Dioptimumkan Tanpa Penghuraian Kelas

Untuk penyelesaian yang lebih cekap dan elegan, pertimbangkan perkara berikut:

Langkah 1: Tangkap Pilihan

Gunakan window.getSelection() untuk menangkap pilihan pengguna.

Langkah 2: Kenal pasti Sempadan Perkataan

Lelaran ke atas julat pilihan untuk menentukan titik permulaan dan penamat bagi perkataan yang diklik, mengelakkan ruang.

Langkah 3: Dapatkan semula Perkataan yang Diklik

Gabungkan aksara yang dikenal pasti dalam julat pilihan untuk membentuk perkataan yang diklik.

Contoh Pelaksanaan

Kod JavaScript berikut menyediakan pelaksanaan praktikal bagi penyelesaian ini:

$(".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);
});

Atas ialah kandungan terperinci Bagaimana Mengesan Perkataan yang Diklik dengan Cekap dalam Teks dengan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!