Angular匹配高亮过滤器显示方式修改技术问询

嘿，我看你想调整Angular里这个搜索高亮过滤器的显示逻辑，给你几个实用的调整方案，你可以根据自己的需求来选：

原来的写法是把title和name拼接后整体高亮，这样有时候分不清是哪个字段匹配了搜索词。改成单独对每个字段应用高亮过滤器，就能清晰区分匹配位置：

<input type="text" placeholder="Search" ng-model="search">
<ul>
  <li ng-repeat="item in data">
    <span ng-bind-html="item.title | highlight:search"></span>
    <span> </span> <!-- 用空格分隔两个字段 -->
    <span ng-bind-html="item.name | highlight:search"></span>
  </li>
</ul>

如果觉得默认黄色高亮不够美观，建议把内联样式改成CSS类，更易维护和修改。先定义CSS类：

.highlight-match {
  background-color: #4285F4; /* 谷歌蓝示例 */
  color: #fff;
  padding: 2px 4px;
  border-radius: 3px;
}

然后修改你的highlight过滤器，把内联样式换成这个类：

app.filter('highlight', function($sce) {
  return function(text, search) {
    if (!search) return $sce.trustAsHtml(text);
    // 大小写不敏感的全局匹配
    var regex = new RegExp(search, 'gi');
    return $sce.trustAsHtml(text.replace(regex, '<span class="highlight-match">$&</span>'));
  };
});

如果想让只有匹配到搜索词的字段才显示高亮，未匹配的字段保持原样，用上面第1种分开字段的写法就可以实现——因为当字段和搜索词不匹配时，过滤器会直接返回原文本，不会添加高亮标记。

要是想让用户可以选择搜索title还是name（或者同时搜索），可以拆分搜索框，并且在ng-repeat里添加字段级过滤：

<input type="text" placeholder="Search Title" ng-model="searchTitle">
<input type="text" placeholder="Search Name" ng-model="searchName">
<ul>
  <li ng-repeat="item in data | filter: {title: searchTitle, name: searchName}">
    <span ng-bind-html="item.title | highlight:searchTitle"></span>
    <span> </span>
    <span ng-bind-html="item.name | highlight:searchName"></span>
  </li>
</ul>

这样用户可以单独搜索标题或名称，对应的匹配内容也会精准高亮。

内容的提问来源于stack exchange，提问作者yavg