игнорирование HTML-тегов в поиске фильтра angularjs - PullRequest
0 голосов
/ 18 ноября 2018

Мне нужна помощь.Я использую подсветку для поиска AngularJS из https://codeforgeek.com/2014/12/highlight-search-result-angular-filter/

Теперь моя проблема в том, что если я ищу ключевые слова, фильтр также отображает теги 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>

снимок экрана

Можеткто-нибудь, помогите мне с этим.Я не настолько опытен с угловой.

Спасибо!

1 Ответ

0 голосов
/ 18 ноября 2018

Вы можете использовать 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)
   };
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...