title: highlight the searched text using AngularJS when split by html tags
body: <p>I am trying to highlight the searched text on the webpage. I am getting the contents to the webpage from the server in the form of json response. In the JSON response. I am getting both html response with tags and also the non-html response. 
  In my html response. there are lot of span tags which are splitting the the single word with empty span tags. Eg: "Searchtext" is in the form "<code>&lt;span class="c1"&gt;Sea&lt;/span&gt;rch&lt;span class="c2"&gt;text&lt;/span&gt;</code>". The words splitting is happening at various positions in the received word response.</p>
  
  <p>I am using angular-highlight. "<strong>angular-highlight</strong>" is highlighting the word which is not split by html tags. If the words are split it's not highlighting. We have customized the code of angular-highlight. But, still it's not working.</p>
  
  <p><code>&lt;span&gt;Sample&lt;/span&gt;</code> - will be highlighted</p>
  
  <p><code>&lt;span&gt;Sa&lt;span&gt;mp&lt;/span&gt;le&lt;/span&gt;</code> - will not be highlighted</p>
  
  <p><code>&lt;span&gt;Sa&lt;span&gt;&lt;/span&gt;mple&lt;span&gt;&lt;/span&gt;&lt;/span&gt;</code> - will not be highlighted</p>
  
  <p>I also have used <strong>trustAsHtml</strong> method also. But, it's not working.</p>
  
  <p>Please, can anyone come up with the solution.</p>
  
  <p>Thanks in advance.</p>
  
  <p>I have explained the scenario. I have modified the below code for highlighting the contents we are getting from HTML response. I have pasted the code for you reference. Please, help me in resolving the issue.</p>
  
  <pre><code>angular.module('angular-highlight', []).directive('highlight', function() {
  var matchCount = 0;
  var newCheckKeyword = '';
  var component = function(scope, element, attrs) {
  
      if (!attrs.highlightClass) {
                      attrs.highlightClass = 'angular-highlight';
      }
      var count = 0;
      var replacer = function(match, item) {
                      count++;
                      var temp = matchCount+count;
                      return '&lt;span class="'+attrs.highlightClass+'" id="highlightId'+temp+'"&gt;'+match+'&lt;/span&gt;';
      }
  
  
      var tokenize = function(keywords) {
                      keywords = keywords.replace(new RegExp('^ | $','g'), '');
                      return keywords;
      }
  
      scope.$watch('keywords', function(newKeyword, oldKeyword) {
                      if(newCheckKeyword == '' || newCheckKeyword != newKeyword){
                                      newCheckKeyword = newKeyword;
                                      matchCount = 0;
                                      count = 0;
                                      scope.sendCount({count: matchCount});
                      }
                      //console.log("scope.keywords",scope.keywords);
                      if (!scope.keywords || scope.keywords == '') {
                                      element.html(scope.highlight);
                                      return false;
                      }
  
                      var tokenized    = tokenize(scope.keywords);
                      // Modified to skip HTML tags
                var regex = new RegExp(tokenized+'(?!([^&lt;]+)?&gt;)', 'gmi');
  
                      // Find the words
                      var html = scope.highlight.replace(regex, replacer);
  
                      //var htmlCount = scope.highlight.match(regex, replacer);
  
                      element.html(html);
                      matchCount = matchCount+count;
                      scope.sendCount({count: matchCount});
                      count = 0;
      });
  
  }
  return {
      link: component,
      replace: false,
      scope:{
            highlight:'=',
            keywords:'=',
            sendCount:'&amp;'                                                
      }
  };
  });
  </code></pre>