使用匹配的对象值查找和替换图像 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',
        ...
    }

我想检查 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

使用forEach 遍历mapObj 的keys。每次用键值替换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

只需遍历mapObj的所有属性，然后你可以通过document.querySelector("[src='71505']")找到任何src等于键的元素，然后修复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));

Answer 3

您可以将文本包装在容器中，然后使用 querySelectorAll 来获取所有 img。然后迭代该节点列表并将值替换为对象的相应结果

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>