正则表达式用图像标签替换文本 url 链接答案

【问题标题】：RegEx to replace text url link with image tag正则表达式用图像标签替换文本 url 链接
【发布时间】：2015-03-12 02:09:05
【问题描述】：

我知道这个问题与之前提出的问题非常相似，但并不完全相同，不应该这样对待（请 mods/admins）。

我目前正在使用 Linkify() 函数，该函数是在另一个线程中发布的一段代码中找到的，但它不包含图像的正则表达式。它仅涵盖 http、https 和 mailto，但不涵盖可能包含图像的链接。

基本上我要问的是，是否有一个正则表达式可以添加到该函数（已经有 3 个模式，因此其中一个图像将被替换Pattern4），它只会检查图像链接？

例如，如果在文本中找到类似http://www.example.com/images/logo.jpg 的链接，那么它将其转换为图像标签，但显然 src="" 包含该 URL。我问的原因是我正在处理一个聊天项目，我想将指向图像的文本链接转换为实际图像，就像 Facebook 在时间轴上所做的那样。

这是我正在使用的，并已作为第四个 RegEx 模式添加到 Linkify 函数中：

replacePattern4 = /(\b(http):\/\/.(?:jpg|png|gif))</
replacedText = replacedText.replace(replacePattern4, '<img src="$1" height="100" width="100" />');

但是这根本不起作用！有什么想法吗？？

这里的任何帮助都会很棒，请记住 Linkify 已经使用的代码。

谢谢！

【问题讨论】：

您能否提供示例以及预期输出是什么？
对于任何访问这里并想要 bobince 诗歌的人stackoverflow.com/a/1732454/451600
相对链接呢？正则表达式应该检测到它们吗？
搞笑的长颈鹿船长，但对我一点帮助都没有。预期的输出 Sam，应该是 example.com/images/logo.jpg" /> 因为它将链接变成插入聊天文本的实际图像。从字面上看，所有正则表达式都应该包含查找作为图像链接的 url 的模式，而不仅仅是一般的超链接。
谢谢菲尔，但我将如何使用它检查 javascript 中的实际字符串？然后用包含超链接的图像标签替换在字符串中找到的任何文本，因为这将是一堆聊天文本并且很长？这就是为什么我想使用正则表达式但我发现似乎没有一个工作。我将修改我的原始帖子以包含我正在使用的内容，以便您查看。

标签： javascript jquery regex hyperlink

【解决方案1】：

为什么不直接使用 jQuery 的attribute-ends-with selector。例如

$('a[href$=".jpg"], a[href$=".png"], a[href$=".gif"]').each(function() {
    $(this).replaceWith($('<img>').attr('src', this.href));
});

JSFiddle

【讨论】：

我认为 OP 意味着文本本身将包含一个链接，而不是一个锚元素。
OP 需要澄清一下。问题是“我想转换指向图像的文本链接”。我认为这意味着文本锚
是的，杰克就是这样。每个聊天消息文本的内容将包含在一个名为 chatContent 的字符串变量中，然后我使用它 chatContent = linkify(chatContent);要将任何链接转换为完全可点击的超链接，但是在该链接化功能中，我需要为图像链接添加第四个模式，以便将它们更改为可以看到的实际图像，显然将文本链接转换为 img 标签并将链接放入src="" 部分。
@GeordieDave 为什么不简单地将 linkify() 的输出与 Phil 发布的内容结合起来呢？这似乎是最直接的解决方案。
我该怎么做呢？在 linkify 函数的末尾，这是代码中的内容：return reservedText 那么我将如何使用 Phil 的答案呢？