Измените значения в URL в ответе JSON, затем отобразите URL

Question

Я пытаюсь взять URL-адрес изображения с TwitchTV и отобразить его на простом веб-сайте, используя jQuery и HTML. Согласно документации TwitchTV (и полученному ответу JSON), URL-адреса изображений возвращаются как:

https://static-cdn.jtvnw.net/ttv-boxart/PLAYERUNKNOWN%27S%20BATTLEGROUNDS-{width}x{height}.jpg

Я ищу заменить значения {width} и {height} в JSON URL с 285 и 320 соответственно, затем передайте этот URL вперед (как показано ниже):

https://static-cdn.jtvnw.net/ttv-boxart/PLAYERUNKNOWN%27S%20BATTLEGROUNDS-285x320.jpg

Вот текущий код У меня есть, и я могу отображать только стандартное значение (с {width} и ​​{height}), поэтому изображение отображается неправильно:

    for (var i = 0; i < 6; i++) {
        var imgDiv = $("<div>");
        imgDiv.addClass("col-lg-2 col-md-3 col-sm-4 text-center");
        var image = $("<img>");
        image.attr("src", response.data[i].box_art_url);
        console.log(response.data[i].box_art_url);
        imgDiv.append(image);
        $("#twitch-container").append(imgDiv);
    }
});

Answer 1

Вы можете использовать регулярное выражение, чтобы соответствовать ему.

var url = 'https://static-cdn.jtvnw.net/ttv-boxart/PLAYERUNKNOWN%27S%20BATTLEGROUNDS-{width}x{height}.jpg'
var altered = url.replace(/\{([^}]+)}/g, function(m, key) {
  return key === "width" ? 285 : 320
})
console.log(altered)

В проектах у меня обычно есть объект для поиска значений

var vals = {
  width: 285,
  height: 320,
}
var url = 'https://static-cdn.jtvnw.net/ttv-boxart/PLAYERUNKNOWN%27S%20BATTLEGROUNDS-{width}x{height}.jpg'
var altered = url.replace(/\{([^}]+)}/g, function(m, key) {
  return vals[key] || m
})
console.log(altered)

Answer 2

Вам просто нужно использовать String.replace () для каждого тега:
image.attr("src", response.data[i].box_art_url.replace('{width}', '285').replace('{height}', '320');