资讯专栏INFORMATION COLUMN

项目中需求 文字高亮

用户84 / 2756人阅读

摘要:搜索结果文字高亮显示实际项目中的文字高亮自己实现的方法,本来可以使用过滤器我懒就写了个方法直接上代码上面是方法高亮方法是需要高亮的句子是高亮关键字数组去重句子变成数组对句子数组进行循环数组转字符串估计都会就是基础的方法具体看注释

搜索结果文字高亮显示

-实际项目中的文字高亮 自己实现的方法,本来可以使用vue过滤器 我懒就写了个方法 直接上代码

{{}}

上面highLifht是方法

 //高亮方法
    highLight: function(msg, highLightStr) {
      //msg 是需要高亮的句子   highLightStr 是高亮关键字
      let arr = highLightStr.split("");
      arr = Array.from(new Set(arr)); //es6 数组去重
      let arrmsg = msg.split(""); //句子变成数组

      for (let j = 0; j < arrmsg.length; j++) {
        //对句子数组进行循环
        for (let item of arr) {
          if (
            arrmsg[j] === item.toUpperCase() ||
            arrmsg[j] === item.toLowerCase()
          ) {
            arrmsg[j] =
              "" + arrmsg[j] + "";
          }
        }
      }
      return arrmsg.join(""); //数组转字符串
    },

估计都会 就是基础的方法 具体看注释

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106874.html

相关文章

  • 手把手教你用jsx封装Vue的复杂组件(网易云音乐实战项目需求

    摘要:终极解决方案所以我们要统一环境,直接使用渲染我们的组件,文档可以参照音乐标题歌手专辑时长省去一些细节注意需要放在中,的透传也不要忘了,这样我们在外部想使用的一些属性和事件才比较方便。 背景介绍 最近在做vue高仿网易云音乐的项目,在做的过程中发现音乐表格这个组件会被非常多的地方复用,而且需求比较复杂的和灵活。 预览地址 源码地址 图片预览 歌单详情 showImg(https://se...

    HitenDev 评论0 收藏0
  • 正则:高亮多个相似关键词,如京东、京东物流、京东商城…

    摘要:最近项目遇到一个小需求,就是在一段文字中,高亮几个关键词,例如以下文字京东是中国一家自营式购物网站,创始人刘强东担任京东集团。年月日,京东集团宣布正式组建京东物流子集团。 最近项目遇到一个小需求,就是在一段文字中,高亮几个关键词,例如以下文字: 京东(JD.com)是中国一家自营式B2C购物网站,创始人刘强东担任京东集团CEO。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外...

    neroneroffy 评论0 收藏0
  • 正则:高亮多个相似关键词,如京东、京东物流、京东商城…

    摘要:最近项目遇到一个小需求,就是在一段文字中,高亮几个关键词,例如以下文字京东是中国一家自营式购物网站,创始人刘强东担任京东集团。年月日,京东集团宣布正式组建京东物流子集团。 最近项目遇到一个小需求,就是在一段文字中,高亮几个关键词,例如以下文字: 京东(JD.com)是中国一家自营式B2C购物网站,创始人刘强东担任京东集团CEO。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外...

    TIGERB 评论0 收藏0
  • 正则:高亮多个相似关键词,如京东、京东物流、京东商城…

    摘要:最近项目遇到一个小需求,就是在一段文字中,高亮几个关键词,例如以下文字京东是中国一家自营式购物网站,创始人刘强东担任京东集团。年月日,京东集团宣布正式组建京东物流子集团。 最近项目遇到一个小需求,就是在一段文字中,高亮几个关键词,例如以下文字: 京东(JD.com)是中国一家自营式B2C购物网站,创始人刘强东担任京东集团CEO。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外...

    cgspine 评论0 收藏0
  • ✨如何用JS实现“划词高亮”的在线笔记功能?✨

    1. 什么是划词高亮? 有些同学可能不太清楚划词高亮是指什么,下面就是一个典型的划词高亮: showImg(https://segmentfault.com/img/remote/1460000018981816?w=1195&h=720); 上图的示例网站可以点击这里访问。用户选择一段文本(即划词),即会自动将这段选取的文本添加高亮背景,用户可以很方便地为网页添加在线笔记。 笔者前段时间为线上业...

    trigkit4 评论0 收藏0

发表评论

0条评论

用户84

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<