ignoring html tags in angularjs filter search
Question
I need a little bit help. I'm using the highlight search for AngularJS from https://codeforgeek.com/2014/12/highlight-search-result-angular-filter/
My problem is now, that if I search for keywords the filter also the html tags displays.
In this example, if I search for "test" the highlighted result would be correct. But if i search for example for the "h" or "head" it highlights and shows the raw html.
Picture attached
example content in JS file:
$scope.posts = [
{
"id" : "1",
"title" : "CMS Newsletter - 20/12/2017",
"content" : "<html><Head><body>testest test</body></head></html>"
};
Current filter in JS:
newsApp.filter('highlight', function($sce) {
return function(text, phrase, input) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span style="background: red; color: #fff;">$1</span>') // highlighting style css
return $sce.trustAsHtml(text)
};
HTML:
<input type="text" ng-model="search.text" class="search_e_news" placeholder="search the newsletter archive..." />
<div class="inner-news">
<p ng-bind-html="post.content | highlight:search.text ">
</p>
</div>
Can somebody help me with this. Im not that experienced with angular.
Thanks!
1 answers
solution1
0 2018-11-18 06:58:34
You can use jquery / jqlite in order to remove all html tags using
$(YOUR_HTML_CONTENT).text()
So. I would modify your highlight filter to be something like that:
newsApp.filter('highlight', function($sce) {
return function(text, phrase, input) {
text = $(text).text();
// ----^
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span style="background: red; color: #fff;">$1</span>') // highlighting style css
return $sce.trustAsHtml(text)
};
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.