पृष्ठ पर टेक्स्ट खोजें और हाइलाइट करें (जावास्क्रिप्ट - jQuery)

मुझे एक पृष्ठ पर या पाठ में, एक सर्वर एक नहीं, बल्कि एक नियमित पर एक खोज की आवश्यकता थी। यही है, मैंने उस पृष्ठ को डाउनलोड किया जहां बहुत अधिक पाठ है, आप इसे पढ़ते हैं, और यदि आवश्यक हो, तो आप इसे ढूंढ रहे हैं। मैंने इंटरनेट पर चारों ओर अफवाह फैला दी और दुर्भाग्य से, विकल्प नहीं मिला (शब्दों के बीच संक्रमण और पृष्ठ के माध्यम से स्क्रॉल करने के साथ), हालांकि कार्यान्वयन में कुछ भी जटिल नहीं था - या तो मैंने खराब खोज की या किसी को इसकी आवश्यकता नहीं थी।
यह सिर्फ अंत है - मैंने पहला विकल्प साझा करने का फैसला किया।

JQuery लाइब्रेरी का ही उपयोग किया जाता है।
एक आधार के रूप में, मैंने jQuery के लेख - पाठ या HTML में शब्दों को यहाँ से ( उनके उदाहरण ) पर प्रकाश डाला । स्क्रिप्ट को पेज से कैसे जोड़ा जाए, इसका वर्णन वहां किया गया है।

मैं नीचे "शब्द" = "वाक्यांश" = "अक्षरों और / या प्रतीकों के वाक्यांश" का उपयोग करूंगा।

अब चलो कार्यक्षमता का विस्तार करना शुरू करते हैं:

खोज बटन, अगले शब्द और पिछले पर प्रकाश डाला और चयनित शब्द के लिए पृष्ठों को स्क्रॉल करें

1) किसी विशिष्ट शब्द पर प्रकाश डालना
jquery.highlight.js फ़ाइल में जोड़ें

jQuery.fn.selectHighlight = function(number) { return this.find("span.highlight:eq("+number+")").addClass('selectHighlight').end(); }; 

2) शैली में हम हाइलाइट किए गए शब्द के प्रदर्शन को लिखते हैं और अपने लिए हाइलाइटिंग शैली बदलते हैं

 .highlight { background-color: gray; color: white } .selectHighlight { background-color: rgb(35, 140, 0) } 

3) बटन और इनपुट क्षेत्र बनाएँ

 <div id="search_block"> <label> Search: <input id="search_text" type="text" value=""/> </label> <input id="search_button" type="button" value="Search"/> <input id="prev_search" type="button" value="<"/> <input id="next_search" type="button" value=">"/> <input id="clear_button" type="button" value="Clear"/> </div> 

4) एक्शन बटन असाइन करें
कोड की प्रतिलिपि बनाएँ:

(मैं नीचे बताऊंगा कि यह समारोह क्या है)

 function scroll_to_word(){ pos = $('#text .selectHighlight').position() $('#content').jqxPanel('scrollTo', 0, pos.top - 5); } 

  var search_number = 0; //     var search_count = 0; //   //search -       "search_button" $('#search_button').click(function() { $('#text').removeHighlight(); txt = $('#search_text').val(); if (txt == '') return; $('#text').highlight(txt); search_count = $('#text span.highlight').size() - 1; search_number = 0; $('#text').selectHighlight(search_number); //     scroll_to_word(); //     }); //clear -       "clear_button" $('#clear_button').click(function() { $('#text').removeHighlight(); }); //prev_search -           $('#prev_search').click(function() { if (search_number == 0) return; $('#text .selectHighlight').removeClass('selectHighlight'); search_number--; $('#text').selectHighlight(search_number); scroll_to_word(); }); //next_search -           $('#next_search').click(function() { if (search_number == search_count) return; $('#text .selectHighlight').removeClass('selectHighlight'); search_number++; $('#text').selectHighlight(search_number); scroll_to_word(); }); 

5)
function scroll_to_word(){...} - स्क्रॉल करने का कार्य (रीवाइंडिंग) उस पृष्ठ को जिस शब्द की हमें आवश्यकता है
ठीक है, सामान्य तौर पर, सरल jqueryscrollto प्लगइन का उपयोग करना बहुत आसान है, जिसे हम यहां से लेते हैं और .highlight वर्ग और संख्या eq('+search_number +') ( search_number - वैश्विक स्क्रिप्ट चर की सूची देखें)।

 jQuery('#content').scrollTo('.highlight('+search_number +')'); 

लेकिन मुझे प्लगइन्स (jqwidgets) के इस सेट का उपयोग करना था, क्योंकि मुझे पेज के लिए अपने स्वयं के स्क्रॉल की आवश्यकता थी और ब्राउज़र की नहीं, इसलिए मैंने उनके API का उपयोग किया:
स्क्रोल्टो विधि
विशिष्ट स्थिति तक स्क्रॉल करें।
कोड उदाहरण
स्क्रोल्टो विधि को लागू करें।

 $('#jqxPanel').jqxPanel('scrollTo', 10, 20); 

 function scroll_to_word(){ pos = $('#text .selectHighlight').position() $('#content').jqxPanel('scrollTo', 0, pos.top - 5); // 5 -            -    } 

डेमो
वह सब अभियान के लिए है।
मैं गैर-अनुकूलित कोड के लिए माफी चाहता हूं - मैंने इसे समाप्त कर दिया और इसे साझा करने का निर्णय लिया, यह केवल प्रारंभिक संस्करण है