Javascript kullanarak string bir ifadeyi xml, html gibi birçok formata DOMParser() ile çevirebilirsiniz. DOMParser() ın nasıl kullanıldığını aşağıdaki örnek yardımıyla inceleyebilirsiniz. Javascript string to html.


var html = '<div> HTML </div>';

var dom = new DOMParser();

console.log('html => '+html);

var parser = dom.parseFromString(html,"text/html");

var query = parser.querySelector('div');

console.log(query)

JAVASCRİPT STRİNG TO HTML

DOMParser() ile dönüştürdüğünüz string ifadeler dönüştürdüğünüz türe çevrildiğinden html olarak dönüştürdüğümüzde bize bir html iskeleti geriye döndürdü. Biz de normal bir javascript sorgusu yazar gibi querySelector() sorgusu yazdık. Ancak bu sefer document yerine çevirdiğimiz ifadeyi kullandık. Çevrilen ifade artık herhangi bir web sayfasında olduğu gibi html standartlarına uygundur. Bu sebeple çevrilen ifade üzerinden normal bir web sayfası üzerinde çalıştırdığımız javascript ve css kodlarını çalıştırabiliriz.

JAVASCRİPT STRİNG TO HTML DOMParser() KULLANIM ALANLARI

Ben DOMParser() ile javascript ajax kullandığımda tanışmıştım. Aynı alan adı altındaki sayfalar ajax ile haberleşebildiğinden başka bir sayfanızdan anlık veri çekebiliyorsunuz. Ancak çektiğiniz bu veriler elinize html olarak geliyor ya da erişemeyebiliyorsunuz. Bir örnek vermek adına http://127.0.0.1:5500/ altındaki index ve index 2 html sayfalarını iletişime geçirelim.

JAVASCRİPT STRİNG TO HTML

İndex.html dosyasının html kısmı boş, index2.html dosyasının ise html kısmında sadece bir text bulunuyor.


var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {

if (this.readyState == 4 && this.status == 200) {

console.log(xhttp.responseText)

}

};

xhttp.open("GET", "http://127.0.0.1:5500/index2.html", true);

xhttp.send();

Yukarıdaki gibi bir GET sorgusu gönderdiğimizde (Bu sorguyu her alan adına gönderemezsiniz. İzin verilen alan adları, API’ler ve aynı alan adı altındaki diğer sayfalar harici) karşımıza aşağıdaki gibi bir sonuç çıkacaktır.

JAVASCRİPT STRİNG TO HTML

Live server kullandığımdan live server tarafından eklenmiş javascript kodlarını görmezden gelebilirsiniz. Gördüğünüz gibi oluşturduğumuz diğer html sayfasının kaynağını çektik. Bu şekliyle bir querySelector() çalıştırmaya çalıştığınızda hata alırsınız. Nasıl local storage dizi kaydetme aşamasında strin ifadeler ile çalışıyorsak bu tür işlemlerde de string ifdadeler ile çalışıyoruz.

Şimdi elimize gelen string formatındaki veriyi üzerinde değişiklikler yapabileceğimiz html formatına çevirelim.


var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function () {

if (this.readyState == 4 && this.status == 200) {

var html = xhttp.responseText

var dom = new DOMParser();

var parser = dom.parseFromString(html, "text/html");

console.log(parser)

}

};

xhttp.open("GET", "http://127.0.0.1:5500/index2.html", true);

xhttp.send();

Javascript ajax ile çektiğimiz verinin gelip gelmediğini kontrol ettikten sonra aynı yöntem ile DOMParser kullanarak gelen string ifadeyi html formatına çevirdik. Aşağıda gördüğünüz resimde bulunan çevrilmiş ifade ile artık queryselector gibi javascript sorgularımızı çalıştırabilir ve gelen veriye erişebiliriz.

JAVASCRİPT STRİNG TO HTML

String ya da herhangi bir formatta elinize ulaşan veriyi DOMParser kullanarak istediğiniz formata dönüştürebilirsiniz. Bu fonksiyon yerine JSON.parse(html) ile çevirme işlemi yapmaya kalktığınızda verinin json formatına uygun olmadığı ve “<” gibi işaretlerin olması sebebiyle hatalar alabilirsiniz. En yaygın ve kullanışlı seçenek DOMParser() fonksiyonudur. Javascript string to html.

DOMParser() ile Veri Hangi Formatlara Dönüştürülebilir?

image/svg+xml, application/xml, text/html arası dönüşümler yapabilirsiniz. Bu fonksiyon genellikle xml ve html veri dönüşümleri için daha çok işinize yarayacaktır. Resimlerle alakalı sorunlarınız için html canvas araştırması yapmanızı tavsiye ederim. Javascript string to html.

Kategori:

Yazılım