js 提取html 文字、转义字符

前言

产品经理提出了想要一个富文本形式的商品描述，一开始想的很简单，只需在后台加一个富文本，小程序端只需将在商品卡片出将html将标签去掉，这时候问题来了，测试加了许多双引号，空格之类的，导致我的商品卡片出现了转义字符，这是不能容忍的

具体思路

• 后台加上富文本编辑区
• 小程序端商品卡片出进行html处理（这里引出了js对html文字、记转义字符的处理）

- 去除标签
- 转义字符反转义

• 小程序中利用rich-txt渲染html

后台加上富文本编辑器我在这就不阐述了，这里主要介绍对html的处理及渲染html

js提取html 及 处理转义字符

代码如下：

工具方法

const rexFilter = (originString) => {
  // js 处理转义字符
  var result = originString.replace(/&([^&;]+);/g, function (matchStr, b) { 
    var entity = {
      nbsp: ' ',
      quot: '"',
      lt: '<',
      gt: '>',
      apos: "'",
      amp: '&',
      ldquo: '“',
      rdquo: '”'
    };
    var r = entity[b];
    return typeof r === 'string' ? r : matchStr;
  });
  result = result.replace(/<[^<>]+>/g, "") // js去除标签
  return result;
}

商品卡片代码

 <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);

商品详情

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

实现效果