uniapp搜索关键字变色

https://blog.csdn.net/weixin_45936690/article/details/125263240?spm=1001.2014.3001.5501
这篇文章内容有bug，只匹配第一个符合的值，请使用此链接的方法，点击跳转。

<input class="input" type="text" placeholder="请输入机型搜索" placeholder-style="color: #DCDDE1" @input="ModelSearch" />

<view class="li" v-for="(item,index) in clone" :key="index">
  <image src="../../static/img/model/icon1.png" class="img"></image>
  <!-- <text v-html="item"></text> --> // H5
  <!-- <rich-text :nodes="item"></rich-text> --> // H5 兼容微信小程序

  // H5 兼容微信、支付宝小程序
  // mp-html 插件市场下载的插件
  <mp-html :content="item.name"/>
  <mp-html :content="item.str" class="text" />
</view>


// 输入框
ModelSearch(e) {
  let keyword = e.target.value; // 输入框的值
  let replaceReg = new RegExp(keyword, 'ig'); // 正则，不区分大小写
  let string = '<span style="background: white">'+ keyword +'</span>'; // 关键字样式
  this.clone = []; // 渲染数组
  for (let i=0; i<this.AlternativeModel.length; i++) {
    if (keyword && keyword.length > 0) {
      // this.clone.push(this.AlternativeModel[i].replace(replaceReg,string)); // H5 兼容微信小程序
      
      // 兼容H5 微信、支付宝小程序
      this.clone.push(
      {
        name: keyword,
        str: '<span style="background: #D7E4FF;">'+ this.AlternativeModel[i].split(replaceReg)[1] +'</span>',
      });
      
      console.log(this.clone);
    }
  }
}

最后

以上就是疯狂咖啡为你收集整理的uniapp搜索关键字变色的全部内容，希望文章能够帮你解决uniapp搜索关键字变色所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。