将 img 替换为其数据属性值

Question

var t = "";
$("div.postswrapper[data-value="+id2+"]").find("div.text.mainpost").children("p").each(function(p){
t+= $(this).text().trim()+"n";
});

我目前有这个，它的工作是获取所有段落标签并将它们添加到字符串中。很简单。现在我最难的部分是：

这些段落可能包含 0 到 n 个 img 标签。

例如

<p>hello<img src='https.imgur/image.png' data-raw='[img]https.imgur/image.png[/img]'>world!</p>

每个标签中都有一个字符串，其中包含一些原始数据，我需要将其替换为字符串。例如，上面将是

你好[img]https.imgur/image.png[/img]world！

我试过了

t+= $((this).find('img').replaceWith($(this).find('img').attr('data-raw')).text()).text().trim()+"n";

但由于(this(.find函数在当前上下文中不存在，

它失败了任何帮助将不胜感激。

Answer 1

使用find 查找 img 标签，然后使用 replaceWith 函数

var t = "";
$("div.postswrapper[data-value="+id2+"]").find("div.text.mainpost").children("p").each(f unction(p){
p.find('img').replaceWith(function() { return this.data-raw;     });
t+= $(this).text().trim()+"n";
});

Answer 2

请尝试以下操作：

var images = document.querySelectorAll('[data-raw]');
Array.from(images).forEach((image) => {      
image.parentElement.replaceChild(
document.createTextNode(image.getAttribute('data-raw')), 
image
);
})

Answer 3

当你说原始时，你指的是图像数据的base-64编码吗？

因此，您的代码可能会像以下那样工作： $("div.postswrapper[data-value="+id2+"]").find("div.text.mainpost").children("p").each(function(p){ p.find('img').attr('src', `data:image/png;base64, ${this.data-raw}`); }); t+= $(this).text().trim()+"n"; });