What is the best way to emphasize colors in search results?

Question

What is the best way to emphasize colors in search results?

Is it possible to assist in highlighting the searched words in yellow?

Below is an example of code that filters words from the displayed data from a JSON feed URL.

angular.module('sample', []).
controller('sampleController', ['$scope', '$http', function($scope, $http) {
  var url = "https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/od6/public/values?alt=json";

  $http.get(url)
    .success(function(data, status, headers, config) {
      $scope.users = data.feed.entry;
      console.log($scope.users);
    })
    .error(function(error, status, headers, config) {
      console.log(status);
      console.log("Error occurred");
    });
   // code to highlight
   
    $scope.highlight = () => {
  //create copy of the original array
  $scope.filteredContent = JSON.parse(JSON.stringify($scope.users));

  $scope.filteredContent.forEach(fc => {
    const regEx = new RegExp($scope.search);
alert("here");
    fc.question = fc.gsx$topic.$t.replace(regEx, '<span class="highlight">${$scope.search}</span>');
    fc.answer = fc.gsx$response.$t.replace(regEx, '<span class="highlight">${$scope.search}</span>');
  });
};
    
  // code to highlight
   
$scope.search='';
$scope.searchFilter=function(item){

if(item.gsx$topic.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$response.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1){
      return true;
    }
    return false;
  }

}]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.min.js"></script>
<div ng-app="sample" ng-controller="sampleController">
  <div class="black">
    <input type="text" name="search" ng-keyup="highlight()" ng-model="search" placeholder="search"/>
  </div>
  <br>
  <br>
  <br>
  <table style="border: 1px solid black ;">
    <tbody>
      <tr>
        <td>
          <center><b>Question</b></center>
        </td>
        <td>
          <center><b>Response</b></center>
        </td>
      </tr>
      <tr ng-repeat="user in users | filter:searchFilter">
        <td style="border: 1px solid black ; width:30%;white-space: pre-wrap;" ng-bind-html="user.gsx$topic.$t">{{user.gsx$topic.$t}}</td>
        <td style="border: 1px solid black ; width:70%;white-space: pre-wrap;" ng-bind-html="user.gsx$response.$t">{{user.gsx$response.$t}}</td>
      </tr>
    </tbody>
  </table>
</div>

Code link: https://jsfiddle.net/bjqsgfzc/1/

javascript angularjs angularjs-ng-repeat ng-bind

Answer 1

Answer №1

To implement highlighting of text in AngularJS, you will need to utilize the $sce service for Strict Contextual Escaping. This service ensures secure content injection.

In your controller declaration, include the $sce service along with other dependencies:

controller('sampleController', ['$scope', '$http', '$sce', function($scope, $http, $sce) {

Create a function that inserts a span element with a specified CSS class to highlight the searched text using the $sce.trustAsHtml method:

$scope.highlightText = function(text, search) {
  if (search && search.length === 0) {
    // Return the default content if no search text is provided.
    return $sce.trustAsHtml(text);
  }

  var regex = new RegExp(search, 'gi');
  return $sce.trustAsHtml(text.replace(regex, '<span class="foundText">$&</span>'));
};

Use the ngBindHtml directive within the ng-repeat to apply the highlightText function for text highlighting:

Example snippet:

<tr ng-repeat="user in users | filter:searchFilter">
  <td ng-bind-html="highlightText(user.gsx$topic.$t, search)">{{user.gsx$topic.$t}}</td>

Ensure to define appropriate CSS for the highlighted text by adding a CSS class like .foundText with desired styling.

For a complete example implementation, refer to the provided AngularJS code snippet.

Keep coding and happy highlighting!

Answer 2

To implement highlighting of text in AngularJS, you will need to utilize the $sce service for Strict Contextual Escaping. This service ensures secure content injection.

In your controller declaration, include the $sce service along with other dependencies:

controller('sampleController', ['$scope', '$http', '$sce', function($scope, $http, $sce) {

Create a function that inserts a span element with a specified CSS class to highlight the searched text using the $sce.trustAsHtml method:

$scope.highlightText = function(text, search) {
  if (search && search.length === 0) {
    // Return the default content if no search text is provided.
    return $sce.trustAsHtml(text);
  }

  var regex = new RegExp(search, 'gi');
  return $sce.trustAsHtml(text.replace(regex, '<span class="foundText">$&</span>'));
};

Use the ngBindHtml directive within the ng-repeat to apply the highlightText function for text highlighting:

Example snippet:

<tr ng-repeat="user in users | filter:searchFilter">
  <td ng-bind-html="highlightText(user.gsx$topic.$t, search)">{{user.gsx$topic.$t}}</td>

Ensure to define appropriate CSS for the highlighted text by adding a CSS class like .foundText with desired styling.

For a complete example implementation, refer to the provided AngularJS code snippet.

Keep coding and happy highlighting!

Answer 3

Answer №2

To incorporate highlighted text in your content, you can use the <span> element with a class attribute of "highlighted". It is essential to make a deep copy of the original array to prevent any unwanted modifications. A reliable method to achieve this is by utilizing JSON.parse(JSON.stringify(...)). Moreover, to render the <span> elements as HTML, the ng-bind-html directive is necessary. For this to work seamlessly, ensure that the ngSanitize module is included as a dependency in your AngularJS application.

angular.module('myApp', ['ngSanitize'])
  .controller('myController', ['$scope', ($scope) => {
    const content = [{
        question: 'Question 1',
        answer: 'Answer 1'
      },
      {
        question: 'Question 2',
        answer: 'Answer 2'
      }
    ];

    // Make a copy of the original array
    $scope.filteredContent = JSON.parse(JSON.stringify(content));

    $scope.highlight = () => {
      // Make a copy of the original array
      $scope.filteredContent = JSON.parse(JSON.stringify(content));

      $scope.filteredContent.forEach(fc => {
        const regEx = new RegExp($scope.searchText);

        fc.question = fc.question.replace(regEx, `<span class="highlight">${$scope.searchText}</span>`);
        fc.answer = fc.answer.replace(regEx, `<span class="highlight">${$scope.searchText}</span>`);
      });
    };
  }]);

table {
  border-collapse: collapse;
  margin-top: 10px;
  border: 1pt solid black;
  width: 100%;
}

td {
  border: 1pt solid black;
  margin: 0;
  padding: 0;
}

.highlight {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.7.9/angular-sanitize.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <input type="text" ng-model="searchText" ng-keyup="highlight()" placeholder="Search">

  <table>
    <tr ng-repeat="c in filteredContent">
      <td ng-bind-html="c.question">
      </td>
      <td ng-bind-html="c.answer">
      </td>
    </tr>
  </table>
</div>

Answer 4

To incorporate highlighted text in your content, you can use the <span> element with a class attribute of "highlighted". It is essential to make a deep copy of the original array to prevent any unwanted modifications. A reliable method to achieve this is by utilizing JSON.parse(JSON.stringify(...)). Moreover, to render the <span> elements as HTML, the ng-bind-html directive is necessary. For this to work seamlessly, ensure that the ngSanitize module is included as a dependency in your AngularJS application.

angular.module('myApp', ['ngSanitize'])
  .controller('myController', ['$scope', ($scope) => {
    const content = [{
        question: 'Question 1',
        answer: 'Answer 1'
      },
      {
        question: 'Question 2',
        answer: 'Answer 2'
      }
    ];

    // Make a copy of the original array
    $scope.filteredContent = JSON.parse(JSON.stringify(content));

    $scope.highlight = () => {
      // Make a copy of the original array
      $scope.filteredContent = JSON.parse(JSON.stringify(content));

      $scope.filteredContent.forEach(fc => {
        const regEx = new RegExp($scope.searchText);

        fc.question = fc.question.replace(regEx, `<span class="highlight">${$scope.searchText}</span>`);
        fc.answer = fc.answer.replace(regEx, `<span class="highlight">${$scope.searchText}</span>`);
      });
    };
  }]);

table {
  border-collapse: collapse;
  margin-top: 10px;
  border: 1pt solid black;
  width: 100%;
}

td {
  border: 1pt solid black;
  margin: 0;
  padding: 0;
}

.highlight {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.7.9/angular-sanitize.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <input type="text" ng-model="searchText" ng-keyup="highlight()" placeholder="Search">

  <table>
    <tr ng-repeat="c in filteredContent">
      <td ng-bind-html="c.question">
      </td>
      <td ng-bind-html="c.answer">
      </td>
    </tr>
  </table>
</div>

What is the best way to emphasize colors in search results?

Answer №1

Answer №2

Similar questions

Updating a URL once AngularJS has finished processing it

Obtain a pointer to the timestamp within a embedded Kibana chart on an HTML webpage

Executing two Ajax calls sequentially without using asynchronous functionality

Organizing string enum in Typescript and AngularJS - Tips and Tricks

Is it possible to retrieve several columns using the pluck method in Underscore.js following the input from the where method, similar to LINQ

Concentrate on a specific component within an overlay using jQuery

How can I make v-for display additional profiles to achieve an infinite scroll effect?

Creating a JSON array using looping technique

Issue with modal rendering in Bootstrap4 when the body is zoomed in

Strategies for smoothly navigating the page to a specific div every time

Error: Attempted to update user profile with an invalid function in Firebase

Determine if the input number exceeds a specified threshold by implementing JavaScript

Issue with Material UI TextField and Redux Form integration

Deleting a segment of content from a webpage

Using Unicode JSON in Laravel blade to pass data to React components, encountering an issue with JSON parsing

The ng-options loop in the array is unable to locate the specified value

Having trouble saving user input from a form to a database using axios, mongodb, and vue?

Refreshing pane content within Kendo UI Splitview

Session data in ExpressJS is not being stored in the cookie

Is it simple to host a vue.js web application within the assets folder of a sails.js project?