使用AngularJS突出显示术语列表

Question

I have a list of search results, each with a summary and a list of terms to highlight in that summary (but each summary has its own highlight terms and shouldn't be affected by the others).

I am quite new to angularjs and having trouble getting this to work. This is my current html without the highlighting.

<ul ng-if="searchResults.length > 0">
    <li ng-repeat="searchResult in searchResults">
        <h2>{{ searchResult.Title }} </h2>       
        <p>{{ searchResult.Summary }}</p>
    </li>
</ul>

This is an example of what one of the searchResult object's data looks like:

searchResult:  { 
   "HighlightTerms": [ "text", "summary" ],
   "Summary": "this is a text summary"
   "Title": "my title"
} 

So ideally the first result would display 'text' and 'summary' with a yellow highlight.

Any suggestions on the best way to do this? I have tried using ng-bind-html but couldnt get it to work

Here is an example of how it should look if there was one HighlightTerm - 'sensor'.

Answer 1

You can check angular ui-utils highlight feature

http://angular-ui.github.io/ui-utils/#/highlight

<label><input type="checkbox" ng-model="caseSensitive"> Case Sensitive?</label>
<input placeholder="Enter some text to highlight" value="you" ng-model="highlightText">
<p ng-bind-html-unsafe="'Hello there, how are you today? I\'m fine thank you.' | highlight:highlightText:caseSensitive"></p>

<style>
.ui-match { background: yellow; }
</style>

Answer 2

Sorry for the late answer but this could help other people.

You can create you own directive based on ui-utils:

/**
 * Highlight words
 */
angular.module('MODULE_NAME')
    .filter('highlightWords', function () {
      return function (text, search) {
        if (text && (search || angular.isNumber(search))) {
          text = text.toString();
          search = search.toString();

          angular.forEach(search.split(/\s+/), function(word) {
            // reject some words from the filtering
            if (['span', 'class', 'ui-match'].indexOf(word) < 0) {

                var pattern = new RegExp("\\b" + word + "\\b", "gi");
                text = text.replace(pattern, '<span class="ui-match">$&</span>');
            }
          });
        }
        return text;
      };
});

Where MODULE_NAME is the name of your module.

Usage Example:

<p ng-bind-html="mymodel.text | highlightWords:searchTerms"></p>