vue中，js改变字符串中指定字符的颜色 & 在字符串中添加点击事件

vue中，js改变字符串中指定字符的颜色 & 在字符串中添加点击事件

1、js改变字符串中指定字符的颜色

1.先用正则指定改变颜色的字符，g表示全局匹配

2.获取页面元素

3.将匹配到的字符用新的样式代替

4.解析标签

//e为要改变颜色的字符（传入的参数）
//this.brief是指定的字符串
searchinfo(e){
   let res=new RegExp("("+e+")",'g');
   let b=document.querySelector('.brief')
   let a;
   a=this.brief.replace(res,"<span style='color:red'>"+e+"</span>")
   b.innerHTML=a
}

2、js正则找出字符串中的数字并改变颜色

//一个数组中多个字符串，每个字符串有数值找出加上span标签，放入tit的标签中
that.product_type_info.forEach(item=>{
   var m=item.match(/(\d+\.?\d*)/g);
     if(m){
         s += item.replace(m[0],'<span style="color:#ff4545;">'+m[0]+'</span>')+' ';
     }
 })
$('.tit').html(s);

3、在字符串中添加点击事件

3.1、场景

vue中项目中，在字符串中加点击事件

html:

<div class="ml-12 mr-12 mt-8" id="tableDiv" v-html="divHtml"></div>

• 采用的是v-html指令将元素当成HTML标签解析后输出

js:

divHtml= `<div οnclick="changeCategory('${colCodes[i]}','${cols[i]}')">${cols[i]}</div>`

• 采用了模板字符串写法

注意：这里有两个巨坑

巨坑1：相信大家也发现了，字符串里的点击事件是原生的onclick,但是原生的函数changeCategory是定义在window全局对象上的，所以你在methods里面定义edit函数，触发事件是会报错的，如下：

所以得先将方法绑定到全局上，你可以在组件mounted之后，在window全局对象上定义一个这样的方法.

mounted () {
    window.changeCategory = this.changeCategory
},

巨坑2：触发的事件传参如果是多个参数一定要给每个参数加引号，如

changeCategory('${colCodes[i]}','${cols[i]}')

如果不加就会报如下错误：

4、实例

效果

代码

<template>
 <el-button  type="primary" @click="search">查询</el-button>
</template>
<script>
import { infoTableList , dataNameList,getPinYin } from "@/api/request.js";
export default{
    data(){
        return{
          name:'',
          parentStr:null,
          currentPage: 1, // 当前页码
          total: 10, // 总条数
          pageSize: 10, // 每页的数据条数
          showTableDialog: false,
          tableData: [] // 表格
        }
    },
    methods:{
         /**
         * 查询表格数据
         */    
        search(){
          this.getTableData()
          this.getInfo()
          this.$nextTick(function () {
            console.log(this.$refs.nameRef);      
          })
        },
        /**
         * @params {Number} adoptedFlag 反馈状态
         * @params {object} infoTypeCode 情报类别编码
         * @params {Number} pageNum 第几页
         * @params {Number} pageSize 每页几条
         * @return {undefined}
         */
        getTableData(){
          // 参数
          const params = {
            "adoptedFlag":this.adoptedFlag, 	 
            "infoTypeCode": this.infoTypeCode, 
            "pageNum":this.currentPage,
            "pageSize":this.pageSize
          };
          infoTableList(params).then((resp) => {
            this.tableData = resp.content;
            this.tableData.length = resp.totalSize;
          })
        }, 
        getDataNameList() {
          dataNameList({
            reqId: '590_8202382890_36528',
            parameter:{
              "name": "admin",
              "adminId": "123456"// 所在行政区划ID
            },
            reqContext: {
              "countryCode": "CN"
            }
          }).then(res => {
            console.log('返回数据',res);
          })
        },
        see(i){
          console.log('获取选中值',i);
        },
        getInfo(){
          getPinYin({
            reqId: '590_8202382890_36528',
            // 银行大厦
            parameter:{
              "name": "银行大厦",
              "adminId": 110102// 所在行政区划ID
            },
            reqContext: {
              "countryCode": "CN"
            }
          }).then(res => {
            console.log('操作数据',res.data.phonetic);
            this.name =`<span style='color:#fff'>${res.data.phonetic}</span>`
            this.replaceHandle('Yin {Hang Xing} {Da Dai Tai} {Sha Xia}','Hang Xing')
          })
        },
        //改变颜色的字符（传入的参数）
        replaceHandle(parentStr,searchText){
          let res = new RegExp("("+searchText+")",'g');
          parentStr = parentStr.replace(res,`<span style='color:red;' οnclick="see('${searchText}')">` + searchText+"</span>");
          this.parentStr = parentStr
          // return parentStr;
        }        
    }
}
</script>

打印显示