Resaltar un texto concreto dentro de otra cadena de texto usando AngularJS es muy fácil, podemos asignar una clase CSS al texto resaltado para diferenciarlo del resto de la forma que mas nos guste, por ejemplo cambiando el color de fondo o poniendo el texto en negrita.
Vamos a usar AngularJS y expresiones RegEx de Javascript, la función en AngularJS se vería de la siguiente forma:
|
1 2 3 4 5 6 7 8 |
$scope.highlight = function(haystack, needle) { if(!needle) { return $sce.trustAsHtml(haystack); } return $sce.trustAsHtml(haystack.replace(new RegExp(needle, "gi"), function(match) { return '<span class="highlightedText">' + match + '</span>'; })); }; |
Declaramos la clase highlightedText:
|
1 2 3 |
.highlightedText { background: yellow; } |
Y por ultimo para usar la función anterior en las vistas:
|
1 |
<div ng-bind-html="highlight('JosmanTek Blog', 'Blog')"></div> |
Lo anterior resaltaría Blog en amarillo, dentro de la cadena “JosmanTek Blog”, igualmente podemos asignar variables y cambiando su valor el texto resaltado cambiaría en tiempo real, por ejemplo para resaltar los resultados de una búsqueda.
Fuente: https://blog.nraboy.com/2015/05/highlight-text-in-a-string-using-javascript-and-angularjs/