js正则表达式如何将span标签替换为img标签，并将原span标签的内容放到img标签的src中

Question

需求如下：

需要将字符串通过正则表达式

var str = "<h2>11</h2><span>http://files.cnblogs.com/files/wj204/2.gif</span><h2>22</h2><p>33</p><span>http://files.cnblogs.com/files/wj204/ali.gif</span>";

转化为：

var str = "<h2>11</h2>
<img src ="http://files.cnblogs.com/files/wj204/2.gif" / >
<h2>22</h2><p>33</p>
<img src="http://files.cnblogs.com/files/wj204/ali.gif"/>";

这样的结果

目前我做到的是：

1.把span标签内容匹配出来，代码为：

str.match(/<span>(.*?)<\/span>/g)

结果为：

2.用replace将span标签替换为img标签

str.replace(/<span>(.*?)<\/span>/g, "<img src/>")

结果：

接下来要怎么处理？如何将这两步关联起来，得到我的预期结果。

Answer 1

str.replace(/<span>(.*?)<\/span>/g, '<img src="$1"/>')

Answer 2

str.replace(/<span>(.*?)<\/span>/g, (match, url, index, str) => {
  return `<img src="${url}">`
})

Answer 3

示例：

var str = 'dsfsdga13213cdsgsdfgda4646cg'
// 匹配 a(\d+)c，替换为 【\d+】 格式
var result = str.replace(/a(\d+)c/g, function(match, p1){
    return '【'+ p1 + '】'
})

Answer 4

str.replace(/<span>(.*?)<\/span>/g, '<img src="$1"/>')