HTML varlıkları, HTML’deki özel karakterler için yer tutuculardır. <, >, &, " ve ' gibi karakterlerin HTML içinde belirli anlamları vardır ve belgenin yapısını bozmamak için kaçmaları gerekir. Sunucudan veya kullanıcı girişinden HTML alırken, bunları doğru bir şekilde görüntülemek ve işlemek için bu varlıkları çözmeniz gerekir. Bu makale, JavaScript kullanarak HTML varlıklarını çözmenin iki yöntemini inceliyor.
İçerik Tablosu
Vanilla JavaScript ile HTML Varlıklarını Çözme
Vanilla JavaScript, tarayıcının yerleşik DOMParser‘ını kullanarak HTML varlıklarını çözmenin basit bir yolunu sağlar. Bu yöntem verimlidir ve harici kütüphane gerektirmez. Bununla birlikte, özellikle daha az yaygın veya özel olanları mükemmel bir şekilde işleyemeyebilir.
function decodeHTMLEntities(text) {
const doc = new DOMParser().parseFromString(text, 'text/html');
return doc.documentElement.textContent;
}
// Örnek kullanım:
const encodedText = '<p>Bu, içinde & bulunan bir paragraftır.</p>';
const decodedText = decodeHTMLEntities(encodedText);
console.log(decodedText); // Çıktı: Bu, içinde & bulunan bir paragraftır.
Bu fonksiyon, giriş dizesini DOMParser kullanarak HTML olarak ayrıştırır. Daha sonra kök öğenin textContent özelliği, HTML etiketlerini kaldırarak ve varlıkları değiştirerek çözümlenmiş metni döndürür. Bu yöntemin, giriş içinde bulunan HTML etiketlerini de kaldırdığını unutmayın.
he Kütüphanesi ile HTML Varlıklarını Çözme
Özellikle daha geniş bir varlık yelpazesi için daha kapsamlı çözümleme için he kütüphanesi sağlam bir çözümdür. Hafiftir ve npm veya bir CDN aracılığıyla kolayca kullanılabilir.
Kurulum (npm):
npm install he
Kurulum (CDN – jsDelivr):
<script src="https://cdn.jsdelivr.net/npm/he"></script>
Kurulumdan sonra, he.decode() fonksiyonunu kullanın:
// 'he' kütüphanesinin dahil olduğunu varsayalım
const encodedText = '<p>Bu, içinde & ve ' bulunan bir paragraftır.</p>';
const decodedText = he.decode(encodedText);
console.log(decodedText); // Çıktı: Bu, içinde & ve ' bulunan bir paragraftır.
he.decode(), ' (tek tırnak) gibi sayısal varlıklar da dahil olmak üzere daha geniş bir varlık yelpazesini işler.
Bir Yöntem Seçme
Her iki yöntem de HTML varlıklarını etkili bir şekilde çözer. Vanilla JavaScript yaklaşımı basit durumlar için uygundur ve harici bağımlılıklardan kaçınır. Karmaşık senaryolar veya daha geniş bir varlık yelpazesi için he kütüphanesi daha güvenilir bir çözüm sunar. Güvenlik açıklarından kaçınmak için kullanıcı girişini her zaman temizleyin.