JavaScript正则表达式替换字符串中图片地址(img src)的方法

JavaScript正则表达式替换字符串中图片地址(img src)的方法

获取HTML字符串中img src的地址

 a.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
     console.log(capture);
 });

我这里主要是给图片加一个效果：鼠标放上面变放大镜点击可以放大预览

 HTMLStr= HTMLStr.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
          '<img src=\'$1\' alt="" style="cursor: zoom-in ">')

如果要替换src的话，把$1参数换成自己要替换的地址

使用图片查看器 v-viewer 即可对图片放大预览，vue引用v-viewer插件

安装

npm install v-viewer --save

vue引用组将，在main.js加入代码

import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999
  }
})

接下来，只需要将v-viewer指令添加到任意元素即可，该元素下的所有img元素都会被viewer自动处理。
我这里用指令的方式写的，网上还有用组件的方式，~~感觉指令的比较简单

<div class="images" v-viewer="{movable: false}">
    <img v-for="src in images" :src="src" :key="src">
</div>