純粋なjavascriptを使用してHTML文字列をimgタグに置き換える方法

Question

私たちは、バックエンドAPIからいくつかのコンテンツをIonic 2 Appに送ります。質問と回答。アンサーはsummernoteを使用して作成されているため、生のHTMLをアプリケーションにレンダリングすることができます。しかし、画像のズームを可能にするには、答えコンテンツにimgというタグをすべて置き換える必要があります。唯一純粋なJavaScriptのを使用して

<ion-scroll scrollX="true" scrollY="true"> 
    <img src="pathofimg" attribute1="att1" ...> 
</ion-scroll> 

で

<img src="pathofimg" attribute1="att1" ...> 

。

私は正規表現が良いアプローチであることを知っていますが、提案があります。

Answer 1

例として、これは各子要素<span>をラッパー要素<p>にラップします。エレメント名とセレクターを自分で置き換えるだけです。親要素を選択しにくい場合は、document.querySelector()を使用します。

<div> 
    <span>0</span> 
    <span>1</span> 
    <span>2</span> 
    <span>3</span> 
    <span>4</span> 
</div> 

<script> 
    var commonParentElement = document.getElementsByTagName('div')[0]; 
    var imgs = commonParentElement.getElementsByTagName('span'); 

    for (var i=0; i<imgs.length; i++) { 
     var wrap = document.createElement('p'); 
     wrap.setAttribute('style', 'font-weight:bold;'); 
     wrap.appendChild(imgs[i]); 
     commonParentElement.insertBefore(wrap, imgs[i]); 
    } 
</script> 

Here in a plunker

Answer 2

、あなたの質問にのみjavascriptタグを追加しましたとおり、ここでは「ネイティブ」document.getElementsByTagNameとelement.replaceChild方法を使用して解決されています

var images = document.getElementsByTagName('img'), 
    len = images.length, img, ion, parent; 

while (len--) { 
    ion = document.createElement("ion-scroll"); 
    ion.setAttribute("scrollX", "true"); 
    ion.setAttribute("scrollY", "true"); 

    img = images[len]; 
    parent = img.parentNode; 
    ion.innerHTML = img.outerHTML; 
    parent.replaceChild(ion, img); 
}