title: Angular highlight & dehighlight dynamic html using filters
body: <p>I'm trying to write a set of filters to highlight and then dehighlight dynamically generated html:</p>
  
  <p>Highlight filter:</p>
  
  <pre><code>app.filter('highlight', function ($sce) {
      return function (str, termsToHighlight) {
          // Sort terms by length
          termsToHighlight.sort(function (a, b) {
              return b.length - a.length;
          });
          var regex = new RegExp('(' + termsToHighlight.join('|') + ')', 'g');
          return $sce.trustAsHtml(str.toString().replace(regex, '&lt;span class="highlightedSpan" style="background-color: yellow; ' +
              'font-weight: bold;"&gt;$&amp;&lt;/span&gt;'));
      };
  });
  </code></pre>
  
  <p>Dehighlight:</p>
  
  <pre><code>app.filter('dehighlight', function ($sce) {
      return function (str) {
  
          var obj = $($.parseHTML(str));
  
          obj = obj.find('.highlightedSpan').replaceWith(function () { return this.innerHTML; });
  
          return $sce.trustAsHtml(obj.html());
      };
  });
  </code></pre>
  
  <p>I'm trying to strip away the span tag and leave the original text, but I'm not sure if it's working or what to return.  Str is the html string.  Any help would be greatly appreciated!</p>