javascript - 如何使用纯 javascript 将 HTML 字符串替换为 img 标签

Question

我们有一些内容来自后端 api 到 Ionic 2 应用程序中。问题与解答。答案是使用 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>

Here in a plunker