uniapp 解析富文本的html字符串 替换网络图片为base64图片

思路

1. 通过正则表达式 捕获到所有的网络图片地址
2. 将网络图片转换成base64
3. 形成一个有网络图片和base64图片的对象数组
4. 循环这个对象数组使用replace  将 网络图片替换成 base64图片

捕获到所有的src的属性网络图片

matchImgSrcAll() {
	let str =
		"
运行以下程序
\n
\n
y和z的最终结果为:
"
	let reg = /]*src=['"]([^'"]+)[^>]*>/gi
	let imgUrlList = []
	while (reg.lastIndex < str.length){
		imgUrlList.push(reg.exec(str)[1])
	}
	console.log("99999999999999",imgUrlList)
	return imgUrlList
},

使用正则表达式 

let reg = /]*src=['"]([^'"]+)[^>]*>/gi

使用正则表达式 match 匹配时，有一个lastIndex属性，每次匹配之后，都会向后移动，直到匹配结束 lastIndex的值 等于字符串的长度 结束while循环

将网络图片转换成base64图片

getImageInfoByPath(path) {
	let info = {}
	return new Promise((resolve, reject) => {
		uni.getImageInfo({
			src: path,
			success: image => {
				console.log("image0000", image)
				pathToBase64(image.path).then(base64 => {
					info.path = path
					info.base64 = base64
					console.log("base648888888888888888", info)
					resolve(info)
				})
			},
			fail: (err) => {
				reject(err)
				console.log("err000000000000000", err)
			}
		})
	})
}

由于将网络图片转换成base64图片是异步操作，所以使用了promise

使用 uni.getImageInfo读取到图片的信息，并使用 image-tools 的 pathToBase64方法将图片转换成base64的格式

使用promise.all实现网络图片替换为base64图片

getUrlMapList(){
	let str =
		"
运行以下程序
\n
\n
y和z的最终结果为:
"
	
	let pList = []
	let imgUrlList = this.matchImgSrcAll(str)
	imgUrlList.forEach(ele=>{
		pList.push(this.getImageInfoByPath(ele))
	})
	Promise.all(pList).then(res => {
		console.log("promise", res)
		res.forEach(ele => {
			str = str.replace(ele.path, ele.base64)
		})
	
		console.log('resultstr', str)
	})
},

定义一个数组，用户盛放所有的把网络图片转化为base64的promise函数

使用promise.all实现异步请求的批量处理，将html中的网络图片批量替换为 base64的格式