富文本处理使用replace替换掉img标签src中未加协议及域名的路径值

1.场景

开发中遇到这种场景：商品详情页、商品介绍等选项卡栏下的数据有文字和图片，后台接口返回的数据是富文本格式，如图如下图。 但返回的img标签中的src图片路径有的完整，有的不完整，需要处理。

2. 解决方案

使用str.(, )方法，可以是字符串，也可以是正则表达式，匹配str中匹配的字符串或者满足正则规则的字符串； 就是替换匹配的字符串，函数最后返回一个新的字符串，原字符串不会改变。 第二个参数可以是返回字符串值的函数。 该函数有多个参数。 具体参数请参考文档：

为了解决当前场景下的问题，我个人使用两个参数。 匹配所有img标签的正则表达式参考这篇文章：

解决方案：匹配字符串中所有img标签，根据函数形式的第二个参数获取img中src图片的路径值，并判断该值，如果是完整路径，则根据原路径返回，而不是拼接域名并返回，最后将原字符串中的所有img标签替换为返回的字符串。 代码如下所示：

str = '
3323

'
str.replace(/]*src=http://www.shoplh.com/skin/default/image/nopic.gif"]([^'"]+)[^>]*>/gi, (match, p1) => {
    return `${p1.indexOf('http') > -1 ? p1 : 'https://aliyun.com' + p1}' />`
})

返回的新字符串：

注意：上面的处理会删除后台传过来的img标签的所有类名，但是我这里不需要，只要给图片设置width:100%，就会占用手机的宽度.如果想保留类名，可以获取match参数，获取里面的类名，放到返回的字符串中处理

以下正则表达式将匹配全局所有img标签

/]*src=http://www.shoplh.com/skin/default/image/nopic.gif"]([^'"]+)[^>]*>/gi

我们来分析一下上面的函数参数：

match：是匹配的字符串值，上面代码中打印的是所有匹配到的img标签字符串，

,

注意：这两个是分开打印的，因为每次匹配都会调用该函数，第一次匹配时会调用，之后匹配时会再次调用该函数

p1：正则表达式第一个括号内的规则匹配到的字符串。 上面的代码块中， p1 是 src 路径值，打印出来为： /album/test.jpg ，

下图是官方对函数参数的解释：

/]*src=http://www.shoplh.com/skin/default/image/nopic.gif"](http)([^'"]+)[^>]*>/gi
// 这里第一个括号就是(http)，第二个括号就是([^'"]+)