JavaScript-replace()方法给富文本添加样式

replace()方法给富文本添加样式

​ 当我们请求后端返回的数据是富文本的格式的，即带HTML标签；假如我们需要给请求回来的数据添加单独的样式时，是不是就遇到问题了？因为后端数据是固定的；其实是有解决办法的，就是用到原生JavaScript的replace()方法；

replace()方法：replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。

语法：

str.replace(regexp|substr, newSubStr|function)

1、下面我们用正则表达式的方法测试一下

先准备一份后端返回的富文本格式的数据，可以看到数据中的img标签是没有添加任何样式的；

我们现在通过replace方法给img添加一个名为rich-content的样式，主要思想是通过正则标签式获取以 <img 开头的字符串，然后通过正则表达式 /<img/g （g表示全局的搜索替换 ）查找，replace方法进行替换，替换成 <img class=“rich-content” 的字符串。这样就可以完成富文本的img标签添加了名为rich-content的样式

• 一个RegExp （正则表达式）对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。

 async getGoodsDetail() {
      const res = await getGoodsDetailById(this.goods_id);
      this.goodsDetailList = res.data.message;
      console.log('替换前的格式',this.goodsDetailList.goods_introduce);
     //-------------------------------------------------------------------------
      //对获取到的富文本进行样式添加
      this.goodsDetailList.goods_introduce = this.goodsDetailList.goods_introduce.replace(
        /<img/g,
        '<img class="rich-content"'
      );
     //-------------------------------------------------------------------------
      console.log('替换后的格式',this.goodsDetailList.goods_introduce);

    }

替换前的img格式

替换后的img多了class="rich-content"样式

这样，我们就可以完成了富文本添加样式的操作

2、下面我们也来演示一下通过查找字符串的方法进行替换的例子

• 这个例子是查找英文句子中的dog，然后把dog替换为 monkey

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';
console.log(p.replace('dog', 'monkey'));

总结：该方法并不改变调用它的字符串本身，而只是返回一个新的替换后的字符串。 放心使用吧！