Javascript 如何在呈现数据时突出显示搜索输入？

searchStr

是用户输入的搜索关键字，一旦我呈现了来自服务器的响应，我想突出显示用户输入

searchStr

，这样用户可以看到正在搜索的内容，并比较它是否是响应的一部分。所以下面的代码突出显示了来自服务器的整个字符串响应。在我的例子中，我只想突出显示将作为响应一部分的搜索字符串

假设我有一根绳子

本次代码<代码>>代码>信息>方方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>方>A0764DC7F1\u将成为

searchStr的id

main.html

<tr ng-repeat="item in showMessages | filter:searchStr" >
                    <td >{{item.filename}}</td>
                    <td class="serverResults" ng-bind-html="item.value | trusted">{{item.value}}</td>
                </tr>

filters.js

angular.module('App').filter('trusted', ['$sce', function ($sce) {
    return function(text,phrase) {
    if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
                    '<span class="highlighted">$1</span>');

       var content = text.toString()
       console.log('Content',content);
       var data = content.replace(/[|&;$%@"<>()+,]/g, "");
        return $sce.trustAsResourceUrl(data);
    };
}]);

angular.module（'App'）。filter（'trusted'，['$sce'，function（$sce）{
返回函数（文本、短语）{
如果（短语）text=text.replace（新的RegExp（“（“+短语+”）”，“gi”），
'$1');
var content=text.toString（）
console.log（'Content'，Content）；
var data=content.replace（/[|&；$%@“（）+，]/g，”）；
返回$sce.trustAsResourceUrl（数据）；
};
}]);

这里有一个工作示例，演示如何完成高亮显示。这是人为的，因为我只是用一个项目创建一个数组，但它说明了方法。您希望首先应用保留字符的替换，因为如果在插入高亮显示的

后应用该替换，则

字符将被替换正则表达式删除

angular.module（'app'，[]）
.controller（'ctrl'，函数（$scope）{
$scope.showMessages=[{
值：'info | |[routes.event]##################E63636363737DB-aa33-4aed-B5-51a0764dc7f1{
}];
$scope.searchStr='E636373DB-aa33-4aed-b5b0-51a0764dc7f1'；
})
.filter（'trusted'，函数（$sce）{
返回函数（文本、短语）{
如果（短语）{
var data=text.replace（/[|&；$%@“（）+，]/g，”）；
data=data.replace（新的RegExp（“（“+phrase+”）”，“gi”），
'$1');
返回$sce.trustAsHtml（数据）；
}
text=text.replace（/[|&；$%@“（）+，]/g，”）；
返回$sce.trustAsHtml（文本）；
};
})；

。突出显示{
背景颜色：黄色；
}

搜索：
{{item.filename}

有帮助吗？我以前看到过这个过滤器，我不想应用过滤器。我们可以在controllerController中执行此操作吗？controller不打算操纵DOM，请使用指令执行此操作。为什么不想使用过滤器？在任何情况下，您都应该能够在控制器中应用相同的逻辑。创建过滤器的好处是您可以使用在多个地方使用相同的功能，而不必重复代码。好的，我已经在我使用的问题中添加了过滤器，所以如果我使用

高亮显示
过滤器，它会破坏
受信任的
过滤器功能。所以我正在寻找可以在controller中实现的功能。
angular.module('App').filter('trusted', ['$sce', function ($sce) {
    return function(text,phrase) {
    if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
                    '<span class="highlighted">$1</span>');

       var content = text.toString()
       console.log('Content',content);
       var data = content.replace(/[|&;$%@"<>()+,]/g, "");
        return $sce.trustAsResourceUrl(data);
    };
}]);