JavaScript - 在页面上的所有图片链接中添加img标签

Question

我在文档中有一些像这样的图片链接：

<p> Chrome logo: https://www.google.com/images/icons/product/chrome-48.png</p>
<p> Google logo: https://www.google.com/images/srpr/logo11w.png</p>

我试图在上面的链接中添加img标记以显示图片，而不是那些普通链接。

另外我有一个用于查找所有图片链接的正则表达式，但我无法在JavaScript中使用它，需要您的帮助。

结果应该像这样：

<p> Chrome logo: <img src="https://www.google.com/images/icons/product/chrome-48.png" /></p>
<p> Google logo: <img src="https://www.google.com/images/srpr/logo11w.png" /></p>

- progfa

---

你想要编辑这些文件一次，将链接转换为带有图片的链接吗？ - Floris

什么被认为是图像链接？任何以.png结尾的东西？.jpg？.image.php？displayimage=1？ - Yuriy Galanter

@YuriyGalanter 不是！只有以jpg、png、gif结尾的图片。 - progfa

JavaScript是在您的页面中运行的代码。您是否打算生成类似于document.write()的代码，以便在文件中“显示”链接？或者您想通过“cruncher”运行现有的HTML文件，将不是链接的“link-that-is-not-a-link”（因为<p>标记不是链接）转换为显示的图像？换句话说 - 要么https://www.google etc已经存在于文件中，要么它来自其他地方。在您的想法中，JavaScript的作用是什么？ - Floris

@Floris 对于第一个问题：是的，我不能用替换字符串来做吗？ - progfa

为什么你想要这个？你不能改变标记吗？ - Johansrk

Answer 1

这似乎很琐碎... http://jsfiddle.net/La7XE/

document.body.innerHTML = document.body.innerHTML.replace(/(http(s*):\/\/[\w\\x80-\\xff\#$%&~\/.\-;:=,?@\[\]+]*).(gif|png|jpg|jpeg)/gi, '<img src="$1.$3" />');

(MDN)

但你应该在服务器端完成这个任务。

- bjb568