2021-08-06 工作记录--vue-解析富文本（两种方法）

一、vue解析富文本【vue中使用 v-html 解析富文本】

方法一、 直接用v-html解析富文本

举例：

1、后台传过来的数据：

2-1、解析前的代码：

2-2、解析前的结果：

3-1、解析后的代码：

3-2、解析后的结果：

方法二、 用 v-html 结合 富文本处理函数 解析富文本

举例：

1、后台传过来的数据

2-1、封装 富文本处理函数

	// 富文本处理
    showHtml(str){
      return str
        .replace(str ? /&(?!#?\w+;)/g : /&/g, '&')
        .replace(/</g,"<")
        .replace(/>/g,">")
        .replace(/"/g,"\"")
        .replace(/'/g, "\'")
        .replace(/&nbsp;/g,'\u3000')
    },

2-2、调用 富文本处理函数，解析后台传过来的富文本数据

对应代码：

// 获取到后台传过来的需要解析的富文本数据，进行解析后，用新数据替换掉原数据
that.newsDetails.data.content = this.showHtml(that.newsDetails.data.content);

3、用v-html将解析后的数据放到html上

对应代码：

<p class="big_text" v-html="newsDetails.data.content">p>

4、【补充】 调整富文本里的图片的大小

// 两种写法

/* 引入less后的写法：/deep/ */
/deep/ .big_text img {
  max-width: 100%;
}

/* 未引入less的写法：>>> */
/*.big_text >>> img {
  max-width: 100%;
}*/

5、【补充】 解析富文本后，想在其后面加三个点(…)，就可以这样做

结果：