微信小程序之富文本那些事

这篇具有很好参考价值的文章主要介绍了微信小程序之富文本那些事。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

小程序中使用富文本编辑器,由于rich-text受限 部分富文本内容无法渲染或排版错乱。以img和video为例,处理起来让人头疼。网上各种长篇大论,实际上没有任何帮助。接下来我们就一起聊聊img和video。


一、video的处理

因为rich-text不识别video,所以小程序端无法渲染。网上看很多都是下载插件处理,如果是一个单独视频 我个人觉得用正则匹配出来就行了,如果是富文本里面还穿插其他内容,可以试试插件。近期我们做的需求是把富文本里面的video拿出来单独渲染。
那么接下来我们就看看单独渲染如何处理吧。
此处是部分核心代码 并非完整案例代码

let htmlStr = '<p>测试题目解析的东西</p>↵<p><video controls="controls" width="300" height="150">↵<source src="https://scsf.oss-cn-shanghai.aliyuncs.com/tk/4d896a6e-f467-4a6d-bbc0-e30b5135db2f/bg.mp4" type="video/mp4"></video></p>'
let videoList = formatVideo(htmlStr )
const formatVideo = (htmlStr )=>{
  if (!htmlStr ) return []
  let srcReg = /(?<=(source[^>]src="))[^"]*/g
  let videoList = htmlStr.match(srcReg) || []
  return videoList
}

二、img的处理

说起img的处理 网上各种版本,网上大部分都是直接暴力 设置max-width跟height auto;看到后只想吐槽一句,‘兄弟,你这是用到实战项目上吗’ 。
img处理 包含三种情况
第一种 不带style
例如

let htmlStr = '<img src="...." />'

第二种 带style不包含width
例如

let htmlStr = '<img style="text-align:center" src="...."'

第三种 带style并且有style
例如

let htmlStr = '<img style="width:100px;height:30px;" src="...." />'

所以针对以上情况 分别进行处理就行。
第一步 判断是否包含style属性

 let regExp = new RegExp('(i?)(<img)(?!(.*?style=[\'"](.*)[\'"])[^>]+>)', 'gmi')

第二步 取出style属性值。

let srcReg = /(?<=(<img[^>]style="))[^"]*/g

第三步 判断是否包含width
完整代码

const formatRichTextInfo = (str, width) => {
  var regExp = new RegExp('(i?)(<img)(?!(.*?style=[\'"](.*)[\'"])[^>]+>)', 'gmi')
  let result = ''
  if (regExp.test(str)) {
    result = str.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
  } else {
    let srcReg = /(?<=(<img[^>]style="))[^"]*/g
    let attributeList = str.match(srcReg) || []
    if (attributeList && attributeList .length) {
      if (attributeList [0].indexOf('width') != -1) {
        result = str.replace(
          /(<img[^>]*style="[^"]*?)(\bwidth\s*:\s*\d+[^;"]*?px;)(\s?height\s*:\s*\d+[^;"]*?px;)([^<]*\/>)/gi,
          function (match, p1, p2, p3, p4) {
            var widthValue = parseInt(p2.match(/\d+/)[0])
            // var heightValue = parseInt(p3.match(/\d+/)[0])
            if (widthValue > width) {
              return p1 + `width: ${width}px; height: auto;` + p4
            }
            return match // 如果width小于等于375,则不做替换,保持原样
          }
        )
      } else {
        result = str.replace(/<img[^>]*>/gi, function (match, capture) {
          match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
          return match
        })
        result = result.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
        result = result.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
      }
    } else {
      result = str.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '')
        return match
      })
      //再设置新的样式
      result = result.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
      result = result.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
    }
  }
  return result
}

总结

不管是video还是img的处理 都是利用正则进行匹配。
img稍微麻烦一点 分为三种情况 没有style直接替换 有style则把style属性全部取出,然后判断是否包含width属性 如果包含 则需要给一个最大值进行替换 如果不包含 则把style重置 然后再手动赋个最大值。文章来源地址https://www.toymoban.com/news/detail-615203.html

到了这里,关于微信小程序之富文本那些事的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序文本组件text使用详解-微信小程序系统学习攻略​

    也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好。 在微信小程序中,组件 text 用来显示文本,基本使用代码如下: 1 基本样式设置 基本使用还是比较简单的,下面咱们来论述一下文本样式的设置,首先是给他设置一个 class 然后在对应的 wxss 文件中编写

    2023年04月13日
    浏览(54)
  • 微信小程序——简易复制文本

    在微信小程序中,可以使用wx.setClipboardData()方法来实现复制文本内容的功能。以下是一个示例代码: 在上述代码中,通过调用wx.setClipboardData()方法,传入要复制的文本内容,成功复制后会弹出一个Toast提示框显示\\\"复制成功\\\"。

    2024年02月09日
    浏览(38)
  • 微信小程序文本横向无缝滚动

    背景: 微信小程序中列表宽度不够长,其中某字段显示不完整,因此要使其自动滚动。 (最初看网上很多用定时器实现,但他们的案例中都只是一个横幅、用定时器也无所谓。但是我的需求中是一个上下无限滚动的列表,如果设置定时器性能耗费太大,因此只用css实现) 样

    2024年02月06日
    浏览(75)
  • 微信小程序文本输入<textarea/> 详解

    也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好。 在微信小程序开发中,input 用来实现文本输入,是单行的,textarea是多行的输入实现 1 基本使用 基本效果就是显示了一个多行的文本输入框。 placeholder 输入框为空时的占位符 auto-focus 自动聚集,拉起键

    2024年02月09日
    浏览(56)
  • 微信小程序:文本读写与网络请求

    一、本地用户文件读写: 1.普通接口操作文件: (1)写入文件内容: (2)读取文件内容: 2.FD接口操作文件(适用大量文件操作): (1)写入文件内容: (2)读取文件内容: 二、网络请求: 配置服务器域名: 进入以下地址,在服务器域名 - 点击修改按钮, 添加\\\"request合法域名、upl

    2024年02月15日
    浏览(41)
  • 微信小程序text文本样式(1)

    微信小程序的text组件支持以下样式属性: color:设置字体颜色,可选值为任意合法的CSS颜色表示形式,如\\\"#000000\\\"、\\\"rgb(255, 0, 0)\\\"等。 font-size:设置字体大小,可选值为长度单位(如\\\"12px\\\"、\\\"1rem\\\")或百分比(如\\\"100%\\\")。 font-weight:设置字体粗细,可选值为\\\"normal\\\"、\\\"bold\\\"、\\\"bolder

    2024年02月05日
    浏览(46)
  • 微信小程序wx.setClipboardData复制文本

    今天在开发中遇到一个问题,在小程序中 复制文本,在做之前也查了资料,大部分都是固定文本复制,(小程序本身是不能手动复制的)和需求还是不一样的。 对于复制官方文档中提供了: wx.setClipboardData 设置系统剪贴板的内容。调用成功后,会弹出 toast 提示\\\"内容已复制

    2024年02月09日
    浏览(44)
  • 微信小程序安全系列——文本内容安全识别

    相信很多朋友跟我遇到过相同的问题,就是在开发一些笔记或者博客的时候,会遇到一些过滤敏感、时政、黄、赌、毒这类词汇、句子等这种棘手问题。 今天我们看一下微信小程序提供的文本安全内容识别,也可以减少一些我们的工作量。通过微信的接口来为我们过滤这些敏

    2024年02月09日
    浏览(48)
  • 微信小程序富文本修改图片的大小

    有时后端直接返回的富文本内容,前端展示的时候会出现图片太大或太小,所以需要处理一下,,,实现并不难,主要是利用replace方法全局替换图片img标签的style样式,修改其宽度样式。 1.replace方法全局添加图片img标签的style样式 理解后想替换什么就替换什么。 2.页面标签显

    2024年02月11日
    浏览(46)
  • 微信小程序 - 解析富文本插件版们

    https://gitee.com/qwqoffice/html2wxml 插件版本解析服务是由 QwqOffice 完成,存在不稳定因素,如对稳定性有很高的要求,请自行搭建解析服务,或在自家服务器上直接完成解析。对于有关插件版本不能使用/不能解析的提问,不作任何回答。 参考 小程序富文本解析 https://github.com/ici

    2024年02月14日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包