Игнорирование тегов HTML для выделения совпадающих слов

Question

Я хочу заменить содержимое шаблона HTML новым после выделения слов, соответствующих поисковому запросу.

Как показано в фрагменте, я использую фильтр выделения, который добавляет желтый фон к совпадающим словам, добавляя &zwj;<span class="highlighted">$1&zwj;</span>.

Вопрос один

Проблема заключается в том, что иногда подсветка не выполняется, и я не могу понять, почему, например, при поиске accountin, то она подсвечивается, но при поиске accounting, то он не подсвечивается.

Эта проблема возникает только тогда, когда соответствуют слову в некотором субе-тегах, такие как <bold> и <tag> и другие, вы можете попробовать искать accounting, и вы увидите, что я имею в виду. Почему это происходит? и как это исправить?

Вопрос два

В HTML, я использую материальные значки, такие как <md-icon class="material-icons ltr">folder</md-icon>, и при поиске folder, то подсвечивание будет происходить на этой иконке.

Даже если я использую значки как svg, например <md-icon md-svg-src="path/user.svg"></md-icon>, эта же проблема будет.

Итак, есть ли способ избежать этого?

angular.module("myApp", ["ngMaterial"]) 
 
.filter('highlight', function ($sce) { 
 
     function mapText(text,tag,tagvalue){ 
 
      var reg = new RegExp("[\>][^\<\>.]*"+tag+"[^\<\>.][\<]*","gi"); 
 
      var result = text.replace(reg,function(item,exp){    
 
       var subRegex = new RegExp(tag,"gi"); 
 
       return item.replace(subRegex,tagvalue); 
 
      }); 
 
      return result; 
 
     } 
 
     return function (text, searchSrting) { 
 
      if(searchSrting){ 
 
       searchSrting = searchSrting.split(/\s+/); 
 
       if(typeof text !== "undefined") { 
 
         for (var i = 0; i < searchSrting.length; i++) { 
 
          if(searchSrting[i]==""){ 
 
           continue; 
 
          } 
 
          else{ 
 
           var tagvalue = '&zwj;<span class="highlighted">' + searchSrting[i] + '&zwj;</span>'; 
 
           text = mapText(text, searchSrting[i], tagvalue); 
 
          } 
 
         } 
 
       } 
 
       return $sce.trustAsHtml(text) 
 
      } 
 
     } 
 
    }) 
 
.controller("main", function($scope){ 
 
    $scope.searchString=""; 
 
    $scope.content="<module> <ti-tle>User Management</ti-tle><br><tag-group><tag>User Management</tag></tag-group><info-group><info><md-icon class='material-icons ltr'>perm_identity</md-icon>published by: Ha ba</info>  <info><md-icon class='material-icons ltr'>folder</md-icon>User Management</info><info><md-icon class='material-icons ltr'>publish</md-icon>published: 25 May 2016</info></info-group><hr>In <bold>AMe</bold>, you can manage multiple bank accounts <br><br> <sub-title>  Introduction Accounting</sub-title> The Sales Planner is a useful step-by-step guide created to help you implement your sales funnel <br>Accounting Go to <bold>Accounting</bold> ‣ <bold>Configuration</bold> ‣ <bold>Bank Accounts</bold> and click on the Bank item. Edit it  <note><md-icon class='material-icons'>error_outline</md-icon>   will detect the bank account type (e.g. IBAN) to allow some payment method like SEPA. </note> <br><br> <sub-title>  Set up your first sales team </sub-title> For example, if within your company Tim is selling products and John is selling maintenance contracts, they will be assigned to different teams and will only receive opportunities that make sense to them. <br><br>  <sub-title>  Set up incoming email to generate opportunities </sub-title> In CRM, one way to generate opportunities into your sales team is to create a generic email address as a trigger. </module>"; 
 
})

module{ 
 
     font-size: 14px; 
 
     color: #484848; 
 
    } 
 
    ti-tle { 
 
     font-size: x-large; 
 
     color: rgb(50, 118, 177); 
 
     display: block; 
 
     font-weight: bold; 
 
    } 
 
    tag-group{ 
 
     display: block; 
 
     line-height: 3; 
 
    } 
 
    tag{ 
 
     background-color: #daebe8; 
 
     padding:2px 6px; 
 
     font-weight: bold; 
 
     font-size: 12px; 
 
     margin: 2px; 
 
     border-radius: 4px; 
 
     cursor: pointer; 
 
     color: #667292; 
 
    } 
 
    tag:hover{ 
 
     background-color: #87bdd8; 
 
    } 
 
    info-group{display: block} 
 
    info{ 
 
     color: gray; 
 
     margin: 4px; 
 
     font-size: 12px; 
 
    } 
 
    sub-title{ 
 
     font-weight: bold; 
 
     font-size: 18px; 
 
     display: block; 
 
     line-height: 2; 
 
    } 
 
    img{ 
 
     display: block; 
 
     margin: 30px 0; 
 
     width: 100%; 
 
    } 
 
    bold{ 
 
     font-weight: bold; 
 
    } 
 
    note{ 
 
     background-color: antiquewhite; 
 
    } 
 
    .highlighted { 
 
     background: yellow; 
 
    } 
 
    md-icon{direction: ltr}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-animate.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-aria.js"></script> 
 
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
 
     rel="stylesheet"> 
 

 
<div ng-app="myApp"> 
 
<div ng-controller="main"> 
 
    <label>search</label> 
 
    <input ng-model="searchString"/> 
 
    <div ng-if="!searchString"> 
 
<module> 
 
    <ti-tle>User Management</ti-tle> 
 
    <br> 
 
    <tag-group> 
 
     <tag>User Management</tag> 
 
    </tag-group> 
 
    <info-group> 
 
     <info><md-icon class="material-icons ltr">perm_identity</md-icon>published by: Ha ba</info> 
 
     <info><md-icon class="material-icons ltr">folder</md-icon>User Management</info> 
 
     <info><md-icon class="material-icons ltr">publish</md-icon>published: 25 May 2016</info> 
 
    </info-group> 
 
    <hr> 
 

 
    In <bold>AMe</bold>, you can manage multiple bank accounts 
 
    <br><br> 
 
    <sub-title> 
 
     Introduction Accounting 
 
    </sub-title> 
 
    The Sales Planner is a useful step-by-step guide created to help you implement your sales funnel 
 
    <br> 
 
    Accounting 
 
    Go to <bold> 
 
    Accounting</bold> ‣ <bold>Configuration</bold> ‣ <bold>Bank Accounts</bold> and click on the Bank item. Edit it 
 
    <note><md-icon class="material-icons">error_outline</md-icon> 
 
     will detect the bank account type (e.g. IBAN) to allow some payment method like SEPA. 
 
    </note> 
 
    <br><br> 
 
    <sub-title> 
 
     Set up your first sales team 
 
    </sub-title> 
 
    For example, if within your company Tim is selling products and John is selling maintenance contracts, they will be assigned to different teams and will only receive opportunities that make sense to them. 
 

 

 
    <br><br> 
 
    <sub-title> 
 
     Set up incoming email to generate opportunities 
 
    </sub-title> 
 
    In CRM, one way to generate opportunities into your sales team is to create a generic email address as a trigger. For example, if 
 
</module> 
 

 
    
 
    </div> 
 
    <div ng-if="searchString" ng-bind-html="content | highlight:searchString"></div> 
 

 
</div> 
 
</div>

Answer 1

Во-первых, я извиняюсь за быстрый ответ тестируемой.

Вот ваши ответы:

var reg = new RegExp("[\>][^\<\>.]*"+tag+"[^\<\>.][\<]*","gi"); 

в этой линии регулярных выражений для поисковых запросов любого характера, но не '> <'. это whay ваш код работает неправильно правильно один здесь:

var reg = new RegExp("[\>][^\<\>.]*"+tag+"[^\<\>.]*[\<]*","gi"); 

Часть 2: в этом коде вы заменяете слова один за другим. поэтому, когда вы заменяете одно слово, второе включает в себя то, что слово regex не будет совпадать. Пример:

Наши главные слова - огонь и пожарный.

var text = "<div>fireman has killed fire</div>"; 

после первого текста петли будет как:

text = "<div><highlight>fire</highlight>man has killed <highlight>fire</highlight></div>"; 

поэтому наше регулярное выражение не будет соответствовать второму слову в этом новом тексте.

но если мы отсортируем наш массив по длине текста. эта проблема будет решена.

в <md-icon class="material-icons ltr">folder</md-icon> Корпус выглядит так, что это регулярное выражение не поможет. если вы хотите сделать это с помощью регулярного выражения в своем проекте, вы можете добавить все случаи в ваше регулярное выражение.

Но spesific обычаи в регулярном выражении вроде этого ... Я не думаю, что это лучший способ сделать это.

Потому что; в будущем, если вы решите изменить свою библиотеку значков. вам также придется менять свое регулярное выражение. И регулярное выражение не выглядит в первый раз понятным lanugage. В конце концов, это будет очень плохой скрытый бизнес.

Надеюсь, вы сможете найти то, что ищете.