js正则表达式如何匹配http~jpg.png.gif格式？

Question

从后台获取的数据如何把图片地址和文字划分开来。

var str="好http://mooc-10050339.file.myqcloud.com/userH5/201707/1499306377538.gif
http://mooc-10050339.file.myqcloud.com/userH5/201707/1499306377538.jpg
http://mooc10050339.file.myqcloud.com/userH5/201707/1499306377538.png
好大家好我是好"
如何匹配http然后包含gif或png、jpg 

渲染到html页面上来
如图
好 <img src="http://mooc-10050339.file.myqcloud.com/userH5/201707/1499306377538.gif">
好大家好我是好

Answer 1

var str="好http://mooc-10050339.file.myqcloud.com/userH5/201707/1499306377538.gifhttp://mooc-10050339.file.myqcloud.com/userH5/201707/1499306377538.jpghttp://mooc10050339.file.myqcloud.com/userH5/201707/1499306377538.png好大家好我是好";
var reg = /http:\/\/.*?(gif|png|jpg)/gi
console.log(str.match(reg))

拿到结果，渲染就好了

Answer 2

开头:^ 结尾:$
例如以“123”开头、以“abc”结尾可写成： ^123.*abc$

/^http.*(gif|png|jpe?g)$/.test(src)

Answer 3

正则表达式如楼上所示，使用下面的代码替换字符串：

var str="好http://mooc-10050339.file.myqcloud.com/userH5/201707/1499306377538.gifhttp://mooc-10050339.file.myqcloud.com/userH5/201707/1499306377538.jpghttp://mooc10050339.file.myqcloud.com/userH5/201707/1499306377538.png好大家好我是好";
var reg = /http:\/\/.*?(gif|png|jpg)/gi;
var replacedStr = str.replace(reg, '<img src="$&"/>');

// insertNode表示在哪个节点下面添加上述代码，此处假设添加到body下面
var insertNode = document.body;
insertNode.innerHTML = replacedStr;

效果截图如下：