js去掉富文本中html标签和图片

 filterHtmlTag(val) {
      if(!val){
        return false;
      }
      // 过滤掉富文本中的所有标签
      var filter = val
        .replace(/<(p|div)[^>]*>(<br\/?>| )<\/\1>/gi, "\n")
        .replace(/<br\/?>/gi, "\n")
        .replace(/<[^>/]+>/g, "")
        .replace(/(\n)?<\/([^>]+)>/g, "")
        .replace(/\u00a0/g, " ")
        .replace(/ /g, " ")
        .replace(/<\/?(img)[^>]*>/gi, "")
        .replace(/&/g, "&")
        .replace(/</g, "<")
        .replace(/>/g, ">")
        .replace(/'/g, "'")
        .replace(/"/g, '"')
        .replace(/<\/?.+?>/g, "");

      var filterOver =
        filter.length > 400 ? filter.slice(0, 400) + "..." : filter;
      return filterOver;
    },

控制伪元素的显示隐藏，并且可以对伪元素添加点击事件

我们需要在css做这种处理

父元素添加：pointer-events: none; 伪元素添加：pointer-events: auto;

<div
                  @click="ele.unfoldButton=false"
                    v-html="
                      filterHtmlTag(ele.filterInfo) ||
                        filterHtmlTag(ele.labels[0].value)
                    "
                    class="text-part"
                    :class="ele.unfoldButton?'setButton':''"
                  ></div>






.text-part {
  height: 115px;
  background-color: rgb(242, 242, 242);
  padding: 10px;
  padding-bottom: 25px;
  overflow: hidden;
  position: relative;
  pointer-events: none;

}
.setButton::after {
    content: "V";
    position: absolute;
    pointer-events: auto;
    font-weight: bold;
    bottom: 5px;
    left: 50%;
    font-size: 20px;
    color: var(--mainColor);
    display: inline-block;
    width: 25px;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    border-radius: 50%;
    margin-right: 5px;
    margin-left: 5px;
    text-align: center;
  }

页面上渲染失败[object Promise]

代码里是这样写的

   
{
   
   {filterHtmlTag(ele.filterInfo, ele.unfoldButton)}}






 //改变文字颜色
    changeWordColor(str, stringPart) {
      str = str.replace(
        stringPart,
        '<span style="color: var(--mainColor);">' + stringPart + "</span>"
      );

      return str;
    },
   async filterHtmlTag(val, slice = false, searchStatus = this.openSearch) {
      if (!val) {
        return false;
      }
      // 过滤掉富文本中的所有标签
      var filter = val
        .replace(/<(p|div)[^>]*>(<br\/?>| )<\/\1>/gi, "\n")
        .replace(/<br\/?>/gi, "\n")
        .replace(/<[^>/]+>/g, "")
        .replace(/(\n)?<\/([^>]+)>/g, "")
        .replace(/\u00a0/g, " ")
        .replace(/ /g, " ")
        .replace(/<\/?(img)[^>]*>/gi, "")
        .replace(/&/g, "&")
        .replace(/</g, "<")
        .replace(/>/g, ">")
        .replace(/'/g, "'")
        .replace(/"/g, '"')
        .replace(/<\/?.+?>/g, "");
      // 是否折叠
      var filterOver =
        filter.length > 400 ? filter.slice(0, 400) + "..." : filter;
        //如果是搜索状态
      if (searchStatus) {

        filterOver =this.changeWordColor(filterOver, this.propertyValue);
        filter = this.changeWordColor(filter, this.propertyValue);

      }

      return slice ? filterOver : filter;
    },

最发现是方法中我写了async，这方法变成异步了，所以才这样输出了，所以啊兄弟们没用的东西一定要删了，使用的时候获取实时的数据，别用async,即可解决此异常

将elementui的tab切换与走马灯结合起来

  <el-tabs v-model="activeItemId" @tab-click="handleClick">
          <!-- 循环 -->
          <el-tab-pane label="111" name="1"
            > <el-carousel
                        v-if="ele.dbValueVOS && ele.dbValueVOS.length !== 0"
                        ref="marquee"
                        @change="val => setContentInfo(val, index)"
                        trigger="click"
                        height="150px"
                        indicator-position="none"
                        :autoplay="false"
                        arrow="always"
                      >
                        <el-carousel-item
                          v-for="item in ele.dbValueVOS"
                          :key="item.id"
                        >
                          <h4>{
   
   { item.propertyName }}</h4>
                        </el-carousel-item>
                      </el-carousel>



</el-tab-pane>
</el-tabs>









handleClick(tab, event) {
      // 点击tab切换，给走马灯部分指定下标
this.$refs.marquee[0].setActiveItem(this.activeItemId);
      //  // 将tab的下标指定为走马灯的下标
      // this.active = e // tab切换的下标

      //获取列表
      console.log(tab, event);
    },

修改JS数组中的一个对象的元素的值，其他对象的元素值都跟着变了

数组改完相应下标的的对象,其他下标数据也变了

使用$set给数组里的对象赋值,也改变了其他对象

vue $set 给数组集合对象赋值影响到其他元素

vue数据改变影响其他数据的问题

vue 变量赋值变量，两个变量就会互相影响

vue只是给一条数据赋值却影响到了其他数据

  setContentInfo(valIndex, parentIndex) {
      var {propertyValue} = this.reportList[parentIndex].dbValueVOS[valIndex];
     
      // TODO:给对象中的值赋值，走马灯切换后显示
      // this.$set(this.reportList[parentIndex], "filterInfo", propertyValue);


     
    },

离大谱了，就是个普通赋值，方法只调了一次，就算指定只给下标为0的数据赋值也影响到了其他数据

颠覆我的认知了，科学不存在了

解决方法如下，直接深拷贝一条，去给数组相应下标的整个对象替换

  setContentInfo(valIndex, parentIndex) {
      var {propertyValue} = this.reportList[parentIndex].dbValueVOS[valIndex];
      let realData =JSON.parse(JSON.stringify(this.reportList[parentIndex]));
      realData.filterInfo=propertyValue;
      // TODO:给对象中的值赋值，走马灯切换后显示
      // this.$set(this.reportList[parentIndex], "filterInfo", propertyValue);



         this.$set(this.reportList, parentIndex, realData);

      
    },

SEO机制算是让我玩明白了