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

(स्पष्टता के लिए, मैं पूरे लेख को स्क्रीनशॉट और कोड के साथ जारी रखूंगा, ताकि आप और मैं समझ सकें कि हम एक विशेष क्षण में क्या बात कर रहे हैं)

कोई उपाय खोजना

पहले सोचा: किसी ने पहले से ही यह लिखा है, आपको Google और कॉपी-पेस्ट करने की आवश्यकता है। तो मैंने किया। एक घंटे में, मुझे दो अच्छी स्क्रिप्ट मिलीं, जो अनिवार्य रूप से उसी तरह काम करती थीं, लेकिन अलग तरह से लिखी जाती थीं। मैंने वही चुना जिसका कोड मैंने बेहतर समझा और अपने पुराने आदमी के पेज में डाला।

अगर किसी को दिलचस्पी है, तो मैंने यहां कोड लिया।

स्क्रिप्ट ने तुरंत काम किया। मुझे लगा कि मुद्दा हल हो गया है, लेकिन जैसा कि यह निकला, स्क्रिप्ट के लेखक के लिए कोई अपराध नहीं है, इसमें एक बड़ी खामी थी। स्क्रिप्ट ने टैग की संपूर्ण सामग्री को खोजा ... और, जैसा कि आप शायद पहले से ही अनुमान लगा चुके हैं, जब किसी टैग या इसकी विशेषताओं के समान वर्णों के संयोजन की खोज करते हैं, तो संपूर्ण HTML पृष्ठ टूट जाता है।

स्क्रिप्ट सही तरीके से क्यों नहीं चली?

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

 <span style="background-color: yellow;">... ...</span> 

और फिर हम वर्तमान बॉडी टैग को प्राप्त नए के साथ बदल देते हैं। मार्कअप को अपडेट किया गया है, शैलियों में परिवर्तन होता है और सभी परिणाम पाए जाते हैं जो स्क्रीन पर पीले रंग में हाइलाइट किए जाते हैं।

आप शायद पहले ही समझ गए हैं कि समस्या क्या है, लेकिन मैं फिर भी अधिक विस्तार से बताऊंगा। खोज बॉक्स में शब्द "div" दर्ज करने की कल्पना करें। जैसा कि आप समझते हैं, शरीर के अंदर div सहित कई अन्य टैग हैं। और अगर हम सभी ऊपर वर्णित शैलियों को "div" पर लागू करते हैं, तो यह एक ब्लॉक नहीं होगा, लेकिन यह स्पष्ट नहीं है कि क्या डिज़ाइन टूटने के बाद से। नतीजतन, मार्कअप को ओवरराइट करने के बाद, हमें पूरी तरह से टूटा हुआ वेब पेज मिलता है। ऐसा दिखता है।

यह खोज से पहले था: पूरी तरह से फीका
यह खोज के बाद बन गया: पूरी तरह से फीका

जैसा कि आप देख सकते हैं, पृष्ठ पूरी तरह से टूट जाता है। संक्षेप में, स्क्रिप्ट निष्क्रिय हो गई, और मैंने खरोंच से अपना खुद का लिखने का फैसला किया, जो कि इस लेख के बारे में है।

इसलिए हम स्क्रैच से एक स्क्रिप्ट लिखते हैं

सब कुछ मुझे कैसा लग रहा है।



अब हम खोज फ़ॉर्म में रुचि रखते हैं। उसने एक लाल रेखा के साथ उसकी परिक्रमा की।

आइए थोड़ा सा देखते हैं। मैंने इसे इस प्रकार लागू किया (अब तक शुद्ध HTML)। तीन टैग के साथ एक फॉर्म।

पहला पाठ दर्ज करने के लिए है;
दूसरा - खोज को रद्द करने के लिए (रद्द);
तीसरा खोज के लिए है (पाए गए परिणामों को हाइलाइट करें)।

 <form> <input type="text" value="" placeholder="Search" autofocus> <input type="button" value=" " title=" "> <input type="submit" value=" " title=" "> </form> 

तो, हमारे पास एक इनपुट फ़ील्ड और 2 बटन हैं। मैं js.js. में जावास्क्रिप्ट लिखूंगा मान लीजिए कि आपने पहले ही इसे बनाया और कनेक्ट किया है।

पहली चीज जो हम करेंगे: खोज बटन और रद्द बटन पर क्लिक करने पर फ़ंक्शन कॉल पंजीकृत करें। यह इस तरह दिखेगा:

 <form> <input class="place_for_search" type="text" id="text-to-find" value="" placeholder="Search" autofocus> <input class="button_for_turn_back" type="button" onclick="javascript: FindOnPage('text-to-find',false); return false;" value=" " title=" "> <input class="button_for_search" type="submit" onclick="javascript: FindOnPage('text-to-find',true); return false;" value=" " title=" "> </form> 

आइए थोड़ा समझाते हैं कि यहां क्या है और क्यों है।

हम टेक्स्ट फ़ील्ड id = "text-to-find" ( यह आईडी js से तत्व को संदर्भित करेंगे ) देते हैं।

हम कैंसल बटन को निम्नलिखित विशेषताएँ देते हैं: टाइप करें = "बटन" ऑनक्लिक = "जावास्क्रिप्ट: फाइंडऑनपेज ('टेक्स्ट-टू-फाइंड', गलत); झूठे लौटें? "

- प्रकार: बटन
- जब दबाया जाता है, फाइंडऑनपेज फ़ंक्शन को कहा जाता है ('टेक्स्ट-टू-फाइंड', गलत); और टेक्स्ट के साथ फ़ील्ड की आईडी को गलत बता देता है

हम खोज बटन को निम्नलिखित विशेषताएं देते हैं: टाइप करें = "बटन" ऑनक्लिक = "जावास्क्रिप्ट: फाइंडऑनपेज ('टेक्स्ट-टू-फाइंड', ट्रू); झूठे लौटें? "

- टाइप करें: सबमिट करें (बटन नहीं क्योंकि यहां आप मैदान में प्रवेश करने के बाद Enter का उपयोग कर सकते हैं, या आप बटन का उपयोग भी कर सकते हैं)
- जब दबाया जाता है, फाइंडऑनपेज फ़ंक्शन को कहा जाता है ('टेक्स्ट-टू-फाइंड', ट्रू); और पाठ के साथ क्षेत्र की आईडी को सही करता है

आपने शायद एक और विशेषता पर ध्यान दिया: सच्चा / गलत । हम इसका उपयोग यह निर्धारित करने के लिए करेंगे कि कौन सा बटन दबाया गया था (खोज को रद्द करें या खोज शुरू करें)। यदि हम रद्द पर क्लिक करते हैं, तो गलत पास करें। यदि हम खोज पर क्लिक करते हैं, तो सही पास करें।

ठीक है, आगे बढ़ें। जावास्क्रिप्ट पर जाएं

हम मानते हैं कि आपने पहले ही js फ़ाइल को DOM से जोड़ा और बनाया है।

इससे पहले कि हम कोड लिखना शुरू करें, चलो एक ब्रेक लें और पहले चर्चा करें कि सब कुछ कैसे काम करना चाहिए। यानी संक्षेप में, हम एक कार्य योजना लिखेंगे। इसलिए, हमें यह चाहिए कि क्षेत्र में पाठ दर्ज करते समय, पृष्ठ पर एक खोज की जाती है, लेकिन टैग और विशेषताओं को प्रभावित नहीं किया जाना चाहिए। यानी केवल टेक्स्ट ऑब्जेक्ट। इसे कैसे प्राप्त किया जाए - मुझे यकीन है कि कई तरीके हैं। लेकिन अब हम नियमित अभिव्यक्ति का उपयोग करेंगे।

तो, अगली नियमित अभिव्यक्ति केवल पाठ ट्रेस के लिए दिखेगी। प्रकार: "> ... पाठ ... <"। यानी केवल पाठ ऑब्जेक्ट खोजे जाएंगे, जबकि टैग और विशेषताएँ अछूती रहेंगी।

 />(.*?)</g 

इसलिए हमें उस कोड के आवश्यक भाग मिलेंगे जिन्हें हम पार्स करेंगे और उपयोगकर्ता द्वारा दर्ज किए गए पाठ के साथ मिलानों की तलाश करेंगे। फिर हम मिली हुई वस्तुओं में शैलियों को जोड़ देंगे और उसके बाद HTML कोड को एक नए के साथ बदल देंगे।

चलिए शुरू करते हैं। सबसे पहले, चर जो हमें चाहिए।

 var input,search,pr,result,result_arr, locale_HTML, result_store; //input -  ,    //search -      //pr -     <body></body> //result -    pr (..    ) //result_arr -  pr,      //locale_HTML -  <body></body>    ,     

और तुरंत लोकेल_एचटीएमएल मूल्य का निर्धारण करें, भले ही हम कुछ खोज रहे हों या नहीं। मूल पृष्ठ को तुरंत सहेजने और शैलियों को रीसेट करने की क्षमता रखने के लिए यह आवश्यक है।

 var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; //     body () 

ठीक है, अब यह एक समारोह बनाने के लायक है जिसे DOM से बुलाया जाता है। तुरंत अनुमान लगाएं कि हमारे अंदर 2 कार्य होने चाहिए, जिनमें से प्रत्येक बटन दबाए गए पर निर्भर करता है। आखिरकार, हम या तो खोज करते हैं या इसे शून्य करते हैं। और यह सच / गलत विशेषता द्वारा नियंत्रित किया जाता है , जैसा कि आप याद करते हैं। आपको यह भी समझने की आवश्यकता है कि जब आप फिर से खोज करते हैं, तो पुरानी शैलियों को रीसेट करना होगा। इस प्रकार हम निम्नलिखित प्राप्त करते हैं:

 var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; //     body () function FindOnPage(name, status) { if(status) { FindOnPageBack(); FindOnPageGo(); } //     if(!status) { FindOnPageBack(); } //  } 

ठीक है, तर्क का हिस्सा लागू किया गया है, आगे बढ़ें। वर्णों की संख्या के लिए प्राप्त शब्द की जांच करना आवश्यक है। आखिर हमें 1 अक्षर / प्रतीक की तलाश क्यों करनी चाहिए। सामान्य तौर पर, मैंने इसे 3+ वर्णों तक सीमित करने का निर्णय लिया।

इसलिए, पहले हम उस मान को लेते हैं जो उपयोगकर्ता ने दर्ज किया है, और, इसकी लंबाई के आधार पर, हम या तो मुख्य खोज फ़ंक्शन, या चेतावनी और शून्यिंग फ़ंक्शन करते हैं। यह इस तरह दिखेगा:

 var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; //     body () function FindOnPage(name, status) { input = document.getElementById(name).value; //     html if(input.length<3&&status==true) { alert('        '); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //  } if(input.length>=3) { //  } function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //  if(status) { FindOnPageBack(); FindOnPageGo(); } //     if(!status) { FindOnPageBack(); } //  } 

अब मैं कोड के इस भाग की व्याख्या करूँगा। केवल एक चीज जो स्पष्ट नहीं हो सकी वह है यह रेखा:

function FindOnPageBack () {document.body.innerHTML = locale_HTML; }

यहां सब कुछ सरल है: आंतरिक HTML विधि ऑब्जेक्ट का HTML कोड लौटाती है। इस स्थिति में, हम वर्तमान निकाय को मूल के साथ प्रतिस्थापित करते हैं जिसे हमने पूरे पृष्ठ को लोड करते समय सहेजा था।

हम आगे बढ़ते हैं। हम मुख्य चर को मान देते हैं।

 var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; //     body () function FindOnPage(name, status) { input = document.getElementById(name).value; //     html if(input.length<3&&status==true) { alert('        '); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //  } if(input.length>=3) { function FindOnPageGo() { search = '/'+input+'/g'; //     pr = document.body.innerHTML; //     body result = pr.match(/>(.*?)</g); //       result_arr = []; //       () } } function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //  if(status) { FindOnPageBack(); FindOnPageGo(); } //     if(!status) { FindOnPageBack(); } //  } 

तो, इस स्तर पर, हमारे पास पहले से ही मुख्य चर और मूल्य हैं। अब हमें हाइलाइट की गई पृष्ठभूमि के साथ कोड शैलियों के आवश्यक भागों को देने की आवश्यकता है। यानी एक नियमित अभिव्यक्ति के लिए चयनित पाठ की जाँच करना (वास्तव में, नियमित अभिव्यक्ति द्वारा चयनित पाठ को फिर से नियमित अभिव्यक्ति द्वारा पार्स किया जाता है)। ऐसा करने के लिए, आपको दर्ज किए गए पाठ (किए गए) से एक नियमित अभिव्यक्ति करने की आवश्यकता है, और फिर एक चातुर्य के रूप में पारित विधि को निष्पादित करें। यहाँ eval () विधि हमारी मदद करेगी।

सामान्य तौर पर, जब हम पाठ को प्रतिस्थापित करते हैं और शैलियों के साथ परिणाम प्राप्त करते हैं, तो हमें वर्तमान HTML को प्राप्त एक के साथ बदलने की आवश्यकता होती है। हम करते हैं।

 var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; //     body () function FindOnPage(name, status) { input = document.getElementById(name).value; //     html if(input.length<3&&status==true) { alert('        '); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //  } if(input.length>=3) { function FindOnPageGo() { search = '/'+input+'/g'; //     pr = document.body.innerHTML; //     body result = pr.match(/>(.*?)</g); //       result_arr = []; //       () for(var i=0; i<result.length;i++) { result_arr[i] = result[i].replace(eval(search), '<span style="background-color:yellow;">'+input+'</span>'); //  ,        } for(var i=0; i<result.length;i++) { pr=pr.replace(result[i],result_arr[i]) //    html       } document.body.innerHTML = pr; // html  } } function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //  if(status) { FindOnPageBack(); FindOnPageGo(); } //     if(!status) { FindOnPageBack(); } //  } 

संक्षेप में, सब कुछ तैयार है, और स्क्रिप्ट पहले से ही काम कर रही है। लेकिन सुंदरता के लिए कुछ और विवरण जोड़ें।

1) उपयोगकर्ता द्वारा दर्ज किए गए पाठ में रिक्त स्थान को ट्रिम करें। यह कोड डालें:

  input = numer.replace(/^\s+/g,''); input = numer.replace(/[ ]{1,}/g,' '); 

इस लाइन के बाद:

  input = document.getElementById(name).value; //     html 

2) हम संयोगों की जांच करेंगे (यदि कोई मिलान नहीं मिला है, तो हम इस बारे में सूचित करेंगे)। यह कोड चर के बाद फ़ंक्शन FindOnPageGo () में डाला गया है।

  var warning = true; for(var i=0;i<result.length;i++) { if(result[i].match(eval(search))!=null) { warning = false; } } if(warning == true) { alert('    '); } 

आप यहां स्रोत देख सकते हैं।
आप यहां स्रोत डाउनलोड कर सकते हैं ।

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

पुनश्च: सही संचालन के लिए html डॉक्यूमेंट में टेक्स्ट हाइफ़नेशन को उन जगहों पर हटाना आवश्यक है जहाँ टैग के बीच सादा पाठ है।

उदाहरण के लिए, के बजाय

  <p>    </p> 

चाहिए

  <p>    </p> 

यह महत्वपूर्ण नहीं है, आप सेवा पर स्वचालित रूप से इन हस्तांतरणों से छुटकारा पा सकते हैं, लेकिन आप मुझे उसी समय बता सकते हैं कि इसे कैसे ठीक किया जाए, यदि आप मुझसे पहले समझते हैं।

इसके अलावा, अगर किसी ने इसे लिखा है, लेकिन एक जीवित खोज के साथ, स्रोत को साझा करें, तो पार्स करना दिलचस्प होगा।

मुझे रचनात्मक आलोचना, राय, शायद सिफारिशें सुनकर खुशी होगी।

हाल ही में मैंने एक छोटा कोड जोड़ा, पृष्ठ पर एक लाइव खोज किया। ताकि सवाल साफ हो जाए। HTML कोड नहीं बदला है। जेएस यहां देख सकते हैं ।

खोज को "place_for_live_search" वर्ग के साथ टैग का उपयोग करके आयोजित किया जाता है। तो एल्गोरिथ्म के लिए वांछित सामग्री को पार्स करने के लिए, वर्ग जोड़ें और आपका काम हो गया।