HTML এস্কেপ / আনএস্কেপ

HTML এস্কেপিং কী?

HTML এস্কেপিং হলো যে প্রক্রিয়ায় HTML-এ বিশেষ অর্থবহ অক্ষরগুলোকে তাদের সংশ্লিষ্ট এনটিটি রেফারেন্স দিয়ে প্রতিস্থাপন করা হয়। পাঁচটি অক্ষর যেগুলো অবশ্যই এস্কেপ করতে হবে সেগুলো হলো: অ্যাম্পারস্যান্ড (&), লেস-দ্যান (<), গ্রেটার-দ্যান (>), ডাবল কোট (") এবং সিঙ্গেল কোট (')। এস্কেপ না করলে ব্রাউজার এই অক্ষরগুলোকে প্রদর্শনযোগ্য টেক্সটের পরিবর্তে মার্কআপ নির্দেশনা হিসেবে ব্যাখ্যা করে, যা পেজ রেন্ডারিং নষ্ট করে এবং ইনজেকশন আক্রমণের সুযোগ তৈরি করে।

HTML স্পেসিফিকেশন (WHATWG কর্তৃক রক্ষণাবেক্ষণ করা হয়) দুই ধরনের ক্যারেক্টার রেফারেন্স সংজ্ঞায়িত করে: নামযুক্ত এনটিটি যেমন &amp; এবং সংখ্যাসূচক এনটিটি যেমন &#38; বা &#x26;। নামযুক্ত এনটিটি সোর্স কোডে পড়তে সহজ। সংখ্যাসূচক এনটিটি (দশমিক বা হেক্সাডেসিমাল) যেকোনো Unicode কোড পয়েন্ট প্রকাশ করতে পারে, যা নামযুক্ত এনটিটি নেই এমন অক্ষরের জন্য উপযোগী। উভয় রূপ ব্রাউজারে একই আউটপুট দেয়।

আনএস্কেপিং (ডিকোডিংও বলা হয়) হলো বিপরীত অপারেশন: এনটিটি রেফারেন্সকে তাদের আক্ষরিক অক্ষরে রূপান্তর করা। HTML সোর্স থেকে টেক্সট বের করার সময়, সিস্টেমের মধ্যে কন্টেন্ট স্থানান্তর করার সময়, বা দ্বিগুণ-এনকোড এনটিটি ডিবাগ করার সময় এটি সাধারণ প্রয়োজন। এই টুল ব্রাউজারে উভয় দিক পরিচালনা করে, তাই আপনি সেকেন্ডের মধ্যে এস্কেপিং যুক্তি যাচাই করতে বা HTML-সমৃদ্ধ উৎস থেকে সাধারণ টেক্সট পুনরুদ্ধার করতে পারেন।

HTML এস্কেপ টুল কেন ব্যবহার করবেন?

বড় টেক্সট ব্লকে হাতে করে অ্যাঙ্গেল ব্র্যাকেট ও অ্যাম্পারস্যান্ড প্রতিস্থাপন করা ক্লান্তিকর ও ত্রুটিপ্রবণ। একটি নিবেদিত টুল কোনো ইনস্টলেশন ছাড়াই এক ধাপে আপনার ইনপুট রূপান্তর করে।

HTML এস্কেপের ব্যবহারের ক্ষেত্র

HTML এনটিটি রেফারেন্স সারণি

নিচের সারণিতে সাধারণভাবে ব্যবহৃত HTML এনটিটিগুলো রয়েছে। পাঁচটি বিশেষ অক্ষর (& < > " ') HTML কন্টেন্ট ও অ্যাট্রিবিউট মানে সর্বদা এস্কেপ করতে হবে। অন্যান্য এনটিটি ঐচ্ছিক কিন্তু সোর্স কোডে টাইপ করা কঠিন বা অস্পষ্ট অক্ষরের জন্য উপযোগী।

এস্কেপিং বনাম আনএস্কেপিং: কখন কোনটি ব্যবহার করবেন

দুটি অপারেশন পরস্পরের বিপরীত। ভুল দিক বেছে নিলে দ্বিগুণ-এনকোড বা অসুরক্ষিত আউটপুট তৈরি হয়।

কোড উদাহরণ

নিচে চারটি ভাষায় HTML এস্কেপিং ও আনএস্কেপিংয়ের কার্যকরী উদাহরণ রয়েছে। প্রতিটি স্নিপেট উভয় দিক এবং নেস্টেড কোট ও সংখ্যাসূচক এনটিটির মতো প্রান্তিক ক্ষেত্র পরিচালনা করে।

// Escape HTML entities manually
function escapeHtml(str) {
  return str
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;')
}

escapeHtml('<img src="x" onerror="alert(1)">')
// → "&lt;img src=&quot;x&quot; onerror=&quot;alert(1)&quot;&gt;"

// Unescape using DOMParser (browser only)
function unescapeHtml(str) {
  const doc = new DOMParser().parseFromString(str, 'text/html')
  return doc.documentElement.textContent
}

unescapeHtml('&lt;div&gt;Hello&lt;/div&gt;')
// → "<div>Hello</div>"

import html

# Escape special characters
html.escape('<script>alert("XSS")</script>')
# → '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;'

# Escape including single quotes (quote=True is default in Python 3.8+)
html.escape("It's <b>bold</b>", quote=True)
# → 'It&#x27;s &lt;b&gt;bold&lt;/b&gt;'

# Unescape entities back to characters
html.unescape('&lt;p&gt;Price: &euro;10&lt;/p&gt;')
# → '<p>Price: €10</p>'

# Unescape numeric entities
html.unescape('&#60;div&#62;&#38;amp;&#60;/div&#62;')
# → '<div>&amp;</div>'

package main

import (
    "fmt"
    "html"
)

func main() {
    // Escape HTML special characters
    escaped := html.EscapeString(`<a href="page?id=1&sort=name">Link</a>`)
    fmt.Println(escaped)
    // → &lt;a href=&quot;page?id=1&amp;sort=name&quot;&gt;Link&lt;/a&gt;

    // Unescape back to original
    original := html.UnescapeString("&lt;b&gt;Go &amp; HTML&lt;/b&gt;")
    fmt.Println(original)
    // → <b>Go & HTML</b>
}

<?php
// Escape HTML entities (ENT_QUOTES escapes both " and ')
echo htmlspecialchars('<p class="info">Tom & Jerry's</p>', ENT_QUOTES, 'UTF-8');
// → &lt;p class=&quot;info&quot;&gt;Tom &amp; Jerry&#039;s&lt;/p&gt;

// Convert all applicable characters to HTML entities
echo htmlentities('Price: 10€ — 50% off', ENT_QUOTES, 'UTF-8');
// → Price: 10&euro; &mdash; 50% off

// Decode entities back
echo html_entity_decode('&lt;div&gt;&amp;copy; 2026&lt;/div&gt;');
// → <div>&copy; 2026</div>

সচরাচর জিজ্ঞাসা