preface

Product manager proposed want a rich text form of commodity description, the first thought is very simple, just add a rich text in the background, small program will end just put the card out of the goods in the HTML tags, then question, test and a lot of double quotes, Spaces, such as led to my goods card escape character, this is unacceptable

Specific ideas

  • Add rich text editing area in the background
  • Small program end commodity card out for HTML processing (here leads to THE JS processing of HTML text, remember escape characters)
- Remove labels. - Escape characters to escapeCopy the code
  • Small program in the use of rich- TXT rendering HTML

The background plus rich text editor I will not elaborate here, here mainly introduces the PROCESSING and rendering of HTML HTML

Js extracts HTML and handles escape characters

The code is as follows:

Utility methods

Const rexFilter = (originString) => {var result = originString.replace(/&([^&;]); +); /g, function (matchStr, b) { var entity = { nbsp: ' ', quot: '"', lt: '<', gt: '>', apos: "'", amp: '&', ldquo: '"', throughout: "'}; var r = entity[b]; return typeof r === 'string' ? r : matchStr; }); Result = result. Replace (/ < [^ < >] + > / g, "") / / js to remove label return result; }Copy the code

Commodity card code

 <van-card
  centered="true"
  class="product-bag-card"
  title="{{product.goodsTitle}}"
  thumb="{{product.goodsUrl}}"
  data-goods="{{product}}"
  bindtap="showPupop"
  price="{{product.price}}"
  origin-price="{{product.historyPrice}}"
  desc="{{product.describes}}"
>

...
item.describes = rexFilter(item.describes);
Copy the code

Goods details

<rich-text nodes="{{productDetail.describes}}"></rich-text>
Copy the code

Implementation effect