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