Question

我需要一点帮助。我正在使用https://codeforgeek.com/2014/12/highlight-search-result-angular-filter/

中的AngularJS高亮搜索

现在的问题是，如果我搜索关键字，过滤器还会显示html标签。

在此示例中，如果我搜索“测试”，则突出显示的结果将是正确的。但是，如果我搜索例如“ h”或“ head”，它将突出显示并显示原始html。

所附图片

JS文件中的示例内容：

$scope.posts = [
        {
        "id"        : "1",
        "title"     : "CMS Newsletter - 20/12/2017",
        "content"   : "<html><Head><body>testest test</body></head></html>"
        };

JS中的当前过滤器：

newsApp.filter('highlight', function($sce) {
 return function(text, phrase, input) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
     '<span style="background: red; color: #fff;">$1</span>') // highlighting style css

   return $sce.trustAsHtml(text)

   };

HTML：

<input type="text" ng-model="search.text"  class="search_e_news" placeholder="search the newsletter archive..." />

<div class="inner-news">
  <p ng-bind-html="post.content | highlight:search.text ">
  </p>
</div>

screenshot

有人可以帮我这个忙吗？我对角度不那么了解。

谢谢！

Answer 1

您可以使用jquery / jqlite来使用

删除所有html标签。

$(YOUR_HTML_CONTENT).text()

所以。我将突出显示过滤器修改为类似的内容：

newsApp.filter('highlight', function($sce) {
   return function(text, phrase, input) {
      text = $(text).text();
      // ----^
      if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
      '<span style="background: red; color: #fff;">$1</span>') // highlighting style css

      return $sce.trustAsHtml(text)
   };
});

忽略angularjs过滤器搜索中的html标签

1 个答案: