Javascript - 为页面上的所有图片链接添加 img 标签答案

【问题标题】：Javascript - Add img tag for all image links on a pageJavascript - 为页面上的所有图片链接添加 img 标签
【发布时间】：2014-04-08 19:02:43
【问题描述】：

我的文档中有一些图片链接，如下所示：

<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 标签来显示图像而不是那些普通的链接。

我也有一个regex to find all image 链接，但我不能将它与 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>

【问题讨论】：

您想一次性编辑这些文件以将链接转换为带有图像的链接吗？
什么是图片链接？任何东西都以.png结尾？ .jpg？ .image.php?displayimage=1 ?
@YuriyGalanter 不！只是以 jpg,png,gif 结尾的图片
Javascript 是在您的页面中运行的代码。您是否打算让它生成document.write() 类型的代码，以便链接“出现”在文件中？或者您是否想通过将link-that-is-not-a-link（因为<p> 标记不是链接）转换为显示图像的“cruncher”运行现有的html 文件？换句话说 - https://www.google etc 已经在文件中，或者它来自其他地方。在你心中，javascript 的作用是什么？
@Floris for first q: 是的，我不能用替换字符串来做到这一点？

标签： javascript html regex

【解决方案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)

但你真的应该在服务器端做。

【讨论】：