สร้างภาษามาร์กอัปสำหรับระบบเว็บไซต์ ASP ของคุณเอง

ผู้เขียน：Eve Cole เวลาอัปเดต：2009-06-25 17:32:25

เนื่องจากเป็นเว็บไซต์แบบไดนามิก จึงหลีกเลี่ยงไม่ได้ที่จะประสบปัญหาในการแก้ไขบทความออนไลน์ในระหว่างขั้นตอนการก่อสร้าง HTML มีแท็ก textarea แต่นั่นไม่ได้แก้ปัญหานี้จริงๆ เนื่องจาก textarea เป็นข้อความธรรมดา ยกเว้นกรณีที่คุณใช้แท็ก HTML เมื่อป้อนข้อมูล คุณจะได้รับแผ่นข้อความที่ไม่มีโครงสร้างตั้งแต่ต้นจนจบเมื่อส่งออก ในการออกแบบเว็บ การสร้างโปรแกรมแก้ไขออนไลน์แบบ WYSIWYG ผ่าน DHTML จะช่วยแก้ปัญหานี้ได้ดีมาก

แต่สิ่งที่คุณเห็นไม่ใช่ทางออกเดียว ขณะท่องอินเทอร์เน็ต ผู้เขียนพบว่าบรรณาธิการออนไลน์ของเว็บไซต์พอร์ทัลบางแห่งมีเอกลักษณ์เฉพาะตัวมาก ไม่ใช่ WYSIWYG (แต่มีฟังก์ชันแสดงตัวอย่าง) แต่เป็นช่องข้อความพื้นที่ข้อความ แต่ไม่รองรับภาษามาร์กอัป HTML แต่มีชุดภาษามาร์กอัปของตัวเองแทน

รูปที่ 1

รูปที่ 2

ผู้เขียนรู้สึกว่าใช้งานได้ลื่นไหลมากจึงสรุปข้อดีได้ดังนี้

ประการแรก ไม่มีแท็กจำนวนมาก ง่ายมากเมื่อเทียบกับ HTML และสามารถสร้างย่อหน้าโดยอัตโนมัติด้วยการกด Enter ซึ่งผู้ใช้ทั่วไปยอมรับได้อย่างง่ายดาย ผู้เขียนเชื่อว่าหากใช้แท็กภาษาจีน ผู้ใช้ในประเทศจะยอมรับได้มากขึ้น

ประการที่สอง เมื่อเปรียบเทียบกับโปรแกรมแก้ไขแบบ WYSIWYG ผู้ใช้สามารถควบคุมโครงสร้างของบทความได้ดีขึ้น และสร้างโค้ดที่อ่านไม่ออกน้อยลง

ประการที่สาม การมองเห็นได้ดีกว่า HTML มากและดียิ่งขึ้นด้วยฟังก์ชันแสดงตัวอย่าง

ประการที่สี่ ปลอดภัยกว่าเนื่องจากภาษามาร์กอัปของตัวเองไม่รองรับการเขียนสคริปต์

หลังจากที่ผู้เขียนคิดและฝึกฝนมาบ้างแล้ว ตอนนี้ฉันเปิดเผยวิธีการสร้างภาษามาร์กอัปของตัวเองแล้ว:

ขั้นแรก เราจะกำหนดชุดภาษามาร์กอัปที่เรียบง่ายและจำเป็นสำหรับเว็บไซต์ของเรา เมื่อพิจารณาให้ละเว้นรายการที่ไม่จำเป็นบางรายการ ในกรณีของฉัน ภาษามาร์กอัปที่ฉันตัดสินใจสำหรับเว็บไซต์ของฉันเป็นดังนี้:

[ภาพ]URL ของภาพ[/ภาพ]
[หัวข้อ]เนื้อหาข้อความ[/หัวข้อ]
[คำบรรยาย]เนื้อหาข้อความ[/subtitle] (เพิ่มเนื่องจากผู้ใช้อาจถูกแบ่งกลุ่ม)
[ตัวหนา]เนื้อหาข้อความ[/ตัวหนา]
[ตัวเอียง]เนื้อหาข้อความ[/ตัวเอียง]
[ลิงค์]เว็บไซต์[/ลิงค์]

จากนั้น จัดเตรียมกลไกบางอย่างเพื่อให้เบราว์เซอร์เข้าใจแท็กของเรา ดังนั้น จะทำให้เบราว์เซอร์เข้าใจแท็กที่เรากำหนดได้อย่างไร บนหน้าเว็บที่แสดงเนื้อหา เราจำเป็นต้องเขียนโปรแกรมเพื่อแปลแท็กทั้งหมดของเราให้เป็นมาตรฐาน แท็ก HTML แต่โค้ด HTML ที่ผู้ใช้ป้อนจะต้องถูกกรองออกก่อน

ขั้นตอนที่หนึ่ง: กรองโค้ด HTML

จริงๆ แล้ววิธีนี้ง่ายมาก เพียงแทนที่แท็ก "<" ทั้งหมดด้วย "<" และแทนที่ทั้งหมด ">" ด้วย ">" สิ่งนี้สามารถทำได้ใน ASP ผ่านคำสั่งต่อไปนี้:

เนื้อหา=แทนที่(เนื้อหา"<"<")

เนื้อหา=แทนที่(เนื้อหา">">")

(ในโค้ดข้างต้น content คือตัวแปรที่เก็บเนื้อหาที่เราต้องการแสดง หากปรากฏด้านล่างแสดงว่ามีความหมายเหมือนกัน)

ขั้นตอนที่ 2: แปลมาร์กอัปของเราเป็น HTML

สิ่งนี้ค่อนข้างซับซ้อน เพราะไม่ใช่แค่การแทนที่ [แท็กทั้งหมดด้วย < และ] ด้วย > แล้วแปลภาษาจีน (เช่น รูปภาพ) เป็นภาษาอังกฤษ (เช่น IMG) มีสองเหตุผล:

1 คือเนื้อหาในมาร์กอัปของเรา ซึ่งจำเป็นต้องได้รับการประมวลผลแตกต่างกันไปตามการจำแนกประเภทต่างๆ:

ประเภทแรกจะแสดงต่อผู้ใช้โดยตรง เช่น:

[หัวข้อ]ข้อความ[/หัวข้อ]

ในขณะนี้ คุณเพียงแค่ต้องแปลแท็กเป็นภาษาอังกฤษที่เกี่ยวข้องเท่านั้น ตัวอย่างเช่น แท็กด้านบนถูกแปลเป็น <h1>ข้อความ</h1>

หมวดหมู่ที่สองจะไม่นำเสนอต่อผู้ใช้โดยตรง เช่น:

[รูปภาพ]URL ของรูปภาพ[/รูปภาพ]

ในขณะนี้ เนื้อหา "URL รูปภาพ" ที่อยู่ตรงกลางของแท็กเป็นเพียง URL ที่เราต้องการแสดง ใน HTML จะเป็นแอตทริบิวต์ SRC ของแท็ก <IMG> และแท็กนี้ไม่จำเป็นต้องมีแท็กปิดท้าย HTML ผลลัพธ์ของการแปลโดยตรงคือใช่ ผิด

หมวดหมู่ที่สามจะถูกนำเสนอโดยตรงและใช้เป็นแอตทริบิวต์พร้อมกัน เช่น:

[ลิงค์]เว็บไซต์[/ลิงค์]

2. ไม่จำเป็นต้องแปลทุกสถานที่ที่มีแท็กรายการ ตัวอย่างเช่น บางครั้งผู้ใช้จำเป็นต้องใช้สัญลักษณ์ "[" และสัญลักษณ์ "]" เพื่อแสดงเนื้อหา ในขณะนี้ หากแท็กดังกล่าวแปลเป็น "<" และ ">" ไม่สอดคล้องกับความต้องการของผู้ใช้อย่างแน่นอน

หลังจากวิเคราะห์ปัญหาที่เกิดขึ้นแล้ว ผู้เขียนจะให้ข้อมูลอ้างอิงสำหรับแนวคิดในการเขียนโปรแกรมและโปรแกรมอ้างอิงด้านล่าง

เนื่องจากแท็กที่ต่างกันต้องใช้วิธีการแปลที่แตกต่างกัน ดังนั้นจึงต้องแปลแท็กที่ต่างกันทีละแท็ก

สำหรับแท็กเดี่ยวๆ อาจปรากฏหลายครั้งในบทความเดียว หรืออาจไม่ปรากฏเพียงครั้งเดียว โปรแกรมควรตรวจสอบแท็กเริ่มต้นของแท็กบางแท็กตั้งแต่ต้นจนจบ (เช่น ถ้า "รูปภาพ]ที่อยู่รูปภาพ[/รูปภาพ" ]" คือ " [รูปภาพ]") เมื่อตรวจสอบแล้วให้เริ่มตรวจสอบเครื่องหมายสิ้นสุดจากตำแหน่งนั้น หากตรวจสอบด้วยแสดงว่านี่คือเครื่องหมายที่เราต้องการหากไม่ได้ทำเครื่องหมายสิ้นสุดแล้ว หมายความว่าไม่ใช่สิ่งที่เราต้องการ แต่เป็นเพียงเนื้อหาที่ผู้ใช้แสดงเท่านั้น หลังจากตรวจสอบแล้ว แท็กจะถูกแปลเป็นแท็ก HTML และเนื้อหาในแท็กจะได้รับการประมวลผลแตกต่างกันไปตามประเภทต่างๆ หลังจากเสร็จสิ้น การตรวจสอบจะดำเนินต่อไปจากตำแหน่งของแท็กปิดท้ายจนกระทั่งสิ้นสุดบทความ

ในการเขียนจริงต้องใช้แนวคิดการเรียกซ้ำ ต่อไปนี้เป็นโปรแกรมตัวอย่างสำหรับการแปลแท็ก [รูปภาพ]ที่อยู่รูปภาพ[/รูปภาพ]

ฟังก์ชั่น TranslateImg(Str)
Start=instr(str, "[picture]") 'ตรวจสอบตำแหน่งเริ่มต้นของเครื่องหมาย ถ้า start=0 แล้วออกจากฟังก์ชัน 'ตำแหน่งเริ่มต้นคือ 0 ซึ่งหมายความว่าไม่มีเครื่องหมายดังกล่าว จากนั้นโปรแกรมจะสิ้นสุด End=instr( start, str, "[/ Picture]" 'ตรวจสอบตำแหน่งของเครื่องหมายสิ้นสุดที่ปรากฏหลังตำแหน่งเริ่มต้น ถ้า end=0 ให้ออกจากฟังก์ชัน 'ตำแหน่งของเครื่องหมายสิ้นสุดคือ 0 ซึ่งหมายความว่าไม่มีเครื่องหมายสิ้นสุดและ โปรแกรมสิ้นสุด MidStr=mid(str, start+4, end- start-4) 'ทำเครื่องหมายเนื้อหาที่อยู่ตรงกลางแทนที่Str=mid(str, start, end-start+5) 'ทำเครื่องหมายเนื้อหาที่อยู่ตรงกลางด้วยเครื่องหมาย เป็นเนื้อหาที่จะถูกแทนที่ Str=replace(instr, RefplaceStr,"<img src= ”&MidStr&”>”) 'แปลมาร์กอัปเป็น HTML
TranslateImg Str 'เรียกใช้ฟังก์ชันนี้ซ้ำ ๆ
ฟังก์ชันสิ้นสุด

จากการวิเคราะห์ข้างต้น ฉันเชื่อว่าผู้อ่านสามารถสร้างชุดภาษามาร์กอัป "MyHTML" สำหรับเว็บไซต์ของตนเองผ่านการวิเคราะห์ของตนเอง

ในการพัฒนาจริงยังคงมีปัญหาบางอย่างที่ต้องแก้ไข เช่น การประมวลผลการซ้อนเครื่องหมาย ไม่ว่าจะแปลก่อนส่งผู้ใช้ไปยังฐานข้อมูล หรือเมื่อผู้ใช้เรียกดูบทความและเรียกออกจากฐานข้อมูล ผู้ใช้ที่มีปุ่มอัตโนมัติที่มีเครื่องหมายถูกแทรกไว้เพื่ออำนวยความสะดวกในประสบการณ์การใช้งานของผู้ใช้ บทความนี้มีวัตถุประสงค์เพื่อดึงดูดความชื่นชมของผู้อ่านเท่านั้น