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

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

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

var proxy = new Proxy(target, handler);

1
2

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(") !== -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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

使用

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