场景：
使用uniapp开发微信小程序，解析富文本文章需求
用到的组件：
- u-view2.0的u-parse
- 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 组件解析就不会出现这个问题，应该是组件内部做了处理。文章来源：https://www.toymoban.com/news/detail-639534.html
解决办法：
当从接口获取富文本字符串的时候，通过正则去修改img里的内联style标签里的样式。
以下是我在项目中碰到使用正则的demo实例（仅供参考）。文章来源地址https://www.toymoban.com/news/detail-639534.html
<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, '');到了这里，关于微信小程序使用rich-text解析富文本字符串的时候，遇到image标签图片很大超过屏幕的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
