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