user21 user21 - 1 year ago 138
AngularJS Question

regex and angular to format words which match the query

I have stored input text value into a variable with id name=search-query. And then I am searching through the JSON data to find any matching result and then output the result on the screen. Is there a way which I can bold the word which match the search-query.val? I have tried use ng-bind-html instead but it doesn't output the results.

<body ng-app="products" ng-controller="ctrl">

<input type="text" id="search-query" name="query" placeholder="Enter product name"></input>
<tr ng-repeat="result in searchResult|orderBy:order:reverse" >
<td >
<a ng-href="{{}}" target="_blank">
//used ng-bind-html or ng-bind, but does not works
<span ng-bind-html="" target="_blank"></span>
<td ng-bind="result.type"></td>

var app2 = angular.module('products', []);
app2.controller('ctrl', function($scope) {
$scope.searchResult = [];
$scope.submit = function(){
var search = $("#search-query").val();
$.each(json.products, function(i, v) {
var regex = new RegExp(search, "i");

if ( != -1) {

// For the following line, is there a way which I can bold the word which match the search-query.val?
var name =, "<b>search</b>"); // doesn't work

$scope.searchResult.push({ name:name, type: v.type, link: v.url });

Answer Source

One approach is to use a filter in combination with ng-bind-html. The filter in my plnkr example is copied directly from the angular bootstrap typeahead directive code, so I'm not taking credit for this :) But the other part of this is to use ng-model for the search term instead of looking it up using jquery. Hope this helps.


<input type="text" ng-model="">
  <li ng-repeat="item in items | filter:">
    <span ng-bind-html="item |"></span>


    var app = angular.module('plunker', ['ngSanitize']);

app.controller('MainCtrl', function($scope) {
  $ = {
    name: ''

  $scope.items = ['Jane','John','Sam','Jennifer','Martha'];

app.filter('highlight', function($sce, $injector, $log) {
  var isSanitizePresent;
  isSanitizePresent = $injector.has('$sanitize');

  function escapeRegexp(queryToEscape) {
    // Regex: capture the whole query string and replace it with the string that will be used to match
    // the results, for example if the capture is "a" the result will be \a
    return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');

  function containsHtml(matchItem) {
    return /<.*>/g.test(matchItem);

  return function(matchItem, query) {
    if (!isSanitizePresent && containsHtml(matchItem)) {
      $log.warn('Unsafe use of typeahead please use ngSanitize'); // Warn the user about the danger
    matchItem = query ? ('' + matchItem).replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem; // Replaces the capture string with a the same string inside of a "strong" tag
    if (!isSanitizePresent) {
      matchItem = $sce.trustAsHtml(matchItem); // If $sanitize is not present we pack the string in a $sce object for the ng-bind-html directive
    return matchItem;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download