Javascript AngularJS视图中的粗体匹配字符

当我在我的应用程序中进行搜索时，我想用粗体标记将结果中匹配的字符包装起来，这样你就可以看到匹配的字符

因此，结果视图如下所示：

<ul class="search-results ng-hide" ng-show="(results | filter: filterQuery).length > 0">
    <li ng-repeat="result in results | filter:filterQuery">
        <h3><a ui-sref="{{result.state}}">{{result.name}}</a></h3>
        <p>{{result.snippet}}</p>
    </li>
</ul>

因此，当

result.name

和

result.snippet

与

filterQuery

匹配时，我需要在其周围包装标记

类似于（这部分内容是从我过去使用过的PHP版本复制的，因此语法不匹配）：

var keys=$scope.filterQuery.split（“”）；
result.snippet.replace（'/（'.intlode（'|'，keys）。'）/iu'，'\0'）；

---

但是这会去哪里？

创建一个

搜索结果

指令来包装每个搜索结果，其中

名称

需要设置为粗体：

<search-result result="result" name="name" ></search-result>

使用以下模板：

directive.template: 'prefix text' + '<B>' + attrs.name + </B> + ' suffix text';

directive.template:'前缀文本'+''+attrs.name++'后缀文本'；

有几种方法可以做到这一点，主要是使用过滤器

您可以编写自己的过滤器，在搜索中获取字符串，在您正在搜索的内容中找到它，然后在其周围添加标记并将其发送回

或者，您可以使用许多插件中的一个来实现这一点

<search-result result="result" name="name" ></search-result>

directive.template: 'prefix text' + '<B>' + attrs.name + </B> + ' suffix text';