- 功能：富文本内容格式化、拿到富文本里的所有图片点击放大图片
-
util.ts
export function formatRichText(html: any) { // 富文本内容格式化let arrText = html;//正则匹配不含style="" 或 style='' 的img标签var regex1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)", "gmi");//给不含style="" 或 style='' 的img标签加上style=""arrText = arrText.replace(regex1, "$2 style=\"\"$3");//正则匹配含有style的img标签var regex2 = new RegExp("(i?)(\<img.*?style=['\"])([^\>]+\>)", "gmi");//在img标签的style里面增加css样式(这里增加的样式：width:100%;)arrText = arrText.replace(regex2, "$2width:100%;$3");// 正则表达式 全局匹配 table tr td标签，并给各自标签添加class类名arrText = arrText.replace(/<table/g, '<table class="table-rich"')arrText = arrText.replace(/<tr/g, '<tr class="table-tr"')arrText = arrText.replace(/<td/g, '<td class="table-td"')return arrText}
-
使用 index.ts
import { formatRichText } from "../util";data: {content: '',imgArr: []},onLoad(options: any) {this.getData();},getData() {const res = '富文本编辑器内容'const data = formatRichText(res);// 主要代码为后面预览图片准备let imgArr: any = [];let regex = new RegExp(/<img.*?(?:>|\/>)/gi); // 匹配所有图片let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配src图片let arrsImg = data.match(regex); // data后台返回的富文本数据if (arrsImg && arrsImg.length > 0) {for (let i = 0; i < arrsImg.length; i++) {let srcs = arrsImg[i].match(srcReg);imgArr.push(srcs[1])}}this.setData({content: data,imgArr})console.log(data) // 富文本内容console.log(imgArr) // 图片数组},// 点击放大预览图片函数catchImage() {wx.previewImage({current: this.data.imgArr[0], // 当前显示图片的http链接urls: this.data.imgArr // 需要预览的图片http链接列表})},
-
index.wxml
<rich-text nodes="{{content}}" space="ensp" catchtap="catchImage"></rich-text>
