หากคุณต้องการค้นหาข้อความแต่ไม่สนใจว่าองค์ประกอบใดมีอยู่ คุณสามารถดูที่ innerHTML บน document.body innerHTML - สตริง; เมื่อคุณเข้าถึง เบราว์เซอร์จะสร้างสตริง HTML สำหรับองค์ประกอบ DOM ทั้งหมดในองค์ประกอบที่คุณเรียกใช้ (และองค์ประกอบที่สืบทอด) โปรดทราบว่านี่ไม่ใช่เนื้อหาต้นฉบับจากเซิร์ฟเวอร์ สิ่งนี้ถูกสร้างขึ้นทันทีเมื่อมีการเข้าถึงองค์ประกอบ สำหรับกรณีการใช้งานหลายๆ กรณี การได้รับสตริงนี้แล้วลองดูอาจมีประโยชน์ได้ โปรดทราบว่าข้อความที่คุณกำลังดูอยู่นั้นเป็นมาร์กอัป ตัวอย่างเช่น หากคุณค้นหาคำว่า "ตาราง" คุณอาจพบข้อความนั้นในประโยค ("เรานั่งลงที่โต๊ะ") หรือในมาร์กอัป (
...).
นี่คือตัวอย่างการนับคำว่า ฉัน บนหน้าเว็บโดยใช้ innerHTML: live copy
(function() ( var pageText = document.body.innerHTML; display("จำนวน "I\"m" บนเพจ: " + pageText.match(/I"m/g).length); function display(msg ) ( var p = document.createElement("p"); p.innerHTML = String(msg); document.body.appendChild(p); ) ))();
หากคุณต้องการทราบว่าองค์ประกอบใดอยู่ในองค์ประกอบใด คุณจะต้องเขียนฟังก์ชันแบบเรียกซ้ำที่ผ่านโหนดของหน้า และสำหรับ Text ให้ดูที่ข้อความภายใน นี่คือตัวอย่างพื้นฐาน (ฟังก์ชันคือฟังก์ชันการเดิน): Live Copy | - ดูหมายเหตุเกี่ยวกับตัวอย่างในตอนท้าย
(function() ( varmatch = , index; walk(matches, document.body, ""); function walk(matches, node, path) ( var child; switch (node.nodeType) ( กรณีที่ 1: // องค์ประกอบสำหรับ (child = node.firstChild; child; child = child.nextSibling) ( walk(matches, child, path + "/" + node.tagName); ) แบ่ง; กรณีที่ 3: // ข้อความ if (node.nodeValue.indexOf( "I"m") !== -1) (matchs.push("Found it at " + path); ) break; ) ) display("Matches found (" +matches.length + "):"); สำหรับ (ดัชนี = 0; ดัชนี< matches.length; ++index) {
display(matches);
}
function display(msg) {
var p = document.createElement("p");
p.innerHTML = String(msg);
document.body.appendChild(p);
}
})();
หากต้องการค้นหาองค์ประกอบบนรหัสหน้าให้ใช้
jQuery
เมื่อสองสามวันก่อน ฉันได้รับงานทดสอบจากบริษัทเกี่ยวกับตำแหน่งงานว่างของ Front-end dev แน่นอนว่างานนี้ประกอบด้วยหลายจุด แต่ตอนนี้เราจะพูดถึงเพียงเรื่องเดียวเท่านั้น - การจัดระเบียบการค้นหาหน้า เหล่านั้น. การค้นหาซ้ำๆ โดยใช้ข้อความที่ป้อนในช่อง (คล้ายกับ Ctrl+F ในเบราว์เซอร์) ลักษณะเฉพาะของงานคือห้ามใช้เฟรมเวิร์ก JS หรือไลบรารีใด ๆ ทุกอย่างเขียนด้วย JavaScript ดั้งเดิม
กำลังค้นหาวิธีแก้ปัญหาสำเร็จรูป ความคิดแรก: มีคนเขียนสิ่งนี้ไว้แล้ว คุณต้อง google และคัดลอกและวาง ฉันก็เลยทำ ภายในหนึ่งชั่วโมง ฉันพบสคริปต์ดีๆ สองบทที่ทำงานในลักษณะเดียวกัน แต่เขียนต่างกัน ฉันเลือกอันที่มีโค้ดที่ฉันเข้าใจดีกว่าและวางลงในหน้าแรกของฉัน ถ้าใครสนใจก็เอาโค้ดไปนะครับ
สคริปต์ทำงานได้ทันที ฉันคิดว่าปัญหาได้รับการแก้ไขแล้ว แต่เมื่อปรากฏว่าผู้เขียนบทไม่มีความผิด มีข้อบกพร่องใหญ่หลวงอยู่ สคริปต์ค้นหาเนื้อหาทั้งหมดของแท็ก... และอย่างที่คุณคงเดาได้ เมื่อค้นหาชุดอักขระใดๆ ที่คล้ายกับแท็กหรือคุณลักษณะ หน้า HTML ทั้งหมดอาจเสียหาย
เหตุใดสคริปต์จึงทำงานไม่ถูกต้อง มันง่ายมาก สคริปต์ทำงานดังนี้ ขั้นแรก เราเขียนเนื้อหาทั้งหมดของแท็ก body ลงในตัวแปร จากนั้นเราค้นหารายการที่ตรงกันด้วยนิพจน์ทั่วไป (ตั้งค่าโดยผู้ใช้เมื่อป้อนลงในช่องข้อความ) จากนั้นเราจะแทนที่รายการที่ตรงกันทั้งหมดด้วยโค้ดต่อไปนี้: ...พบรายการที่ตรงกัน...
จากนั้นเราจะแทนที่แท็กเนื้อหาปัจจุบันด้วยแท็กใหม่ที่ได้รับ มาร์กอัปได้รับการอัปเดต สไตล์เปลี่ยนไป และผลลัพธ์ที่พบทั้งหมดจะถูกไฮไลต์เป็นสีเหลืองบนหน้าจอ
คุณอาจเข้าใจแล้วว่าปัญหาคืออะไร แต่ฉันยังคงอธิบายรายละเอียดเพิ่มเติมต่อไป ลองนึกภาพว่าคุณป้อนคำว่า "div" ลงในช่องค้นหา อย่างที่คุณสามารถจินตนาการได้ มีแท็กอื่นๆ มากมายภายในเนื้อหา รวมถึง div ด้วย และหากเราใช้สไตล์ที่ระบุไว้ข้างต้นกับ "div" ทั้งหมด มันจะไม่เป็นบล็อกอีกต่อไป แต่เป็นสิ่งที่เข้าใจยากเนื่องจากการออกแบบพัง ด้วยเหตุนี้ หลังจากเขียนมาร์กอัปใหม่แล้ว เราจะพบว่าหน้าเว็บเสียหายโดยสิ้นเชิง มีลักษณะเช่นนี้
อย่างที่คุณเห็นหน้าพังไปหมด กล่าวโดยสรุป สคริปต์กลายเป็นว่าใช้งานไม่ได้ และฉันตัดสินใจเขียนเองตั้งแต่ต้น ซึ่งเป็นจุดประสงค์ของบทความนี้
ดังนั้นเราจึงเขียนสคริปต์ตั้งแต่เริ่มต้น นี่คือสิ่งที่ทุกอย่างมองหาสำหรับฉัน 
ตอนนี้เราสนใจแบบฟอร์มการค้นหา ฉันวงกลมด้วยเส้นสีแดง
ลองคิดดูหน่อย ฉันใช้งานมันดังต่อไปนี้ (HTML ล้วนๆ ในตอนนี้) รูปแบบที่มีสามแท็ก
อันแรกใช้สำหรับป้อนข้อความ
ประการที่สองคือการยกเลิกการค้นหา (ยกเลิกการเลือก)
ประการที่สามคือการค้นหา (เน้นผลลัพธ์ที่พบ)
ดังนั้นเราจึงมีช่องป้อนข้อมูลและปุ่ม 2 ปุ่ม ฉันจะเขียน JavaScript ในไฟล์ 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); กลับเท็จ;"
- ประเภท: send (ไม่ใช่ปุ่ม เนื่องจากคุณสามารถใช้ Enter หลังจากป้อนข้อมูลในช่องแล้ว แต่คุณสามารถใช้ปุ่มก็ได้)
- เมื่อคลิกแล้ว ฟังก์ชัน FindOnPage("text-to-find",true) จะถูกเรียก และส่งรหัสของช่องข้อความเป็นจริง
คุณอาจสังเกตเห็นคุณลักษณะอีกอย่างหนึ่ง: ถูกผิด- เราจะใช้เพื่อพิจารณาว่าปุ่มใดถูกคลิกปุ่ม (ยกเลิกการค้นหาหรือเริ่มการค้นหา) หากเราคลิกยกเลิก เราจะผ่าน false หากเราคลิกค้นหา เราจะผ่าน true
โอเค เรามาต่อกันดีกว่า มาดู JavaScript กันดีกว่า เราจะถือว่าคุณได้สร้างและเชื่อมต่อไฟล์ js กับ DOM แล้ว ก่อนที่เราจะเริ่มเขียนโค้ด เรามาย้อนกลับไปคุยกันก่อนว่าสิ่งต่างๆ ควรทำงานอย่างไร เหล่านั้น. โดยพื้นฐานแล้วเราจะเขียนแผนปฏิบัติการ ดังนั้นเราจึงจำเป็นต้องค้นหาหน้าเมื่อป้อนข้อความลงในฟิลด์ แต่ไม่สามารถแตะแท็กและแอตทริบิวต์ได้ เหล่านั้น. เฉพาะวัตถุข้อความเท่านั้น วิธีบรรลุเป้าหมายนี้ - ฉันแน่ใจว่ามีหลายวิธี แต่ตอนนี้เราจะใช้นิพจน์ทั่วไป
ดังนั้นนิพจน์ทั่วไปต่อไปนี้จะค้นหาเฉพาะข้อความต่อไปนี้เท่านั้น ชอบ: ">... ข้อความ...... ข้อความ...
แจ้งการพิมพ์ผิด
ข้อความที่จะส่งถึงบรรณาธิการของเรา:
