如何用javascript为html字符串中的元素添加类？

Question

我有一个来自后台API的html字符串，我想给html字符串中的所有图片元素添加类，我可以用jQuery来做，但是jQuery不能在服务器端渲染，所以我在寻找javascript的解决方案。

以下是html字符串

let html="<p>here is a blog test<img src="https://bucket.s3.ap-south-1.amazonaws.com/83a5e290-8a8d-11ea-8466.jpg"></p>"

我想给图片元素添加类

任何帮助或建议都将是非常感激的。

Answer 1

我想你可以使用 `` 例如，用回标来形成你的内容。

let html = `<p>here is a blog test<img src="https://bucket.s3.ap-south-1.amazonaws.com/83a5e290-8a8d-11ea-8466.jpg" class=${className}></p>`

Answer 2

你可以用 DOMParser 为了达到这个目的，也有一种方法可以用str.replace来实现，但在我看来这不是一个干净的方法，这里有一个工作的例子。

let html='<p>here is a blog test<img src="https://bucket.s3.ap-south-1.amazonaws.com/83a5e290-8a8d-11ea-8466.jpg"></p>'


parser = new DOMParser();
doc = parser.parseFromString(html, "text/html");

let images = doc.firstChild.getElementsByTagName('img');

for(let i =0; i<images.length; i++) {
  images[i].classList.add('img-element');
  console.log(images[i]);
}