微信小程序 rich-text 修改node内部样式

本文主要是介绍微信小程序 rich-text 修改node内部样式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<template>
    <!-- 商品描述 -->
    <view class='ProductDesc'>
        <view class="title">— 商品详情 —</view>
        <!-- 商品图片 开始 -->
        <view class="goodsImg">
            <!-- <image class="img"
                   mode='widthFix'
                   src='https://img.jdhui.com/sellgoods/images/goods/goodsDetail/goodsImg.png' /> -->
            <rich-text class="rich-text"
                       :nodes='detailImg'></rich-text>
        </view>
        <!-- 商品图片 结束 -->
    </view>
</template>

<script>
export default {
    name: "ProductDesc",
    components: {},
    filters: {},
    props: {
        detailImgData: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            detailImg: ""
        };
    },
    computed: {},
    watch: {
        detailImgData(newValue) {
            this.detailImg = this.formatRichText(newValue);
        }
    },
    created() {
        this.detailImg = this.detailImgData;
    },
    mounted() {},
    methods: {
        //调整图片宽度
        formatting(detailData) {
            this.formatRichText(detailData);
        },
       //使用正则表达式，添加class类，并将图片宽度100%
        formatRichText(html) {
            let newContent = html.replace(/<img[^>]*>/gi, function(
                match,
                capture
            ) {
                match = match
                    .replace(/style="[^"]+"/gi, "")
                    .replace(/style='[^']+'/gi, "");
                match = match
                    .replace(/width="[^"]+"/gi, "")
                    .replace(/width='[^']+'/gi, "");
                match = match
                    .replace(/height="[^"]+"/gi, "")
                    .replace(/height='[^']+'/gi, "");
                return match;
            });
            newContent = newContent.replace(/style="[^"]+"/gi, function(
                match,
                capture
            ) {
                match = match
                    .replace(/<p>/gi, '<p class="p_class">')
                    .replace(/width:[^;]+;/gi, "max-width:100%;")
                    .replace(/width:[^;]+;/gi, "max-width:100%;");
                return match;
            });
            //这里可以自己添加类名
            newContent = newContent.replace(/<br[^>]*\/>/gi, "");
            newContent = newContent.replace(/<a>/gi, '<a class="a_class">');
            newContent = newContent.replace(/<li>/gi, '<li class="li_class">');
            newContent = newContent.replace(/<p>/gi, '<p class="p_class">');
            newContent = newContent.replace(
                /\<img/gi,
                '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
            );
            return newContent;
        }
    }
};
</script>
<style lang='scss'>
view.ProductDesc {
    padding-bottom: 101px;
    width: 750px;
    view.title {
        background: #f5f4f0ff;
        width: 100%;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 36px;
        color: #666666;
    }

    view.goodsImg {
        background-color: white;
        width: 100%;

        .img {
            width: 100%;
        }
        .rich-text {
            // font-size:500px;
            padding: 0;
            margin: 0;
            .p-parameter-list {
                // font-size: 200px;
                background-color: #bfa;
                // display: flex;
                // flex-flow: column;
                padding: 0 18px;
                // margin: 0;
                .li_class {
                    background-color: orange;
                    .p_class {
                        // font-size: 200px !important;
                    }
                }
            }
            img {
                width: 100%;
            }
        }
    }
}
</style>

//格式化文本的方法
        formatRichText(html) {
            let newContent = html.replace(/<img[^>]*>/gi, function(
                match,
                capture
            ) {
                match = match
                    .replace(/style="[^"]+"/gi, "")
                    .replace(/style='[^']+'/gi, "");
                match = match
                    .replace(/width="[^"]+"/gi, "")
                    .replace(/width='[^']+'/gi, "");
                match = match
                    .replace(/height="[^"]+"/gi, "")
                    .replace(/height='[^']+'/gi, "");
                return match;
            });
            newContent = newContent.replace(/style="[^"]+"/gi, function(
                match,
                capture
            ) {
                match = match
                    .replace(/<p>/gi, '<p class="p_class">')
                    .replace(/width:[^;]+;/gi, "max-width:100%;")
                    .replace(/width:[^;]+;/gi, "max-width:100%;");
                return match;
            });
            newContent = newContent.replace(/<br[^>]*\/>/gi, "");
            newContent = newContent.replace(/<a>/gi, '<a class="a_class">');
            newContent = newContent.replace(/<li>/gi, '<li class="li_class">');
            newContent = newContent.replace(/<p>/gi, '<p class="p_class">');
            newContent = newContent.replace(
                /\<img/gi,
                '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
            );
            return newContent;
        }

这篇关于微信小程序 rich-text 修改node内部样式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！