使用jquery替换html字符串中的所有图像[重复]答案

【问题标题】：Replace all images from an html string using jquery [duplicate]使用jquery替换html字符串中的所有图像[重复]
【发布时间】：2013-05-27 10:43:12
【问题描述】：

我有一个 html 字符串，我想将我的所有 img 标记替换为 figure 标记。这是我的代码

$('img',$(html)).replaceWith(function(){
    var figure = '<figure><img src="'+$(this).src+'"><figcaption>'+$(this).attr('alt')+'</figcaption></figure>';
    return $(figure);
});

此代码不起作用。我还想在执行操作后返回生成的 html 字符串，但似乎 replace 只返回已替换的元素。那我该怎么做呢？

【问题讨论】：

您要替换还是换行？
@ArunPJohny 无论如何都能完成工作。基本上我只想找到元素中的所有图像并用图形元素替换/包装它们并返回 html 字符串
@NimChimpsky 不是重复的。我在这里遇到的问题是 html 字符串是动态生成的。我想要对字符串进行操作然后返回。而且我使用的代码不起作用。
@AkshatJiwanSharma 抱歉，没有看到您提供“不工作”的行为
@AkshatJiwanSharma 您应该将 HTML 转换为 DOM 结构，然后使用 DOM 操作（因此是欺骗），然后（可选）序列化回来。从技术上讲不是重复，但足够接近。

标签： jquery html

【解决方案1】：

$(this).src 不是有效代码。在这种情况下，您需要 $(this).attr('src') 或只需 this.src。

但是，真正的问题可能是您希望就地更改 html —— 除非您不是在 html 上使用 replaceWith，而是在 $(html) 上使用。换句话说，您的 HTML 字符串没有被更改；您的临时 jQuery 对象是，然后消失。

试试这样的：

var html = /* whatever you want */;
var $html = $(html); // jQuery object

$('img', $html).replaceWith(function () {
    return '<figure><img src="' + $(this).attr('src') + '"><figcaption>' + $(this).attr('alt') + '</figcaption></figure>';
});

html = $html.html(); // update html string, if necessary

http://jsfiddle.net/mblase75/77aXS/

【讨论】：

@roasted 谢谢，已更新
谢谢！ @Blazemonger。将在 2 分钟内接受
我只有一个问题。形成我的场景 wrap 会像一条评论指出的那样更好吗？
wrap 将添加<figure>，但您仍需要自己创建<figcaption> 并删除alt 属性。最后，这段代码可能更简单。