जावास्क्रिप्ट में HTML एंटिटीज का कुशलतापूर्वक डिकोडिंग

HTML इकाइयाँ HTML में विशेष वर्णों के लिए प्लेसहोल्डर होती हैं। <, >, &, ", और ' जैसे वर्णों के HTML के भीतर विशिष्ट अर्थ होते हैं और दस्तावेज़ की संरचना को बाधित करने से बचने के लिए इन्हें एस्केप किया जाना चाहिए। सर्वर या उपयोगकर्ता इनपुट से HTML प्राप्त करते समय, आपको इन्हें सही ढंग से प्रदर्शित करने और उनका हेरफेर करने के लिए इन इकाइयों को डिकोड करने की आवश्यकता होती है। यह लेख जावास्क्रिप्ट का उपयोग करके HTML इकाइयों को डिकोड करने के दो तरीकों का पता लगाता है।

विषय-सूची

• वैनिला जावास्क्रिप्ट के साथ HTML इकाइयों को डिकोड करना
• he लाइब्रेरी के साथ HTML इकाइयों को डिकोड करना

वैनिला जावास्क्रिप्ट के साथ HTML इकाइयों को डिकोड करना

वैनिला जावास्क्रिप्ट ब्राउज़र के अंतर्निहित DOMParser का उपयोग करके HTML इकाइयों को डिकोड करने का एक सरल तरीका प्रदान करता है। यह विधि कुशल है और इसके लिए किसी बाहरी लाइब्रेरी की आवश्यकता नहीं है। हालाँकि, यह सभी इकाइयों को पूरी तरह से संभाल नहीं सकता है, विशेष रूप से कम सामान्य या कस्टम वाले।

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); // आउटपुट: 
यह एक पैराग्राफ है जिसमें & है।

यह फ़ंक्शन DOMParser का उपयोग करके इनपुट स्ट्रिंग को HTML के रूप में पार्स करता है। रूट तत्व की textContent प्रॉपर्टी तब डिकोड किए गए टेक्स्ट को वापस कर देती है, HTML टैग को हटा देती है और इकाइयों को बदल देती है। ध्यान दें कि यह विधि इनपुट में मौजूद किसी भी HTML टैग को भी हटा देती है।

he लाइब्रेरी के साथ HTML इकाइयों को डिकोड करना

अधिक व्यापक डिकोडिंग के लिए, विशेष रूप से इकाइयों की व्यापक श्रेणी के लिए, 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 इकाइयों को डिकोड करती हैं। वैनिला जावास्क्रिप्ट दृष्टिकोण सरल मामलों के लिए उपयुक्त है और बाहरी निर्भरताओं से बचाता है। जटिल परिदृश्यों या इकाइयों की व्यापक श्रेणी के लिए, he लाइब्रेरी एक अधिक विश्वसनीय समाधान प्रदान करती है। सुरक्षा कमजोरियों को रोकने के लिए हमेशा उपयोगकर्ता इनपुट को साफ करें।