اكتشاف الكلمات التي تم النقر عليها في النص باستخدام جافا سكريبت

عند إنشاء برنامج جافا سكريبت الذي يسمح للمستخدمين بتحديد الكلمات من خلال النقر عليها، يظهر السؤال ينشأ: كيف يمكن تحقيق ذلك بكفاءة وأناقة؟

طريقة مطولة باستخدام تحليل الفصل

يتضمن النهج الشائع ولكن الممل تحليل HTML بالكامل، وتقسيم كل كلمة مفصولة بـ مسافات، وتغليف كل كلمة في عنصر . تتم بعد ذلك إضافة مستمع الحدث لاكتشاف النقرات على فئة الكلمة، ويتم الحصول على الكلمة التي تم النقر عليها من خلال $(this).innerHTML. أثناء نجاح هذه الطريقة، فإن أدائها وجمالياتها يتركان الكثير مما هو مرغوب.

الحل الأمثل بدون تحليل الفئات

للحصول على حل أكثر كفاءة وأناقة، ضع في اعتبارك ما يلي:

الخطوة 1: التقاط التحديد

استخدم window.getSelection () لالتقاط اختيار المستخدم.

الخطوة 2: تحديد حدود الكلمات

كرر على نطاق التحديد لتحديد نقطتي البداية والنهاية للكلمة التي تم النقر عليها، وتجنب المسافات.

الخطوة 3: استرداد الكلمة التي تم النقر عليها

ادمج الأحرف المحددة ضمن نطاق التحديد لتكوين الكلمة التي تم النقر عليها.

مثال للتنفيذ

توفر كود 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);
});