Applets: set the style of the label in rich-text

1. Scene

   Applet development process, request data back, sometimes with h5 tag and show you the words: h5 label will show on the page

   Methods: <rich-text mode = "{{info}}"> </ rich-text> tag parsing h5

   Phenomenon: the analyzed images, text and other styles need to set

 

2. Methods

   (1) using a regular label to add the class name

   (2) on the style you want to write in such names

   (3)  

• js - the use of regular class name plus wherein: the data request info from the back

      info = info
          .replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
          .replace(/<p([\s\w"=\/\.:;]+)((?:(class="[^"]+")))/ig, '<p')
          .replace(/<p>/ig, '<p class="p_class">')

          .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 class="pho"')
     
      this.setData({
         info: info
      })

    

• In less - defined stylesheet

  rich-text {
      width: 670rpx;
      display: block;
      font-size: 28rpx;
      color: #353535;
      letter-spacing: 1rpx;

      .p_class {
        line-height: 46rpx;
        text-indent: 60rpx;
        margin-bottom: 20rpx;
      }

      .pho {
        display: block;
        width: 670rpx !important;
        height: 330rpx;
        border-radius: 20rpx;
      }

    }