چگونه کد های html را encode کنیم؟

بلاگ های برنامه نویسی را دیده اید؟ چگونه یک قطعه کد را در میان نوشته های پست خود قرار میدهند؟ من خودم در وردپرس از پلاگین SyntaxHighlighter Evolved بهره میبرم. اینها همگی از html encode استفاده میکنند.

اینجاچالش جدیدی که اخیرا با آن مواجه شدم و یک روز تحقیق اینترنتی درباره اش انجام دادم را برایتان بازگو میکنم. این پروژه کوچک از انجا شروع شد که قصد داشتیم یک قطعه کد html را وارد کنیم تا در میان متن پست نمایش داده شود.

گزینه 1: از تگ pre استفاده میشود یا code یا هر دو!

همانطور که میدانید تگ <pre> با تگ <p> یک تفاوت دارد! این تگ متن را همانطور که در ان نوشته شود نمایش میدهد و اینطور نیست که لزوما پشت سر هم بنویسد!

تگ code هم فونت را namespace میکند. و ادغامی از pre و code میتواند کدها را به خوبی نمایش دهد. مخصوصا اگر از prismjs هم استفاده شود. اما کار اینجا تمام نمیشود. اگرچه کدهای css و javascript خوب نمایش داده میشوند اما کدهای html مانند کد زیر اصلا نمایش داده نمیشود. به نظر شما راه حل چیست؟

<div>Hello World!</div>

گزینه 2: از بک کوتیشن استفاده میشود. در jsx !

بجای تگ pre از بک کوتیشن ` استفاده میشود مثلا:

Var myString = `<div>Hello
World!! </div>`

دقیقا در بروزر همینطور نمایش داده میشود. اما نکته اینجاست که داده ها در دیتابیس با فاصله ای که ما اینجا وارد میکنیم ذخیره نمیشوند. (شایدم وجود دارد و من ندیدم!) بنابراین برای ذخیره این کدها که روزی دوباره با همین فاصله در بروزر نمایش داده شوند باید انها را encode کرد.

میتوانید html encode یا html decode کنید و کدهایتان را در مقالات آنلاین نمایش دهید!

گزینه 3: از html encode استفاده میشود.

اگر فقط میخواهید در سایت خود کدهای html در یک نوشته بلاگ وارد کنید کافیست به سایت hilite.me بروید و کد html خود را وارد کنید! سپس دکمه encode را بزنید و کدهای جدید را تحویل بگیرید! به همین سادگی!

اما اگر میخواهید در دیتابیس ذخیره کنید به سایت https://mothereff.in/html-entities بروید و دو دکمه زیر را بزنید. انگاه یک سری کدهای با فاصله از هم تحویل میدهد. هنوز پروژه تمام نشده است! میدانید مشکل کجاست؟ اینجا تگ ها خوب امده اند اما فاصله ها در دیتابیس از بین میرود بنابراین باید خودمان یک تابع بنویسیم که دانه دانه المان ها را بگیرد و جایگزین کند. اما راه ساده تر این است که این انکد کردن را فراموش کنیم و از گیتهاب گیست یک تگ اسکریپت بیاوریم!

Uri encode با html encode تفاوت دارد

گزینه 4: از کدپن، سندباکس یا گیتهاب پیش نمایش بگذارید!

میتوانید کد های خود را در gist.github.com یا شبکه های اجتماعی دیگر برنامه نویسان مانند codepen و sandbox قرار دهید. سپس همان سایت در کنار کد شما یک دکمه برای کپی کردن قرار داده است. مثلا در گیتهاب گیست یک تگ اسکریپت است:

<script src = " https://gist.github.com/Shervin1995/f0676f021022a977ed0f486c9d7a2d39.js " > </script>

اما من با کمی سرچ متوجه شدم میتوان بجای تگ اسکریپت از تگ embed یا iframe هم برای لود کردنش استفاده کرد. برای مثال دو قطعه کد زیر با هم در بروزر یک کد را نمایش میدهند!

var x = encodeURI(`<script src="https://gist.github.com/Shervin1995/f0676f021022a977ed0f486c9d7a2d39.js"></script>`);
var y = `<embed style='width: 100%;height:200px' src='data:text/html;charset=utf-8,${x}'></embed>`
var element = document.querySelector('.class1')

در  اتریبیوت src در تگ embed در حال مشاهده یه سری کدهای encode شده هستید که همان تگ اسکریپت را کامل encode کرده ایم. برای تبدیل ادرس http به انچه در قسمت src در embed میبینید از یکی از متدهای گلوبال جاوااسکریپت به نام encodeURI استفاده میکنیم. برای دیدن مثال به سایت w3school بروید!

سوال: تفاوت encode های uri و html چیست؟

جواب: نکته جالبی وجود دارد. بیایید تفاوت انکودهای html و uri برای دو علامت < و > را ببینیم! انکودهای uri برای دو علامت < و > به ترتیب برابر &lt; و &gt; هستند درحالیکه انکود های html برای دو علامت < و > به ترتیب برابر %3C و %3E هستند. در حال حاضر در زبان جاوااسکریپت متد های گلوبال برای encode, decode کردن کدهای uri وجود دارد اما برای encode, decode کردن کدهای html متدی در این زبان برنامه نویسی موجود نیست!

encodeURI()
decodeURI()

برای اطلاعات بیشتر به سایت w3school مراجعه نمایید!