纯前端如何实现搜索关键字功能，且为搜索关键字添加颜色

小-小菜鸟

已于 2022-05-31 14:21:51 修改

阅读量1.7k

点赞数

分类专栏：搜索文章标签：前端 angular less typescript

于 2022-01-24 16:45:37 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59893114/article/details/122670289

版权

搜索专栏收录该内容

2 篇文章

订阅专栏

  <div class="select-content">
        <div class="nameShow" title="{{item.name}}" 
               [innerHTML]="item.nameHtml">
        </div>
         <div class="deptName" title="{{item.deptName}}">
            {{item.deptName}}
         </div>
   </div>

     .select-content {
                  display: flex;
                  flex-direction: column;
                  width: 70%;
                  margin-left: 10%;
                  text-align: left;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;


                  .nameShow {
                    width: 100%;
                    text-align: left;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-top: 2px;
                  }

                  .deptName {
                    font-size: 14px;
                    text-align: left;
                    line-height: 16px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #ccc;
                    margin-top: 2px;
                  }
                }

  if(th.personnelSearchKeyword){
        th.rosterList =data.data  
         th.rosterList.forEach((item)=>{
          if (item.hasOwnProperty("name") && item.name) {
             var reg = new RegExp(th.personnelSearchKeyword.replace(/[-\[\]\/\{\}\ 
                       (\)\*\+\?\.\\\^\$\|]/g, "\\$&"), "igm");
             let html = item.name.replace(reg, (txt) => {
                  return '<span style="color:#18aeff;">' + txt + '</span>';
                 })
              item.nameHtml = this.sanitizer.bypassSecurityTrustHtml(html);
            } else {
              item.nameHtml = "";
            }
        })
     }