微信小程序使用rich-text解析富文本字符串的时候,遇到image标签图片很大超过屏幕

场景

使用uniapp开发微信小程序,解析富文本文章需求

用到的组件:

  1. u-view2.0的u-parse 
  2. uniapp提供的rich-text

以上两种组件都是解析富文本的作用,一般用于富文本解析场景,比如解析文章内容,商品详情,带原生HTML标签的各类字符串等,此组件和uni-app官方的rich-text组件功能有重合之处,但是也有不同的地方。

相同点:

  • 二者都能解析HTML字符串

不同点:

  • 对于轻量、简单的字符串,rich-text性能更好
  • 对于复杂的字符串,使用parse组件效果更好,有更多的自定义属性和效果

总结:

如果是简单的场景,比如一段简单的文字和图片内容,可以优先使用rich-text组件,在文章内容,商品详情等复杂的文本详情,可以优先使用uview的u-parse 组件。

遇到的问题:

当使用uniapp提供的rich-text组件解析富文本的时候,如果返回的富文本字符串中img标签自带样式width很大,或者没有样式,原本图片就很大,这种情况,解析后图片宽度会超出屏幕,至于为什么会这样,是因为有可能这篇文章是在pc端展示的,并且标签内联样式写了很大的宽度。但是使用uview的u-parse 组件解析就不会出现这个问题,应该是组件内部做了处理。

解决办法:

当从接口获取富文本字符串的时候,通过正则去修改img里的内联style标签里的样式。

以下是我在项目中碰到使用正则的demo实例(仅供参考)。

<template><div><div style="padding:32rpx;background: #FFFFFF;width: 100%;"><!-- 解析富文本 --><!-- <u-parse :content="contentData"></u-parse> --><!-- 简单字符串用rich-text性能会好些 --><rich-text :nodes="content"></rich-text></div></div>
</template><script>import { mapState } from 'vuex';export default {data() {return {content: ''}},props: {contentData: {//这里的props传递下拉的数据是父组件通过接口拿到的富文本字符串type: String,default: ''},},watch: {contentData: {immediate: true,handler(val) {//使用正则先去掉img标签上的style样式this.content = val.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/g, '')//再使用这种去重写内联style样式this.content = this.content.replace(/\<img/gi, '<img style="width:100%;height:auto"')}}},components: {},computed: {...mapState(["hasLogin", ])},mounted() {},onShow() {},methods: {}}
</script><style lang="scss" scoped>
</style>

下面是通过正则清除掉类名或者去除标签的demo: 

        let relTag = /<.+?>/g; //去除标签let relClass = /class\s*?=\s*?([‘"])[\s\S]*?\1/g;// 清除类名let newHtml = "";newHtml = newHtml.replace(relTag, '');newHtml = newHtml.replace(relClass, '');

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/35353.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

桶排序-1184:明明的随机数

【题目描述】 明明想在学校中请一些同学一起做一项问卷调查&#xff0c;为了实验的客观性&#xff0c;他先用计算机生成了N个1到1000之间的随机整数&#xff08;N≤100&#xff09;&#xff0c;对于其中重复的数字&#xff0c;只保留一个&#xff0c;把其余相同的数去掉&#x…

安防监控视频汇聚平台EasyCVR分发的FLV视频流在VLC中无法播放是什么原因?

众所周知&#xff0c;TSINGSEE青犀视频汇聚平台EasyCVR可支持多协议方式接入&#xff0c;包括主流标准协议国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。在视频流的处理与分发上&#xff0c;视频监控…

【jvm】jvm的生命周期

目录 一、启动二、执行三、退出 一、启动 1.java虚拟机的启动是通过引导类加载器bootstrap class loader创建一个初始类&#xff08;initial class&#xff09;来完成的&#xff0c;这个类是由虚拟机的具体实现指定的(根据具体虚拟机的类型) 二、执行 1.一个运行中的java虚拟机…

ORACLE行转列、列转行实现方式及案例

ORACLE行转列、列转行实现方式及案例 行转列案例方式1.PIVOT方式2.MAX和DECODE方式3.CASE WHEN和GROUP BY 列转行案例方式1.UNPIVOT方式2.UNION ALL 行转列 案例 假设我们有一个名为sales的表&#xff0c;其中包含了产品销售数据。表中有三列&#xff1a;product&#xff08;…

FPGA实践 ——Verilog基本实验步骤演示

0x00 回顾&#xff1a;AND/OR/NOT 逻辑的特性 AND&#xff1a;与门可以具有两个或更多的输入&#xff0c;并返回一个输出。当所有输入值都为 1 时&#xff0c;输出值为 1。如果输入值中有任何一个为 0&#xff0c;则输出值为 0。 OR&#xff1a;或门可以具有两个或更多的输入…

【python】-【】

文章目录 转义字符和原字符二进制与字符编码标识符和保留字变量的定义和使用变量字符串列表for 一、print会输出①数字②字符串&#xff08;必须加引号&#xff09;③含有运算符的表达式&#xff08;例如 31 其中3&#xff0c;1是操作数&#xff0c;是运算符&#xff09;&#…

vector的模拟实现

什么是vector vector是一个封装了动态大小数组的顺序容器跟任意其它类型容器一样&#xff0c;它能够存放各种类型的对象。 模拟实现 实现前的准备 在实现vector之前&#xff0c;为了和库里的区分开需要将实现的vector放在一个自定义的命名空间里。而且vector需要实现成模版…

论文阅读 - Neutral bots probe political bias on social media

论文链接&#xff1a;Neutral bots probe political bias on social media | EndNote Click 试图遏制滥用行为和错误信息的社交媒体平台被指责存在政治偏见。我们部署中立的社交机器人&#xff0c;它们开始关注 Twitter 上的不同新闻源&#xff0c;并跟踪它们以探究平台机制与用…

超导热催生meme,换汤不换药的投机轮回

文/章鱼哥 出品/陀螺财经 币圈对炒作meme概念的热情从未消亡过。 随着一种名为LK-99的物质被发现&#xff0c;围绕超导的兴奋不仅激发了科学界&#xff0c;加密货币相关概念也与之沸腾。不出所料&#xff0c;与此前围绕元宇宙、AI大肆炒作一样&#xff0c;许多meme代币已经出现…

关于MySQL中的binlog

介绍 undo log 和 redo log是由Inno DB存储引擎生成的。 在MySQL服务器架构中&#xff0c;分为三层&#xff1a;连接层、服务层&#xff08;server层&#xff09;、执行层&#xff08;存储引擎层&#xff09; bin log 是 binary log的缩写&#xff0c;即二进制日志。 MySQL…

android开发之Android 自定义滑动解锁View

自定义滑动解锁View 需求如下&#xff1a; 近期需要做一个类似屏幕滑动解锁的功能&#xff0c;右划开始&#xff0c;左划暂停。 需求效果图如下 实现效果展示 自定义view如下 /** Desc 自定义滑动解锁View Author ZY Mail sunnyfor98gmail.com Date 2021/5/17 11:52 *…

数据结构——线性表

文章目录 线性表的定义和基本操作顺序表线性表的链式表示 线性表的定义和基本操作 线性表是具有相同数据类型的(n≥0)个数据元素的有限序列&#xff0c;其中n为表长&#xff0c;当n0时线性表是一个空表。若用L命名线性表&#xff0c;则其中一般表示为&#xff1a;L(a1,a2,a3, …

.NET实现解析字符串表达式

一、引子功能需求 我们创建了一个 School 对象&#xff0c;其中包含了教师列表和学生列表。现在&#xff0c;我们需要计算教师平均年龄和学生平均年龄。 //创建对象 School school new School() {Name "小菜学园",Teachers new List<Teacher>(){new Teach…

CCLINK转MODBUS-TCP网关cclink通讯接线图 终端电阻

大家好&#xff0c;今天我们要聊的是生产管理系统中的CCLINK和MODBUS-TCP协议&#xff0c;它们的不同使得数据互通比较困难&#xff0c;但捷米JM-CCLK-TCP网关的出现改变了这一切。 1捷米JM-CCLK-TCP是一款自主研发的CCLINK从站功能的通讯网关&#xff0c;它的主要功能是将各种…

后端开发5.Redis的搭建

使用docker安装 Redis【redis】(6379) 拉取Redis镜像 docker pull redis:6.2.6 启动Redis容器 docker run -di --name=redis -p 6379:6379 redis:6.2.6 启动Redis容器并设置密码 docker run -di --name=redis -p 6379:6379 redis:6.2.6 --requirepass "密码" 测…

D455+VINS-Fusion+surfelmapping 稠密建图(三)

继续&#xff0c;由surfelmapping建立的点云生成octomap八叉树栅格地图 一、安装OctomapServer 建图包 安装插件 sudo apt-get install ros-melodic-octomap-ros sudo apt-get install ros-melodic-octomap-msgs sudo apt-get install ros-melodic-octomap-server sudo apt-…

cubemx hal stm32 舵机 可减速 任意位置停止 驱动代码

CubeMX配置 对于 STM32 F407VE 这里的84是来自APB1那路2倍频得到&#xff1a; 代码部分 两个舵机都是180度的 servo.c #include "servo.h" #include "tim.h" #include "stdio.h"__IO uint32_t g_SteerUWT[2] {0}; uint16_t g_SteerDeg[…

React Native Maps的使用

介绍 React Native Maps是一个用于在React Native应用中显示地图的库。它提供了许多功能&#xff0c;如显示地图、标记位置、绘制多边形等。以下是React Native Maps的使用步骤&#xff1a; 使用 首先&#xff0c;你需要在你的React Native项目中安装React Native Maps库。可…

青大数据结构【2014】

一、单选 二、简答 为了解决顺序队列的假溢出问题&#xff0c;提出了循环队列&#xff0c;即把存储队列的表从逻辑上看成一个环 判别队列空和满有三种方法&#xff1a; 1&#xff09;采用计数器判别&#xff0c;空时&#xff0c;计数器为0&#xff1b;满时&#xff0c;计数器…

【设计模式——学习笔记】23种设计模式——中介者模式Mediator(原理讲解+应用场景介绍+案例介绍+Java代码实现)

文章目录 案例引入案例一普通实现中介者模式 案例二 介绍基础介绍登场角色尚硅谷 《图解设计模式》 案例实现案例一&#xff1a;智能家庭类图实现 案例二&#xff1a;登录页面逻辑实现说明类图实现 总结文章说明 案例引入 案例一 普通实现 在租房过程中&#xff0c;客户可能…