微信小程序-富文本

步骤

• 1.使用以封装好的mp-html 组件,方便处理图片、视频，便于高效地开发
• 2.在要使用的页面的 json 文件中引入该组件
• 3.在 wxml 文件中使用，id 作为标识该组件的唯一标识， content 则是将 html 代码渲染出来的容器
• 4.使用 selectComponent(‘id’)获取组件实例
• 5.如果要处理富文本的而其中一个标签则需要有匹配规则
• 6.获取单个标签的，然后统一处理，在然后再替换回原来的 html 中

匹配规则

• 图片的匹配规则： /<(img)[^>]*>/gi
• 匹配标签之间的文本: /(?<=>)[^>]+(?=<[\/]?\w+.*>)/g
• 视频的匹配规则: /<(video)[^>]*>/gi
• 空字符串的匹配规则: /(\s)/g
• 过滤并做替换处理: (html.match(reg) as RegExpMatchArray).toString().replace(',' , '')
• 遍历实例上的图片数组/视频数组，进行处理:

  ctx.imgList.forEach((src: string, i: number ,array: any ) => {
    array[i] = src.replace('thumb', '')
  })

示例

• 文字换行

const statuslist = _buyCarList.map((item) => {
  //有逗号分隔的情况
  return item.status.split(',')
	//无逗号分隔的情况
  // if (item.status.length > 5) {
  //   const status1 = item.status.slice(0, 3)
  //   const status2 = item.status.slice(3)
  //   const status = status1.concat(',', status2).split(',')
  //   return status
  // }
  // return [item.status]
})

• 去掉字符串文本的空格

const reg = /(\s)/g
let title = ''
if (carModelName) {
  title = (carModelName).replaceAll(reg, '')
}