如何使用純JavaScript用img標簽替換HTML字符串

Question

我們有一些內容從后端api進入Ionic 2 App。 問題與解答。 答案是使用summernote創建的，因此我們能夠將原始HTML呈現到應用程序中。 但是為了允許圖像縮放，我們需要替換答案內容中所有出現的img標簽。

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

同

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

僅使用純javascript 。

我知道正則表達式是一種很好的方法，但是願意接受建議。

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>

在這里

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);
}