ToolDeck

ترميز HTML / فك الترميز

ترميز وإلغاء ترميز كيانات HTML (& < > " وغيرها)

جرب مثالاً

المدخل

المخرج

يعمل محليًا · آمن للصق الأسرار
ستظهر النتيجة هنا…

ما هو ترميز HTML؟

ترميز HTML هو عملية استبدال الأحرف ذات المعنى الخاص في HTML بمراجع الكيانات المقابلة لها. الأحرف الخمسة التي يجب ترميزها هي: علامة العطف (&)، وأقل من (<)، وأكبر من (>)، والاقتباس المزدوج (")، والاقتباس المفرد ('). بدون الترميز، يفسّر المتصفح هذه الأحرف كتعليمات ترميز بدلاً من نص قابل للعرض، مما يُفسد عرض الصفحة ويفتح الباب أمام هجمات الحقن.

تعرّف مواصفات HTML (التي تُشرف عليها WHATWG) شكلين لمراجع الأحرف: الكيانات المسماة مثل &amp; والكيانات الرقمية مثل &#38; أو &#x26;. الكيانات المسماة أسهل في القراءة داخل الكود المصدري. أما الكيانات الرقمية (العشرية أو السداسية عشرية) فيمكنها تمثيل أي نقطة رمز Unicode، مما يجعلها مفيدة للأحرف التي لا تمتلك اسماً محدداً. كلا الشكلين يُنتجان مخرجاً متطابقاً في المتصفح.

فك الترميز هو العملية العكسية: تحويل مراجع الكيانات إلى أحرفها الأصلية. هذا شائع عند استخراج النص من مصدر HTML، أو ترحيل المحتوى بين الأنظمة، أو تصحيح القوالب التي تُرمّز الكيانات مرتين. تُعالج هذه الأداة كلا الاتجاهين في المتصفح، فيمكنك التحقق من منطق الترميز أو استرداد النص العادي من أي مصدر HTML خلال ثوانٍ.

لماذا استخدام أداة ترميز HTML؟

استبدال أقواس الزاوية وعلامات العطف يدوياً عبر كتل نصية كبيرة مضنٍ وعرضة للأخطاء. أداة مخصصة تحوّل مدخلك في خطوة واحدة دون الحاجة إلى أي تثبيت.

تحويل فوري
الصق نصاً أو HTML واحصل على المخرج المُرمَّز أو المفكوك ترميزه فوراً. جميع المعالجة تتم في المتصفح مباشرةً دون أي اتصال بخادم.
🔒
خصوصيتك مضمونة
مدخلك لا يغادر المتصفح قط. لا يُرسَل شيء إلى خادم ولا يُخزَّن في أي مكان، فيمكنك معالجة نص يحتوي على بيانات اعتماد أو مفاتيح API أو كود داخلي بأمان تام.
📋
لا حساب ولا إعداد
افتح الصفحة وابدأ باللصق. لا تسجيل دخول، ولا تأكيد بريد إلكتروني، ولا تثبيت. يعمل على أي جهاز يمتلك متصفحاً حديثاً.
🌐
تغطية كاملة للكيانات
يتعامل مع الأحرف الخمسة الخاصة الإلزامية في HTML بالإضافة إلى الكيانات الرقمية (العشرية والسداسية عشرية). يدعم التحويل ذهاباً وإياباً: الترميز ثم فك الترميز يعيد السلسلة الأصلية.

حالات استخدام ترميز HTML

مطوّر الواجهة الأمامية: عرض مدخلات المستخدم
عند عرض نص أرسله مستخدم داخل صفحة، رمّزه أولاً لمنع المتصفح من تفسيره كوسوم HTML. هذا هو الدفاع الأساسي ضد XSS المخزَّن في أي قالب يُخرج سلاسل خام.
مهندس الخادم: توليد استجابات HTML
الكود على جانب الخادم الذي يدمج سلاسل في HTML يجب أن يُرمّز القيم الديناميكية قبل إدراجها. استخدم هذه الأداة للتحقق من أن دالة الترميز لديك تُنتج المخرج الصحيح لحالات الحافة مثل الاقتباسات المتداخلة.
DevOps: تضمين الإعدادات في HTML
تضمين JSON أو أوامر Shell داخل صفحة HTML (مثلاً في وسم script أو سمة data) يتطلب ترميزاً. تحقق من أن أقواس الزاوية وعلامات العطف في مقاطع الإعدادات مُشفَّرة بصورة صحيحة.
مهندس ضمان الجودة: اختبار نواقل XSS
الصق حمولات XSS الشائعة في الأداة للتأكد من أن مخرج تطبيقك يطابق الإصدار المُرمَّز بصواب. قارن المخرج المُرمَّز حرفاً بحرف مع ما ينتجه تطبيقك.
الكاتب التقني: عيّنات الكود في التوثيق
نشر مقاطع الكود في مستندات قائمة على HTML (Jekyll، Hugo، أنظمة إدارة المحتوى المخصصة) يستلزم ترميز أقواس الزاوية لصياغة الأنواع العامة وعناصر القوالب. الصق عيّنة الكود وسيُشفَّر كل حرف خاص فوراً.
الطالب: تعلّم كيانات HTML
اكتب أو الصق أي حرف وشاهد أشكال كيانه المسماة والرقمية. جرّب حالات الحافة مثل المسافات غير المنقسمة وشرطات em ورموز Unicode لتفهم كيفية عمل ترميز أحرف HTML.

جدول مرجعي لكيانات HTML

يسرد الجدول أدناه كيانات HTML الأكثر استخداماً. يجب دائماً ترميز الأحرف الخمسة الخاصة (& < > " ') في محتوى HTML وقيم السمات. الكيانات الأخرى اختيارية لكنها مفيدة للأحرف التي يصعب كتابتها أو التي تكون غامضة في الكود المصدري.

الحرفالوصفالكيان المسمىالكيان الرقمي
&Ampersand&amp;&#38;
<Less-than sign&lt;&#60;
>Greater-than sign&gt;&#62;
"Double quote&quot;&#34;
'Single quote / apostrophe&apos;&#39;
 Non-breaking space&nbsp;&#160;
©Copyright sign&copy;&#169;
®Registered sign&reg;&#174;
Em dash&mdash;&#8212;
Right single quote&rsquo;&#8217;
Euro sign&euro;&#8364;

الترميز مقابل فك الترميز: متى تستخدم كلاً منهما

العمليتان متعاكستان. اختيار الاتجاه الخاطئ يُنتج مخرجاً مُشفَّراً مرتين أو غير محمي.

الإفلات (الترميز)
استخدمه عند إدراج نص غير موثوق أو ديناميكي في HTML. يحوّل < الحرفي إلى &lt; لكي يعرض المتصفح الحرف بدلاً من بدء وسم. طبّقه قبل عرض مدخلات المستخدم أو إدخالات السجل أو أي سلسلة قد تحتوي على ترميز.
إلغاء الإفلات (فك الترميز)
استخدمه عند استخراج النص العادي من مصدر HTML. يحوّل &lt; إلى < مرة أخرى. طبّقه عند ترحيل المحتوى من نظام إدارة محتوى، أو تحليل HTML المُجمَّع، أو إصلاح السلاسل المُشفَّرة مرتين مثل &amp;amp; التي تعرض أسماء الكيانات بدلاً من الأحرف.

أمثلة برمجية

فيما يلي أمثلة عملية لترميز HTML وفك ترميزه بأربع لغات. يغطي كل مقطع كلا الاتجاهين ويتعامل مع حالات الحافة مثل الاقتباسات المتداخلة والكيانات الرقمية.

JavaScript (browser / Node.js)
// Escape HTML entities manually
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')
    .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>"
Python
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>'
Go
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
<?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>

الأسئلة الشائعة

ما الفرق بين ترميز HTML وترميز URL؟
ترميز HTML يستبدل الأحرف الخاصة في HTML (< > & " ') بمراجع كيانات مثل &lt; لتُعرض كنص. أما ترميز URL (الترميز بالنسبة المئوية) فيستبدل الأحرف غير الآمنة في عناوين URL بتسلسلات %XX السداسية عشرية. يحميان سياقين مختلفين: ترميز HTML يمنع حقن الترميز، بينما يضمن ترميز URL صحة سلاسل الاستعلام ومقاطع المسار.
ما الأحرف التي يجب ترميزها في HTML؟
الأحرف الخمسة التي يجب دائماً ترميزها هي: & (علامة العطف)، < (أقل من)، > (أكبر من)، " (اقتباس مزدوج داخل السمات)، و' (اقتباس مفرد داخل السمات). إهمال ترميز أي منها قد يكسر العرض أو يخلق ثغرة XSS.
هل &apos; صحيح في HTML5؟
نعم. كيان &apos; المسمى مُعرَّف في مواصفات HTML5 ومدعوم من جميع المتصفحات الحديثة. لم يكن جزءاً من HTML 4، الذي كان يتعرف فقط على &amp; و&lt; و&gt; و&quot;. إن احتجت دعم محللات HTML 4 القديمة جداً، استخدم الشكل الرقمي &#39; بدلاً منه.
كيف أُصلح كيانات HTML المُشفَّرة مرتين مثل &amp;amp;؟
يحدث التشفير المزدوج عندما تمر سلسلة مُرمَّزة بالفعل عبر دالة الترميز مرة ثانية. الحل هو فك الترميز حتى يستقر المخرج. الصق السلسلة المُشفَّرة مرتين في هذه الأداة في وضع فك الترميز، ثم أعد التشغيل إن بقيت مراجع &amp;. لمنع التشفير المزدوج، تحقق مما إذا كان المدخل مُرمَّزاً بالفعل قبل تطبيق دالة الترميز.
هل يمكنني استخدام كيانات HTML داخل سلاسل JavaScript؟
كيانات HTML تُفسَّر من قِبَل محلل HTML، لا محرك JavaScript. داخل كتلة script، يعمل الكود بعد أن يعالج محلل HTML الصفحة، لذا يصبح &lt; في كتلة script هو < قبل أن تراه JavaScript. بالنسبة لمعالجات الأحداث المضمّنة (onclick وغيرها)، تُفكّ شفرة HTML لقيمة السمة أولاً ثم تُنفَّذ كـ JavaScript. في ملفات .js الخارجية، الكيانات ليس لها معنى خاص وتُعامَل كنص حرفي.
ما الفرق بين htmlspecialchars وhtmlentities في PHP؟
تُرمّز ()htmlspecialchars الأحرف الخمسة الخاصة فحسب (& < > " ') التي تؤثر على بنية HTML. أما ()htmlentities فتُرمّز تلك الخمسة بالإضافة إلى كل حرف له كيان HTML مسمى، مثل علامة حقوق النشر والحروف المنقوطة. لأغراض الأمان، تكفي ()htmlspecialchars مع ENT_QUOTES. أما ()htmlentities فمفيدة عندما تحتاج مخرجاً آمناً بـ ASCII لأنظمة لا تستطيع التعامل مع UTF-8.
هل ترميز HTML كافٍ للحماية من XSS؟
يمنع ترميز HTML ثغرة XSS في الحالة الأكثر شيوعاً: إدراج نص غير موثوق في محتوى عناصر HTML أو قيم السمات. لكنه لا يحمي سياقات الحقن الأخرى. إدراج بيانات المستخدم في كتلة script يتطلب تشفير سلاسل JavaScript. الإدراج في سمة style يتطلب تشفير CSS. الإدراج في سمة URL (href، src) يتطلب التحقق من صحة URL بالإضافة إلى الترميز. الدفاع الكامل ضد XSS يطبّق تشفيراً محدداً لكل سياق عند كل نقطة إدراج.