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

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

如何使用纯javascript替换img标签的HTML字符串

2 个答案: