Найти и заменить изображение src соответствующим значением объекта

Question

Я пытаюсь заменить все значение src на соответствующее значение ключа, текст выглядит так:

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum <br /><br />
lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem <img src="71521" alt="[ppm:alt id=17835]" height="426" width="638" /> ipsumlorem ipsumlorem ipsum

мой объект выглядит следующим образом:

    var mapObj = {
        '71505':'https://images.e12b64dd10dd068f0b4b6e8e9e5e/71505.jpg',
        '69451':'https://imagesf697987a167a07402549e86089d/69451.jpg',
        '71521':'https://images673d2cf1bfcb6fcc1d30f91/71521.jpg',
        ...
    }

iхочу проверить, совпадает ли значение src с ключом объекта, если это так, тогда замените все вхождения на соответствующее значение ключа, мой желаемый вывод -

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum <br />
lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem

, пока у меня есть следующее, но это не работает

var res = row['Description'].replace(/\[(\w+)\]/g, function(s, key) {
   return mapObj[key] || s;
});

Я испробовал все решения, представленные ниже, но я все еще не могу заменить src.

Мой HTML-источник взят из листа Excel, я читаю его вот так

const rows = fs.createReadStream(csvFilePath,{encoding: `'binary'}).pipe(parser);`

Answer 1

Итерация по keys из mapObj с использованием forEach.Каждый раз заменяйте key значением ключа. Вы сказали "текст выглядит следующим образом" Поэтому я считаю, что вы запрашиваете строку

let text = `Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum <br />
<img src="69451" alt="[ppm:alt id=17835]" height="426" width="638" /><br />
lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem <img src="71521" alt="[ppm:alt id=17835]" height="426" width="638" /> ipsumlorem ipsumlorem ipsum`


var mapObj = {
        '71505':'https://images.e12b64dd10dd068f0b4b6e8e9e5e/71505.jpg',
        '69451':'https://imagesf697987a167a07402549e86089d/71513.jpg',
        '71521':'https://images673d2cf1bfcb6fcc1d30f91/71521.jpg',
    }
Object.keys(mapObj).forEach(key => {
  text = text.replace(`src="${key}"`,`src="${mapObj[key]}"`);
})
console.log(text);

Answer 2

Вы можете обернуть текст в контейнер, а затем использовать querySelectorAll, чтобы получить все изображения.Затем выведите этот нодлист и замените значение соответствующим результатом из объекта

var mapObj = {
  '71505': 'https://images.e12b64dd10dd068f0b4b6e8e9e5e/71505.jpg',
  '69451': 'https://imagesf697987a167a07402549e86089d/71513.jpg',
  '71521': 'https://images673d2cf1bfcb6fcc1d30f91/71521.jpg'
}

let txt = document.getElementById('content').querySelectorAll('img').forEach(function(item) {
  let srcVal = item.getAttribute('src');
  item.setAttribute('src', mapObj[srcVal])
});

<div id='content'>
  Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum <br/>
  <img src="69451" alt="[ppm:alt id=17835]" height="426" width="638" /><br/> lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem <img src="71521" alt="[ppm:alt id=17835]" height="426" width="638" /> ipsumlorem ipsumlorem ipsum my object goes like the following:
</div>

Answer 3

Просто переберите все свойства mapObj, затем вы можете найти любой элемент с src, равным значению ключа, выполнив document.querySelector("[src='71505']"), после этого просто исправьте src.

var mapObj = {
  '71505': 'https://images.e12b64dd10dd068f0b4b6e8e9e5e/71505.jpg',
  '69451': 'https://imagesf697987a167a07402549e86089d/71513.jpg',
  '71521': 'https://images673d2cf1bfcb6fcc1d30f91/71521.jpg'
};

for (var key in mapObj) {
  document.querySelectorAll(`[src='${key}']`).forEach(item => item.src = mapObj[key]);
}
console.log(document.body.innerHTML);

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum <br />
<img src="69451" alt="[ppm:alt id=17835]" height="426" width="638" /><br /> lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem <img src="71521" alt="[ppm:alt id=17835]" height="426" width="638" /> ipsumlorem ipsumlorem ipsum

Если HTML находится в строковой форме и вы не хотите анализировать его в HTML, вам следует заменить все вхождения src="${key}" и src = '$ {key} 'с соответствующим значением из mapObj.Вот так:

var mapObj = {
  '71505': 'https://images.e12b64dd10dd068f0b4b6e8e9e5e/71505.jpg',
  '69451': 'https://imagesf697987a167a07402549e86089d/71513.jpg',
  '71521': 'https://images673d2cf1bfcb6fcc1d30f91/71521.jpg'
};

var fullText = `Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum <br />
<img src="69451" alt="[ppm:alt id=17835]" height="426" width="638" /><br /> lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem <img src="71521" alt="[ppm:alt id=17835]" height="426" width="638" /> ipsumlorem ipsumlorem ipsum`;

function changeText(text) {
  for (var key in mapObj) {
    text = text.replace(new RegExp(`src="${key}"`, "gi"), `src="${mapObj[key]}"`)
      .replace(new RegExp(`src='${key}'`, "gi"), `src='${mapObj[key]}'`);
  }
  return text;
}

console.log(changeText(fullText));