ใช้ JavaScript เพื่อแปลงองค์ประกอบ HTML เป็นข้อความธรรมดา
สิ่งหนึ่งที่มีประโยชน์มากกว่าที่คุณสามารถทำได้ด้วยภาษาสคริปต์ JavaScript คือการจัดการและทำงานกับ Document Object Model (หรือ "DOM") ของเอกสาร HTML DOM ของเอกสาร HTML เป็นแบบแผนสำหรับการแสดงเนื้อหาของเอกสารนั้น เป็นช่องทางให้เว็บเบราว์เซอร์และภาษาสคริปต์ เช่น JavaScript สามารถโต้ตอบกับองค์ประกอบต่างๆ ที่เขียนเอกสารนั้นได้ ด้วยการใช้ JavaScript และ DOM ของหน้าเว็บ คุณสามารถแปลง HTML เป็นข้อความธรรมดาได้อย่างง่ายดาย
ขั้นตอนที่ 1
เพิ่มการประกาศ SCRIPT ในส่วน HEAD ของเอกสาร HTML ของคุณ แท็ก SCRIPT กำหนดสคริปต์ฝั่งไคลเอ็นต์ เช่น JavaScript แท็ก SCRIPT ของคุณต้องมีแอตทริบิวต์ "type" ที่ตั้งค่าเป็น "text/javascript" เพื่อให้การประกาศ SCRIPT ทั้งหมดอ่านได้ดังนี้: (โดยที่โค้ด JavaScript จะอยู่ระหว่างสองแท็ก)
วีดีโอประจำวันนี้
ขั้นตอนที่ 2
กำหนดฟังก์ชัน JavaScript ที่รับหนึ่งสตริงเป็นพารามิเตอร์ พารามิเตอร์สตริงนี้มี HTML ที่คุณจะแปลงเป็นข้อความธรรมดา
ขั้นตอนที่ 3
สร้างองค์ประกอบ DIV ชั่วคราวภายในฟังก์ชัน JavaScript โดยใช้เมธอด "createElement()"
ขั้นตอนที่ 4
กำหนดพารามิเตอร์สตริงของฟังก์ชันให้กับแอตทริบิวต์ "innerHTML" ชั่วคราวของ DIV
ขั้นตอนที่ 5
สร้างตัวแปรสตริงชั่วคราวในฟังก์ชันของคุณ
ขั้นตอนที่ 6
หยิบเนื้อหาข้อความธรรมดาของ DIV ชั่วคราวของคุณโดยใช้แอตทริบิวต์ "textContent" และ "innerText" แล้วกำหนดให้กับตัวแปรสตริงชั่วคราวของคุณ เนื่องจากปัญหาความเข้ากันได้ข้ามเบราว์เซอร์ ทั้ง "textContent" และ "innerText" จะถูกกำหนดในบางส่วน เว็บเบราว์เซอร์และไม่ได้กำหนดไว้ในส่วนอื่น ๆ แต่จะกำหนดอย่างใดอย่างหนึ่งในทุกเวอร์ชันของสาขาวิชาทั้งหมด เบราว์เซอร์
ขั้นตอนที่ 7
ส่งคืนค่าที่ถือโดยสตริงชั่วคราวของคุณโดยใช้คำสั่ง "return" การดำเนินการนี้จะคืนค่าข้อความธรรมดาของ HTML ที่แปลงแล้ว
เคล็ดลับ
แทนที่จะใช้คำสั่ง IF-THEN เพื่อตรวจสอบความเข้ากันได้ของเบราว์เซอร์ต่างๆ และตัดสินใจว่าจะใช้ "textContent" หรือ "innerText" ในฟังก์ชันของคุณ เพียงกำหนดค่าข้อความธรรมดาขององค์ประกอบ DIV ชั่วคราวให้กับตัวแปรสตริงชั่วคราวดังนี้: var tmpString = tmpDiv.textContent || tmpDiv.innerText
