JavaScript - 在对象数组中运行 forEach.想要检查字符串中的子字符串并将其替换为新的子字符串

JavaScript - Running a forEach in array of objects. Would like to check a substring in a string and replace it with a new substring

本文关键字:字符串 字符 串并 替换 检查 对象 数组 运行 forEach JavaScript      更新时间:2023-09-26

在JavaScript中,我在对象数组上运行forEch方法。想运行我的 JSON 并在满足条件时用新字符串替换字符串中的子字符串。

问题是这样的:http://www.bucketfeet.comhttps://d153fwbf2sefnf.cloudfront.net/media/artist/d/a/daniel_falsetta_headshot.jpg 和未定义。

下面是包含 JSON 数据的代码。提前感谢您的帮助。这也是 repl 链接 - https://repl.it/BQsZ/19 以便您可以运行代码。

var dataJson = [{
    "created_at": "2015-03-27 11:08:00+00:00",
    "city": "Pueblo",
    "first_name": "daniel",
    "last_name": "Falsetta",
    "country": "US",
    "artist_id": 6709,
    "email": "8XC87gZdjX92@example.com",
    "profile_image_url": "https://d153fwbf2sefnf.cloudfront.net/media/artist/d/a/daniel_falsetta_headshot.jpg"
},{
    "created_at": "2015-03-27 11:08:00+00:00",
    "city": "Dallas",
    "first_name": "Suah",
    "last_name": "Yu",
    "country": "US",
    "artist_id": 6708,
    "email": "BATJP3mht4vd@example.com",
    "profile_image_url": ""
},{
    "created_at": "2015-03-27 11:08:00+00:00",
    "city": "Ottawa ",
    "first_name": "Makena",
    "last_name": "Ablett",
    "country": "CA",
    "artist_id": 6710,
    "email": "RTFheqUbixmy@example.com",
    "profile_image_url": "/media/artist/image-4414.jpg"
},{
    "created_at": "2015-03-27 10:53:40+00:00",
    "city": "Pittsburgh",
    "first_name": "Michelle",
    "last_name": "Vecchio",
    "country": "US",
    "artist_id": 7388,
    "email": "kpEFwMqV0Zip@example.com",
    "profile_image_url": "http://d153fwbf2sefnf.cloudfront.net/media/artist/i/m/image_473.jpg"
}, {
    "created_at": "2015-03-26 18:13:45+00:00",
    "city": "",
    "first_name": "Wendy",
    "last_name": "Slavas",
    "country": "",
    "artist_id": 28,
    "email": "aHrDLA3W5a6p@example.com",
    "profile_image_url": ""
}
];

var profUrlFunc = function() {
    var objTableArray = dataJson;
    objTableArray.forEach(function(user) {
        var httpsLinkCloudFront = "https://d153fwbf2sefnf.cloudfront.net"; //length: 37
        var httpLinkCloudFront = "http://d153fwbf2sefnf.cloudfront.net"; //length: 36
        var prefixLink = "http://www.bucketfeet.com";
        var placeHolderForLink = user.profile_image_url;
        if(user.profile_image_url) {
                    //if user profile image has HTTP /cloudfront prefix link remove it and add http://www.bucketfeet.com OR don't add anything
                     user.profile_image_url = placeHolderForLink.replace("http://d153fwbf2sefnf.cloudfront.net", "www.bucketfeet.com")
                }
                if (user.profile_image_url) {
                    //if user profile image has HTTPS /cloudfront prefix link remove it and add http://www.bucketfeet.com OR don't add anything
                    user.profile_image_url = placeHolderForLink.replace("https://d153fwbf2sefnf.cloudfront.net", "www.bucketfeet.com")
                }
                if (user.profile_image_url) {
                    //if no prefix(broken link:/media/artist/image-4414.jpg) add http://www.bucketfeet.com
                    var newModifiedLinkUrl = prefixLink.concat(placeHolderForLink)
                    user.profile_image_url = newModifiedLinkUrl;
                    console.log(user.profile_image_url);
                }
                else {
                    //if it is empty give it a default image
                    user.profile_image_url = "http://www.google.com/favicon.ico";
                }
    });
 };
console.log(profUrlFunc());

试试这个

var profUrlFunc = function() {
  var objTableArray = dataJson;
  objTableArray.forEach(function(user) {
    var httpsLinkCloudFront = "https://d153fwbf2sefnf.cloudfront.net";
    var httpLinkCloudFront = "http://d153fwbf2sefnf.cloudfront.net";
    var prefixLink = "http://www.bucketfeet.com";
    var placeHolderForLink = user.profile_image_url;
    var condition = new RegExp([httpsLinkCloudFront, httpLinkCloudFront].join('|'));
    if (user.profile_image_url) {
      if (!condition.test(user.profile_image_url)) {
        user.profile_image_url = prefixLink + user.profile_image_url;
      } else {
        user.profile_image_url = user.profile_image_url.replace(condition, prefixLink);
      }
    } else {
      user.profile_image_url = "http://www.google.com/favicon.ico";
    }
  });
  return objTableArray;
};

Example

你可以稍微简化一下你的函数:
首先,除了协议部分外,云前端的 URL 相同,replace函数可用正则表达式作为第一个参数。

/https?:'/'/d153fwbf2sefnf.cloudfront.net/

这个正则表达式说s部分https是可选的,所以这个正则表达式将 URL 与 HTTP 和 https 匹配。

其次,您应该在添加之前检查placeHolderForLink是否尚未从prefixLink开始。

所以你可以得到这样的东西:

var profUrlFunc = function () {
    var objTableArray = dataJson;
    objTableArray.forEach(function (user) {
        var LinkCloudFront = /https?:'/'/d153fwbf2sefnf.cloudfront.net/;
        var prefixLink = "http://www.bucketfeet.com";
        var placeHolderForLink = user.profile_image_url;
        if (placeHolderForLink) {
            placeHolderForLink = placeHolderForLink.replace(LinkCloudFront, prefixLink);
            if (!placeHolderForLink.startsWith(prefixLink)) {
                placeHolderForLink = prefixLink.concat(placeHolderForLink);
            }
        } else {
            //if it is empty give it a default image
            placeHolderForLink = "http://www.google.com/favicon.ico";
        }
        user.profile_image_url = placeHolderForLink;
    });
};

var dataJson = [{
    "created_at": "2015-03-27 11:08:00+00:00",
        "city": "Pueblo",
        "first_name": "daniel",
        "last_name": "Falsetta",
        "country": "US",
        "artist_id": 6709,
        "email": "8XC87gZdjX92@example.com",
        "profile_image_url": "https://d153fwbf2sefnf.cloudfront.net/media/artist/d/a/daniel_falsetta_headshot.jpg"
}, {
    "created_at": "2015-03-27 11:08:00+00:00",
        "city": "Dallas",
        "first_name": "Suah",
        "last_name": "Yu",
        "country": "US",
        "artist_id": 6708,
        "email": "BATJP3mht4vd@example.com",
        "profile_image_url": ""
}, {
    "created_at": "2015-03-27 11:08:00+00:00",
        "city": "Ottawa ",
        "first_name": "Makena",
        "last_name": "Ablett",
        "country": "CA",
        "artist_id": 6710,
        "email": "RTFheqUbixmy@example.com",
        "profile_image_url": "/media/artist/image-4414.jpg"
}, {
    "created_at": "2015-03-27 10:53:40+00:00",
        "city": "Pittsburgh",
        "first_name": "Michelle",
        "last_name": "Vecchio",
        "country": "US",
        "artist_id": 7388,
        "email": "kpEFwMqV0Zip@example.com",
        "profile_image_url": "http://d153fwbf2sefnf.cloudfront.net/media/artist/i/m/image_473.jpg"
}, {
    "created_at": "2015-03-26 18:13:45+00:00",
        "city": "",
        "first_name": "Wendy",
        "last_name": "Slavas",
        "country": "",
        "artist_id": 28,
        "email": "aHrDLA3W5a6p@example.com",
        "profile_image_url": ""
}];
var profUrlFunc = function () {
    var objTableArray = dataJson;
    objTableArray.forEach(function (user) {
        var LinkCloudFront = /https?:'/'/d153fwbf2sefnf.cloudfront.net/;
        var prefixLink = "http://www.bucketfeet.com";
        var placeHolderForLink = user.profile_image_url;
        if (placeHolderForLink) {
            placeHolderForLink = placeHolderForLink.replace(LinkCloudFront, prefixLink);
            if (!placeHolderForLink.startsWith(prefixLink)) {
                placeHolderForLink = prefixLink.concat(placeHolderForLink);
            }
        } else {
            //if it is empty give it a default image
            placeHolderForLink = "http://www.google.com/favicon.ico";
        }
        user.profile_image_url = placeHolderForLink;
    });
};
profUrlFunc();
document.getElementById('r').innerHTML = JSON.stringify(dataJson.map(function (el) {
    return el.profile_image_url
}), null, 2);
<pre id="r"></pre>

in forEach

if(placeHolderForLink && placeHolderForLink.length) {
user.profile_image_url = (!placeHolderForLink.indexof(httpsLinkCloudFront)) ? 
                                           prefixLink+placeHolderForLink.substr(placeHolderForLink.indexOf(httpsLinkCloudFront)+37)
                                          :(!placeHolderForLink.indexof(httpLinkCloudFront)) ? 
                                            prefixLink+placeHolderForLink.substr(placeHolderForLink.indexOf(httpLinkCloudFront)+36)
                                           : 
                                           prefixLink+placeHolderForLink
}

或者,可读且可维护:

if (placeHolderForLink && placeHolderForLink.length) {
    if (!placeHolderForLink.indexof(httpsLinkCloudFront)) {
      var1 = prefixLink+placeHolderForLink.substr(placeHolderForLink.indexOf(httpsLinkCloudFront)+37)
    } elsif (!placeHolderForLink.indexof(httpLinkCloudFront)) {
      var1 = prefixLink+placeHolderForLink.substr(placeHolderForLink.indexOf(httpLinkCloudFront)+36)
    } else {
      var1 = prefixLink+placeHolderForLink
    }
    user.profile_image_url =  var1
}