كيفية الحصول على نص محدد ، ولكن هل يمكنني الحصول على السياق المحيط في JavaScript؟

Question

أتمكن من الحصول على النص الذي حدده المستخدم على صفحة ويب ، باستخدام هذا الرمز:

function getSelected() {
  var userSelection;
  if (window.getSelection) {
      selection = window.getSelection();
  } else if (document.selection) {
      selection = document.selection.createRange();
  }

}

هل من المستحيل أن أحصل على الكلمات حول الكلمة المحددة.

خذ هذه الجمل على سبيل المثال: "إذا كنت بحاجة إلى Framglubble the ZartBox ، فيجب عليك شراء القطعة الحمراء. وإلا يمكنك شراء عنصر واجهة المستخدم الزرقاء وتوفير بعض المال."

سيخبرني الرمز الخاص بي ما إذا كان الشخص قد حدد كلمة "عنصر واجهة مستخدم". لكنني أود أن أعرف ما إذا كان الاختيار بعد "أحمر" أو "أزرق". هل هذا ممكن؟ لقد كنت أتجول في الإنترنت للحصول على بعض النصائح ، وأنا أواجه مشكلة في العثور على إجابة.

شكرا لك على مساعدتك

Answer 1

لقد كتبت نصًا سريعًا يمكنه تحديد الجزء قبل الاختيار وبعد الاختيار داخل عنصر Div نفسه.

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

على أي حال ، يمكنك رؤية/نسخ/اختبار الرمز هنا: http://jsfiddle.net/kvhxj/ فقط حدد شيئًا وشاهد التنبيه الذي يظهر.

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

Answer 2

الطريقة للقيام بذلك في المتصفحات غير IE هي الحصول على ملف Range اعتراض من اختيار. النطاق له حدود بداية ونهاية ، ويتم التعبير عن كل حدود النطاق على أنه إزاحة داخل العقدة ؛ إذا كانت الحدود ضمن عقدة نصية ، فستكون هذه الإزاحة بمثابة إزاحة حرف.

على سبيل المثال ، إذا كان ما يلي عقدة نصية ويتم تحديد التحديد بواسطة الأنابيب:

"red |widget| blue widget"

... ثم فإن النطاق الذي ستحصل عليه من التحديد سيكون له إزاحة بداية 4 ضمن عقدة النص.

ما يلي سيحصل على نطاق يمثل التحديد وتنبيه حدود البدء:

var sel = window.getSelection();
var selectedRange = sel.rangeCount ? sel.getRangeAt(0) : null;
if (range) {
    alert("Offset " + selectedRange.startOffset
        + " in node " + selectedRange.startContainer.nodeName);
}

قد تتم مقارنة النطاقات بالنطاقات الأخرى ، لذلك إذا أردت أن تعرف ، على سبيل المثال ، إذا جاء التحديد الحالي بعد كلمة "Blue" في العقدة النصية أعلاه ، فيمكنك إنشاء نطاق يشمل كلمة "Blue" ومقارنته بـ النطاق المحدد:

// Assume the text node is stored in a variable called textNode
var blueRange = document.createRange();
blueRange.setStart(textNode, 11);
blueRange.setEnd(textNode, 15);

var selectionIsAfterBlue =
   (selectedRange.compareBoundaryPoints(Range.END_TO_START, blueRange) == 1);

في IE ، لا شيء من هذا يعمل وكل شيء بشكل مختلف ، بشكل عام مع صعوبة أكبر بكثير. لتطبيع هذا إلى واجهة واحدة متسقة ، يمكنك استخدام بلدي رينجي مكتبة.

Answer 3

أي لديه move مجموعة من الأساليب ، مما يقلل من هذه المشكلة إلى بضعة أسطر فقط لتوسيع التحديد للأمام أو إلى الخلف أي عدد من الكلمات (انظر http://www.webreference.com/js/column12/trmethods.html). من هناك ، إنها مجرد مسألة مقارنة النص مع أي قائمة تعسفية للقيم. المتصفحات الأخرى لا تملك هذه الميزة AFAIK. مصير حروب المتصفح: يطور المرء ميزة رائعة تم تجاهلها أو منعها من خلال براءة الاختراع من أي شيء آخر ، وبالتالي فإن الميزة تُفقد وتجنبها إلى الأبد كعبء لدعم المتصفح المتقاطع لجميع هذه الابتكارات حتماً على مصممي موقع الويب.

لذلك ، فيما يلي وظيفة معممة للحصول على معرف العنصر الأصل للنص المحدد فقط. ولعمل مع حل المتصفح المتقاطع هذا ، يجب عليك لف كل كلمة في عنصر خاص به مع معرف فريد أو سمة أخرى. مع هذا الإعداد ، يجب أن يكون ذلك قفزة غير مؤلمة نسبيًا للتطلع إلى الأمام والعودة إلى عناصر الأخوة أو المعرف بالتتابع.

الصيد هنا هو أن على العميل النقر/السحب من بداية الكلمة أو العبارة إلى النهاية ، وعدم وجود مساحات متاخمة على الإطلاق. حتى النقر المزدوج على كلمة ما سيؤدي إلى الرجوع إلى العنصر التالي (أو في حالة IE ، Div الوالد). بالإضافة إلى ذلك ، يجب عليك إضافة رمز لتقييد حدود التحديد إلى Div الوالد ، حيث قد يوسع الرمز أدناه أيضًا التحديد إلى العناصر المحيطة. ولكن نأمل أن تتمكن من أخذ إصلاح ذلك من هنا. خلاف ذلك ، فإن الأمر متروك لاستخدام المتجهات لتحديد إحداثيات النص مقارنة بجميع النص المحيط.

<script type="text/javascript">

function get_selected_element_id() {
 if (window.getSelection) {
  // FF
  var range = window.getSelection();
  }
 else if (document.selection) {
  // IE
  var range = document.selection.createRange();
  }
 if (range.focusNode) {
  // FF
  var test_value = range.focusNode.parentNode.id;
  }
 else {
  // IE
  var test_value = range.parentElement().id;
  }
 return test_value;
 }


</script>

</head>

<body>

<div id="test_div">
 <span id="test1">test</span> <span id="test2">asdf</span> <span id="test3">test2</span> <span id="test4">bla</span>
 </div>

<button onclick="alert(get_selected_element_id());">go</button>