فك تشفير كيانيات HTML بكفاءة في جافا سكريبت لا تترجم فقط – بل قم بالتأقلم. فكر في كيفية تغير عادات البحث، ونية الكلمات المفتاحية، وحتى ما يُعتبر عنوانًا جذابًا من ثقافة إلى أخرى.

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

جدول المحتويات

• فك تشفير كائنات HTML باستخدام JavaScript الأصلي
• فك تشفير كائنات HTML باستخدام مكتبة he

فك تشفير كائنات HTML باستخدام JavaScript الأصلي

يوفر JavaScript الأصلي طريقة بسيطة لفك تشفير كائنات HTML باستخدام DOMParser المدمج في المتصفح. هذه الطريقة فعالة ولا تتطلب أي مكتبات خارجية. ومع ذلك، قد لا تتعامل مع جميع الكائنات بشكل مثالي، خاصةً الكائنات الأقل شيوعًا أو المخصصة.

function decodeHTMLEntities(text) {
  const doc = new DOMParser().parseFromString(text, 'text/html');
  return doc.documentElement.textContent;
}

// مثال على الاستخدام:
const encodedText = '<p>هذه فقرة بها &amp; فيها.</p>';
const decodedText = decodeHTMLEntities(encodedText);
console.log(decodedText); // المخرجات: 
هذه فقرة بها & فيها.

تقوم هذه الدالة بتحليل سلسلة الإدخال كـ HTML باستخدام DOMParser. ثم تقوم خاصية textContent للعنصر الجذر بإرجاع النص المفكك تشفيره، مع إزالة علامات HTML واستبدال الكائنات. لاحظ أن هذه الطريقة تزيل أيضًا أي علامات HTML موجودة في الإدخال.

فك تشفير كائنات HTML باستخدام مكتبة he

لفك تشفير شامل، خاصةً لمجموعة أوسع من الكائنات، تعد مكتبة he حلاً قويًا. إنها خفيفة الوزن ومتاحة بسهولة عبر npm أو CDN.

التثبيت (npm):

npm install he

التثبيت (CDN – jsDelivr):

<script src="https://cdn.jsdelivr.net/npm/he"></script>

بعد التثبيت، استخدم دالة he.decode():

// بافتراض تضمين مكتبة 'he'
const encodedText = '<p>هذه فقرة بها &amp; و ' فيها.</p>';
const decodedText = he.decode(encodedText);
console.log(decodedText); // المخرجات: 
هذه فقرة بها & و ' فيها.

تتعامل he.decode() مع طيف أوسع من الكائنات، بما في ذلك الكائنات العددية مثل ' (علامة اقتباس مفردة).

اختيار طريقة

كلا الطريقتين تقوم بفك تشفير كائنات HTML بفعالية. نهج JavaScript الأصلي مناسب للحالات البسيطة ويتجنب الاعتماد على مكتبات خارجية. في السيناريوهات المعقدة أو مجموعة أوسع من الكائنات، توفر مكتبة he حلاً أكثر موثوقية. قم دائمًا بتطهير إدخال المستخدم لمنع الثغرات الأمنية.