texthighlighter

تمييز النص

فئة Vanilla JS لتسليط الضوء على نتائج البحث في منطقة النص مع الحفاظ على وظائف المنطقة.

نظرًا لأنه لا يمكن للمرء تصميم النص في منطقة النص، نظرًا لأنه ليس HTML، فإن هذا الفصل يأتي للإنقاذ مما يسمح لك بتمييز أي نص في منطقة النص. كما هو الحال في نتائج البحث.

تحقق من العرض التوضيحي{:target="_blank"}

سمات

• لا التبعيات.
• لا التكوين. ما عليك سوى إنشاء مثيل للفصل واستدعاء الطريقة.
• يمكن استخدامه في العديد من مناطق النص حسب الحاجة، ما عليك سوى إنشاء مثيل لكل منها.
• مستجيب. سيتم ضبط العلامات على حجم الشاشة وحجم منطقة النص والتمرير.
• يحتفظ بالخلفية الأصلية من منطقة النص.
• يمكن تدميرها بشكل صحيح. سيتم إزالة جميع الأحداث والبنية.
• يمكن الاختيار بين البحث الحساس لحالة الأحرف وغير الحساس.
• يمكن البحث بحرية أو بالكلمات فقط.
• يوفر عدداً لعدد النتائج التي تم العثور عليها.
• يمكن التنقل في نتائج البحث وعرضها حسب الحاجة.

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

أمثلة على الاستخدام والتعليمات البرمجية

أضف الملفات التالية إلى مشروعك:

• texthighlighter.js
• texthighlighter.css

 let tarea = document . getElementById ( 'txt' ) ;
let hilite = new textHighlight ( tarea ) ;

let searchResult = 'Some Expression' ;
let sens = true ;                        // Case sensitive. Optional, default: false
let word = true ;                        // Perform a words only search. Optional, default: false
hilite . search ( searchResult , sens , word ) ;

للوصول إلى عدد التكرارات التي تم العثور عليها، استخدم:

 let count = hilite . count ( ) ;

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

 let btnPrev = document . getElementById ( 'prev' ) ;
let btnNext = document . getElementById ( 'next' ) ;

btnPrev . addEventListener ( 'click' , hilite . prev ) ;
btnNext . addEventListener ( 'click' , hilite . next ) ;

إذا كنت بحاجة إلى مسح النقاط البارزة، فاتصل بالطريقة الواضحة.

 hilite . clear ( ) ;

عندما يقع خارج النطاق، ما عليك سوى استدعاء طريقة التدمير وسيعود كل شيء كما كان قبل إنشاء مثيل.

 hilite . destroy ( ) ; 

عن

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

كان الهدف الرئيسي هنا هو توفير تسليط الضوء على نتائج البحث في منطقة النص.

تم اختبار هذه الفئة في Chrome 117 وFirefox 118.

رخصة

هذا المشروع مرخص بموجب ترخيص MIT