Menu
i'm trying to highlight text in my existing pages. these pages are all neatly built like
<p>some text</p>
<p>some more text</p>
etc..
now I put an input box where all text inside it would highlight text on the page:
<input ng-model='highlightthis'>
I built a filter in angular app like this:
app.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
});
and a quick style:
<style>.highlighted { background: yellow; } </style>
now.. I thought all I needed to do was add the filter to all the <p>'s in my existing pages. but I can't seem to find the right syntax for it:
<p ng-bind-html="$(this).innerHTML | highlight:highlightthis>some text</p>
etc..
but it doesn't work. anybody got a clue as to how to link the inner text from the <p>'s to the filter?
also, there's probably some smart way to add the ng-bind to all the <p>'s on page load instead of manually adding it to all the p's on the pages.. any hints would be greatly appreciated :)
664
You can't use filter since you are not using data interpolation with ngBind directive of {{}} tags. In this case you would probably use directive. Very simple one can look like:
app.directive('highlight', function() {
return {
link: function(scope, element) {
scope.$watch('highlightthis', function(newVal, oldVal) {
if (newVal !== oldVal) {
var text = element.text().replace(new RegExp('(' + newVal + ')', 'gi'), '<span class="highlighted">$1</span>');
element.html(text);
}
});
}
};
});
and used like:
<p highlight>some text</p>
<p highlight>some more text</p>
Of course it's not very advanced and convenient to use, but you can get the idea of how you can write something like what you need.
UPD. Here is more convenient example of hightlight directive:
app.directive('highlight', function() {
return {
link: function(scope, element, attr) {
var tags = element[0].querySelectorAll('.highlightable');
scope.$watch(attr.highlight, function(newVal, oldVal) {
if (newVal !== oldVal) {
angular.forEach(tags, function(tag) {
var el = angular.element(tag),
text = el.text().replace(new RegExp('(' + newVal + ')', 'gi'), '<span class="highlighted">$1</span>');
el.html(text);
});
}
});
}
};
});
which should be used this way:
<body ng-controller="MainCtrl" highlight="highlightthis">
<input ng-model='highlightthis'> {{highlightthis}}
<p class="highlightable">some text</p>
<p class="highlightable">some more text</p>
<p>This content is not highlightable.</p>
<p>but this is again.</p>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
