குறிச்சொல் மூலம் ஜாவாஸ்கிரிப்ட் தேடல். ஜாவாஸ்கிரிப்டில் (jQuery இல்லாமல்) வலைப்பக்கத்தில் தேடலை ஒழுங்கமைத்தல்

சில நாட்களுக்கு முன்பு நிறுவனத்திடமிருந்து ஃப்ரண்ட்-எண்ட் டெவ் காலியிடத்திற்கான சோதனைப் பணியைப் பெற்றேன். நிச்சயமாக, பணி பல புள்ளிகளைக் கொண்டிருந்தது. ஆனால் இப்போது அவற்றில் ஒன்றைப் பற்றி மட்டுமே பேசுவோம் - ஒரு பக்க தேடலை ஒழுங்கமைத்தல். அந்த. புலத்தில் உள்ளிடப்பட்ட உரையைப் பயன்படுத்தி சாதாரணமான தேடல் (உலாவியில் Ctrl+F க்கு ஒப்பானது). பணியின் தனித்தன்மை என்னவென்றால், எந்த JS கட்டமைப்புகள் அல்லது நூலகங்களைப் பயன்படுத்துவது தடைசெய்யப்பட்டுள்ளது. எல்லாம் சொந்த ஜாவாஸ்கிரிப்ட்டில் எழுதப்பட்டுள்ளது.

யாராவது ஆர்வமாக இருந்தால், நான் குறியீட்டை எடுத்தேன்.

ஸ்கிரிப்ட் உடனடியாக வேலை செய்தது. பிரச்சனை தீர்ந்துவிட்டதாக நான் நினைத்தேன், ஆனால் அது மாறியது, ஸ்கிரிப்ட்டின் ஆசிரியருக்கு எந்த குற்றமும் இல்லை, அதில் ஒரு பெரிய குறைபாடு இருந்தது. குறிச்சொல்லின் முழு உள்ளடக்கத்தையும் ஸ்கிரிப்ட் தேடியது... மேலும், நீங்கள் யூகித்தபடி, குறிச்சொல் அல்லது அதன் பண்புக்கூறுகளை ஒத்த எழுத்துக்களின் கலவையைத் தேடும்போது, ​​முழு HTML பக்கமும் உடைந்துவிடும்.

... பொருத்தம் கிடைத்தது...
பின்னர் தற்போதைய உடல் குறிச்சொல்லைப் பெற்ற புதியதாக மாற்றுவோம். மார்க்அப் புதுப்பிக்கப்பட்டது, பாணிகள் மாறுகின்றன, மேலும் அனைத்து முடிவுகளும் திரையில் மஞ்சள் நிறத்தில் சிறப்பிக்கப்படும்.

பிரச்சனை என்ன என்பதை நீங்கள் ஏற்கனவே புரிந்துகொண்டிருக்கலாம், ஆனால் நான் இன்னும் விரிவாக விளக்குகிறேன். நீங்கள் தேடல் புலத்தில் "div" என்ற வார்த்தையை உள்ளிட்டதாக கற்பனை செய்து பாருங்கள். நீங்கள் கற்பனை செய்வது போல, உடலில் பல குறிச்சொற்கள் உள்ளன. மேலே குறிப்பிட்டுள்ள பாணிகளை அனைத்து “டிவ்களுக்கும்” பயன்படுத்தினால், அது இனி ஒரு தொகுதியாக இருக்காது, ஆனால் வடிவமைப்பு உடைந்து போவதால் புரிந்துகொள்ள முடியாத ஒன்று. இதன் விளைவாக, மார்க்அப்பை மீண்டும் எழுதிய பிறகு, முற்றிலும் உடைந்த வலைப்பக்கத்துடன் முடிவடையும். இது போல் தெரிகிறது.

நீங்கள் பார்க்க முடியும் என, பக்கம் முற்றிலும் உடைந்துவிட்டது. சுருக்கமாக, ஸ்கிரிப்ட் வேலை செய்யாததாக மாறியது, மேலும் புதிதாக எனது சொந்தமாக எழுத முடிவு செய்தேன், இது இந்த கட்டுரைக்கு அர்ப்பணிக்கப்பட்டுள்ளது.

இப்போது நாங்கள் தேடல் படிவத்தில் ஆர்வமாக உள்ளோம். நான் அதை சிவப்பு கோட்டுடன் வட்டமிட்டேன்.

அதை கொஞ்சம் தெரிந்து கொள்வோம். நான் அதை பின்வருமாறு செயல்படுத்தினேன் (இப்போதைக்கு தூய HTML). மூன்று குறிச்சொற்கள் கொண்ட படிவம்.

முதலாவது உரையை உள்ளிடுவது;
இரண்டாவது தேடலை ரத்து செய்வது (தேர்வுநீக்கம்);
மூன்றாவது தேடலுக்கானது (கண்டுபிடிக்கப்பட்ட முடிவுகளை முன்னிலைப்படுத்தவும்).

எனவே, எங்களிடம் உள்ளீட்டு புலம் மற்றும் 2 பொத்தான்கள் உள்ளன. js.js கோப்பில் ஜாவாஸ்கிரிப்ட் எழுதுவேன். நீங்கள் ஏற்கனவே உருவாக்கி இணைத்துள்ளீர்கள் என்று வைத்துக் கொள்வோம்.

தேடல் பொத்தான் மற்றும் ரத்துசெய் பொத்தானைக் கிளிக் செய்யும் போது செயல்பாட்டு அழைப்புகளை எழுதுவதுதான் நாம் முதலில் செய்வோம். இது இப்படி இருக்கும்:

இங்கே என்ன இருக்கிறது, அது ஏன் தேவைப்படுகிறது என்பதை கொஞ்சம் விளக்குகிறேன்.

உரை புலத்திற்கு நாம் id="text-to-find" ( இந்த ஐடியைப் பயன்படுத்தி, js இலிருந்து உறுப்பை அணுகுவோம்).

ரத்துசெய்யும் பொத்தானுக்கு பின்வரும் பண்புக்கூறுகளை வழங்குகிறோம்: type="button" onclick="javascript: FindOnPage("text-to-find",false); பொய்யாகத் திரும்பு;

- வகை: பொத்தான்
- கிளிக் செய்யும் போது, ​​FindOnPage("text-to-find",false) செயல்பாடு அழைக்கப்படுகிறது. மற்றும் உரை புலத்தின் ஐடியை தவறானது

தேடல் பொத்தானுக்கு பின்வரும் பண்புக்கூறுகளை வழங்குகிறோம்: type="button" onclick="javascript: FindOnPage("text-to-find",true); பொய்யாகத் திரும்பு;

- வகை: சமர்ப்பிக்கவும் (பொத்தான் அல்ல, ஏனெனில் இங்கே நீங்கள் ஒரு புலத்தில் நுழைந்த பிறகு Enter ஐப் பயன்படுத்தலாம், ஆனால் நீங்கள் ஒரு பொத்தானையும் பயன்படுத்தலாம்)
- கிளிக் செய்யும் போது, ​​FindOnPage("text-to-find",true) செயல்பாடு அழைக்கப்படுகிறது. மற்றும் உரை புலத்தின் ஐடியை அனுப்புகிறது, உண்மை

நீங்கள் இன்னும் ஒரு பண்புக்கூறை கவனித்திருக்கலாம்: உண்மை/பொய். எந்தப் பொத்தான் கிளிக் செய்யப்பட்டது என்பதைத் தீர்மானிக்க அதைப் பயன்படுத்துவோம் (தேடலை ரத்துசெய் அல்லது தேடலைத் தொடங்கு). ரத்து என்பதைக் கிளிக் செய்தால், தவறு என்பதைக் கடந்து செல்கிறோம். தேடலைக் கிளிக் செய்தால், உண்மை என்பதைக் கடந்து செல்கிறோம்.

குறியீட்டை எழுதத் தொடங்கும் முன், ஒரு படி பின்வாங்கி, விஷயங்கள் எவ்வாறு செயல்பட வேண்டும் என்பதை முதலில் விவாதிப்போம். அந்த. சாராம்சத்தில், நாங்கள் ஒரு செயல் திட்டத்தை எழுதுவோம். எனவே, ஒரு புலத்தில் உரையை உள்ளிடும்போது பக்கத்தைத் தேட வேண்டும், ஆனால் குறிச்சொற்கள் மற்றும் பண்புக்கூறுகளைத் தொட முடியாது. அந்த. உரை பொருள்கள் மட்டுமே. இதை எப்படி அடைவது - பல வழிகள் உள்ளன என்று நான் நம்புகிறேன். ஆனால் இப்போது நாம் வழக்கமான வெளிப்பாடுகளைப் பயன்படுத்துவோம்.

எனவே பின்வரும் வழக்கமான வெளிப்பாடு பின்வரும் உரையை மட்டுமே தேடும். like: ">... உரை...(.*?)(.*?)(.*?)