正则匹配img标签内容追加style样式,给富文本中的图片设置大小和居中显示

    技术2022-07-11  87

    关键点:

    从str中查找出所有的img(用到正则表达式)为每个img追加style(截取字符串+style)用新img替换旧的img(replace(旧img,新img))

    匹配所有的<img ...../>的正则表达式:

    let r=RegExp(/<[img]+\s+(.*?)(?<id>\w*?)[\s'"](.*?)>/g);

    源码:

    // let contents=res.data.data.contents contents='<p><img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png" title="1593581436417082327.jpg" alt="u=2424854370,4122005517&fm=11&gp=0.jpg"/>所有img标签图片设置宽高和居中显示<img src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/doc/logo2@2x.png" title="1593581436417082327.jpg" alt="u=2424854370,4122005517&fm=11&gp=0.jpg"/></p>' let r=RegExp(/<[img]+\s+(.*?)(?<id>\w*?)[\s'"](.*?)>/g); let matchres=contents.match(r);//返回数组['<img ... />','<img ... />'] console.log("matchres===",matchres) if(matchres){ matchres.forEach((item,index)=>{ let len=item.length let _str=item.slice(0,len-2)+' style="width:60%;height:200px;text-align:center;margin:0 20%;"/>';//追加之后的img contents=contents.replace(item,_str) }) } console.log("contents===",contents) this.actContents = parseHtml(contents);

    打印结果:

     

    Processed: 0.009, SQL: 9