Question

我有一条消息或字符串，其中既包含文字也包含图片，如下所示。

var text = '<span class="user_message">hiiiiiii <img title=":benztip" src="path../files/stickers/1427956613.gif">  <img src="path../files/stickers/416397278.gif" title=":happy"></span>';

在将此附加到聊天div之前，我想将图像的src替换为默认图像。

我如何使用Javascript或Jquery做到这一点？

Answer 1

您可以将字符串包装到jQuery对象中，并使用.find() - 方法选择消息字符串中的图像：

var msg = '<span class="user_message">hiiiiiii<img title=":benztip" src="path../files/stickers/1427956613.gif" /><img src="path../files/stickers/416397278.gif" title=":happy" /></span>';
var $msg = $(msg);

$msg.find('img').attr('src', 'path_to_img');
$("#chat_content").append($msg);

<强> Demo

Answer 2

普通旧JavaScript中的这样的东西可能适合你

＆＃13;

// save string to temporary element
var tmp = document.createElement('div');
tmp.innerHTML = '<span class="user_message">hiiiiiii <img title=":benztip" src="path../files/stickers/1427956613.gif">  <img src="path../files/stickers/416397278.gif" title=":happy"></span>';

// loop through images
var imgs = tmp.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
  var src = imgs[i].getAttribute("src"); // get current src
  src = "http://placehold.it/100x100"; // do something with path
  imgs[i].setAttribute("src", src); // set it
}

// output or whatever
document.writeln(tmp.innerHTML);

＆＃13;

Answer 3

document.getElementById("image_id").src="default_img_name";

Answer 4

尝试使用javascript解决方案，也适用于旧版浏览器。

var spanNode = document.getElementById("spanId");
spanNode.getElementsByTagName("img")[0].src = "Src1";
spanNode.getElementsByTagName("img")[1].src = "Src2";

如果有超过2张图像，您也可以使用For循环作为标记名。

Javascript更改字符串中存在的所有图像的源

4 个答案: