脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序rich-text改变img图片样式

小程序rich-text组件如何改变内部img图片样式的方法

 更新时间：2019年05月22日 14:04:25   作者：lvjiajiajia  
这篇文章主要介绍了小程序rich-text组件如何改变内部img图片样式的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

一、起因

小程序中有一个页面，很奇葩，是通过后端传过来的整段HTML字符串展示内容的，那么我们暂时叫这个页面为content，传过来之后，他里面的图片样式是不固定的，有的大，有的小，有的有style有的没有，那我怎么能让他统一展示成一样的样式呢？

二、办法

思前想后，我觉得还是正则比较靠谱，把content里面所有的img标签筛选出来，把里面有style的、有width的、有height的、全部删除掉，最后在统一加上我们想要的样式，最终代码如下：

<RichText nodes={content} />

下面是HTML字符串处理过程

let html = content
      .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
      .replace(/<p>/ig, '<p style="font-size: 15Px; line-height: 25Px;">')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
      .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img$1 style="width: 100%; border-radius: 8Px;"');

最终实现了我们想要的样式统一的效果啦~

三、总结

我有想过直接在less里面取到img，然后改变它的样式，这种办法在h5中是可行的，但是在小程序中不起作用！因为在小程序中会是一整个rich-text标签，里面的内容样式无法修改。所以采用这种办法啦~~能够解决问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 如何利用原生JS实现触摸滑动监听事件

    如何利用原生JS实现触摸滑动监听事件

    这篇文章主要给大家介绍了关于如何利用原生JS实现触摸滑动监听事件的相关资料,文中将实现的原理以及代码介绍的非常详细,需要的朋友可以参考下
    2021-06-06
  • js模块加载方式浅析

    js模块加载方式浅析

    这篇文章主要为大家详细介绍了js模块加载方式的初级学习资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • JS计算两个时间相差分钟数的方法示例

    JS计算两个时间相差分钟数的方法示例

    这篇文章主要介绍了JS计算两个时间相差分钟数的方法,结合完整实例形式分析了javascript针对日期时间的转换与计算相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • js实现移动端微信页面禁止字体放大

    js实现移动端微信页面禁止字体放大

    本文主要介绍了js实现移动端微信页面禁止字体放大的方法，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • 使用javascript函数编写简单银行取钱存钱流程

    使用javascript函数编写简单银行取钱存钱流程

    本文通过实例代码给大家讲解了使用javascript函数编写简单银行取钱存钱流程，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-05-05
  • 原生js实现计算购物车总金额的示例

    原生js实现计算购物车总金额的示例

    本文主要介绍了原生js实现计算购物车总金额的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • js Canvas实现圆形时钟教程

    js Canvas实现圆形时钟教程

    这篇文章主要为大家详细介绍了HTML5 Canvas实现圆形时钟简易教程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • javascript重复绑定事件造成的后果说明

    javascript重复绑定事件造成的后果说明

    最近在修改百度地图开源的东西,想把里面耦合在一起的代码给拆分出来,拆解之后,发现了一些问题,逻辑上没有问题的情况下,该出现的效果没有出现
    2013-03-03
  • JS控制表格实现一条光线流动分割行的方法

    JS控制表格实现一条光线流动分割行的方法

    这篇文章主要介绍了JS控制表格实现一条光线流动分割行的方法,实例分析了javascript操作table表格元素的技巧,需要的朋友可以参考下
    2015-03-03
  • javascript自定义事件功能与用法实例分析

    javascript自定义事件功能与用法实例分析

    这篇文章主要介绍了javascript自定义事件功能与用法,结合实例形式较为详细的分析了javascript自定义事件的原理、功能、应用与相关注意事项,需要的朋友可以参考下
    2017-11-11

最新评论