JavaScript如何将字符串形式里的img图片添加属性

方法一:使用正则表达式

以下例子中将会在img图片中添加crossorigin属性

let html = `<p>打撒抠脚大汉噶刷卡机很大凯撒</p>
               <p>规范化是的冯绍峰东风浩荡试试</p>
               <img src="http://s3.v.360xkw.com/yzb/photos/1688536327316_ca0e2e3d.jpg" alt="">
               <p>规范化是的冯绍峰东风浩荡试试</p>
               <p>规范化是的冯绍峰东风浩荡试试</p>
               <p>规范化是的冯绍峰东风浩荡试试</p>
               <p>
               <img src="http://s3.v.360xkw.com/yzb/video/1720591601760_1bd42dad&amp;画板 1.png">
               </p>
            `;  
   // 使用正则表达式来查找所有的 <img> 标签,并在其末尾添加 crossorigin 属性  
   html = html.replace(/<img([\s\S]*?)>/gi, '<img$1 crossorigin>');  
  console.log(html);

打印后的效果如下:

方法二:使用DOM解析器

let html = `<p>打撒抠脚大汉噶刷卡机很大凯撒</p>
               <p>规范化是的冯绍峰东风浩荡试试</p>
               <img src="http://s3.v.360xkw.com/yzb/photos/1688536327316_ca0e2e3d.jpg" alt="">
               <p>规范化是的冯绍峰东风浩荡试试</p>
               <p>规范化是的冯绍峰东风浩荡试试</p>
               <p>规范化是的冯绍峰东风浩荡试试</p>
               <p>
               <img src="http://s3.v.360xkw.com/yzb/video/1720591601760_1bd42dad&amp;画板 1.png">
               </p>
            `;  
let parser = new DOMParser();
let doc = parser.parseFromString(html,'text/html');
doc.querySelectorAll('img').forEach(img=>{
    img.setAttribute('crossorigin','')
});
console.log(doc.body.innerHTML)

打印的后的效果如下:

 注意:根据HTML标准,当crossorigin属性存在但没有指定值时,其行为应该等同于anonymous

 

posted on 2024-07-10 15:32  久居我梦  阅读(3)  评论(0编辑  收藏  举报

导航