实现类似的微博话题的功能

实现类似的微博话题的功能

正则匹配内容
let reg= /[#＃][^#＃]+[#＃]/g （中英文的#匹配）

 ReplaceTopic(str) {
      var r, k; // 声明变量。
      // var ss = str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "");  // 去除html格式
      var ss = str;
      // ##包裹内容的格式化处理，变成可以跳转的a标签链接
      r = ss.replace(/[#＃][^#＃]+[#＃]/g, function(word) {
        // k = encodeURI(word.replace(/\#/g, ""));
        return `<a style="color:#00BAFF" class="topic">${word}</a>`;
        // return (
        //   '<a href="/topic/list/?type=2&topic=' +
        //   k +
        //   '" style="color:#00BAFF">' +
        //   word +
        //   "</a>"
        // );
      });
      return r; //返回替换后的字符串
    }

2.vue中富文本的点击事件的绑定（替换的格式的时候不能添加上的@click的事件，就算手动添加也无效的处理方式,通过判断点击的dom元素和类名实现点击话题页面跳转）

 <span v-html="item.imgTexts[0].text"  @click.stop="goDetail(item.postId,item.carClub.carClubId)"></span> 

 // 富文本中的链接跳转
    goSearchList(event, id, clubId, postTypeId) {
      console.log(event.target.text);
      console.log(event.target.className); // testssss
      console.log(event.target.nodeName); // p

      if (event.target.nodeName === "A" && event.target.className === "topic") {
        //点击到的元素是a标签且是话题的属性的内容
        // 获取触发事件对象的属性
        console.log("进来了a标签1");
        let k = event.target.text.replace(/\#/g, "");
        let str = k.replace(/\＃/g, "");
        if(str === this.topic){
          window.appAction('toast',['这已经是当前点击的话题列表了']);
        }else{
          console.log(
          "进来了正则匹配1#",
          `${EXPORT_URL}topic/topicDetail?topic=${k}`
        );
        window.appAction("goAdvertisement", [
          3,
          `${EXPORT_URL}topic/topicDetail?topic=${k}`
        ]);
        console.log("app1");
        }
      } else {
        postTypeId * 1 >= 100
          ? this.goDetail(id, clubId)
          : this.goPostDetail(postTypeId, id);
      }
    },