使用proxy把后端返回的图片域名替换成目标域名

proxy 对象用于创建一个对象的代理,是在目标对象之前架设一个拦截,外界对该对象的访问,都必须先通过这个拦截。通过这种机制,就可以对外界的访问进行过滤和改写。

ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。

以下使用示例:

export function newproxy(obj) {
    // 必须是http开头或者https开头,结尾为'/'
    // 把host替换成指定数值
    var reg = /^http(s)?:\/\/(.*?)\//;
    var ToReplace = "https://abc.com/";
    let handler = {
        get: function (target, propKey, receiver) {
            if (target[propKey]) {
                if (target[propKey].constructor == Array) {
                    target[propKey] = target[propKey].toString()
                }

                if (target[propKey].indexOf("http") !== -1) {
                    target[propKey] = target[propKey].replace(reg, ToReplace);
                }
                if (
                    target[propKey].indexOf("http") !== -1 &&
                    target[propKey].indexOf(",") !== -1
                ) {
                    var imglist = target[propKey].split(',');
                    target[propKey] = "";
                    imglist.forEach((element, index) => {
                        if (element && index == 0) {
                            target[propKey] += element.replace(reg, ToReplace);
                        } else {
                            target[propKey] += "," + element.replace(reg, ToReplace);
                        }
                    });
                }
                if (
                    target[propKey].indexOf("<img") !== -1 &&
                    target[propKey].indexOf("http") !== -1
                ) {
                    var regContent = /<img [^>]*src=['"]([^'"]+)[^>]*>/gi;
                    target[propKey] = target[propKey].replace(
                        regContent,
                        function (img, src) {
                            var regImg =
                                /<img([^>]*)\ssrc=(['"])(?:[^\2\/]*\/){3}([^\2]+)\2/gi;
                                //()捕获匹配 即匹配到的内容保存到$1...; (?:)非捕获匹配 即匹配到的内容不保存
                                //([^>]*)匹配除>的任意字符
                                //(['"])匹配‘或“
                                //(?:[^\2\/]*\/)匹配/前面除'和“和/的任意字符 {3}代表匹配和前面一样的  匹配3组
                                //如果是\2,就是匹配第二个组()匹配到的内容
                                // console.log(1, RegExp.$1);
                                //console.log(2, RegExp.$2);
                               // console.log(3, RegExp.$3);
                            let newSrc = img.replace(
                                regImg,
                                `<img$1 src=$2${ToReplace}$3$2`
                            );
                            return newSrc;
                        }
                    );
                }

            }
            return target[propKey];
        },
    };
    return new Proxy(obj, handler);
}

使用

 var newback = newproxy(data);  //data为后端返回的数据  data{img:http://1234656.com/....jpg}
const newImg=  newBack.img; //把img的域名替换成https://abc.com/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值