Javscript

Bir dizeden tüm HTML etiketleri nasıl kaldırılır?

HTML dizilerindeki metin karakterlerini sayarken, genellikle karakterleri HTML işaretleme koduna dahil etmek istemezsiniz. HTML’yi RegExp ile ayrıştırmanın sınırları olsa da, bu durumda RegExp çok iyi çalışıyor.

Tüm HTML etiketlerini bir dizgeden çıkarmak için bir RegExp ile değiştirebilirsiniz. /<(.|n)*?>/g:

const html = '<p>Lorem <a href="https://writingjavascript.com/page">ipsum</a> <img src="/image.png"></p>';
const text = html.replace(/<(.|n)*?>/g, '');

console.log(text);

Metin zaten bir tarayıcıda işlenmişse

İçerik zaten bir tarayıcı bağlamında oluşturulmuşsa, öğeyi bulup kullanabilirsiniz. .textContent:

const element = document.querySelector('#my-element');
const text = element.textContent;

console.log(text);

innerHTML/textContent ile filtrelemenin XSS (siteler arası komut dosyası çalıştırma) riskleri

Daha az güvenli olan .innerHTML/.textContent alternatifini kullanmak da teknik olarak mümkündür:

element.innerHTML = '<p>Lorem ipsum</p>';
const text = element.textContent;

Hatta DOMParser.parseFromString() kullanılabilir, ancak burada dikkatli olunması gereken bir kelimedir. ile doğrudan HTML kodu atama .innerHTML kod kullanıcı girdisinden gelebileceğinden, sisteminizi siteler arası komut dosyası çalıştırma (XSS) saldırılarına karşı savunmasız bırakma riskleri.

Bu, o HTML kodundaki herhangi bir JavaScript’in çalışacağı ve resimler veya yazı tipleri gibi varlıklara yapılan referansların, URL’lerin kullanıcı hakkında bilgileri açığa çıkarabileceği dış etki alanlarına HTTP isteklerini tetikleyeceği anlamına gelir.

Hala bu çözümü kullanmak istiyorsanız, önce dizeyi aşağıdaki gibi bir güvenlik paketiyle filtrelemenizi tavsiye ederim. DOMPutify emin olmak. Bu durumda, bu, çözümü ilk önerilen RegExp’i kullanmaktan çok daha karmaşık hale getirir, bu nedenle muhtemelen RegExp burada tercih edilen çözüm olacaktır.

Say ve güvende kal!

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu