在AngularJS中突出显示过滤的结果
我正在使用ng-repeat和angularJS中的filter，如电话教程，但是我想突出显示页面中的search结果。 对于基本的jQuery，我只是简单地parsing了input中的关键字页面，但是我正在尝试以angular度来实现。 有任何想法吗 ？
我的代码：
<input id="search" type="text" placeholder="Recherche DCI" ng-model="search_query" autofocus> <tr ng-repeat="dci in dcis | filter:search_query"> <td class='marque'>{{dci.marque}} ®</td> <td class="dci">{{dci.dci}}</td> </tr> 在做AngularJS v1.2 +
HTML：
<span ng-bind-html="highlight(textToSearchThrough, searchText)"></span>
JS：
$scope.highlight = function(text, search) { if (!search) { return $sce.trustAsHtml(text); } return $sce.trustAsHtml(text.replace(new RegExp(search, 'gi'), '<span class="highlightedText">$&</span>')); };
CSS：
.highlightedText { background: yellow; }
angular度ui-utils只支持一个术语。 我使用下面的filter而不是范围函数：
app.filter('highlight', function($sce) { return function(str, termsToHighlight) { // Sort terms by length termsToHighlight.sort(function(a, b) { return b.length - a.length; }); // Regex to simultaneously replace terms var regex = new RegExp('(' + termsToHighlight.join('|') + ')', 'g'); return $sce.trustAsHtml(str.replace(regex, '<span class="match">$&</span>')); }; });
而HTML：
<span ng-bind-html="theText | highlight:theTerms"></span>
尝试Angular UI
filter – > Highlite（filter）。 还有Keypress指令。
的index.html
<!DOCTYPE html> <html> <head> <script src="angular.js"></script> <script src="app.js"></script> <style> .highlighted { background: yellow } </style> </head> <body ng-app="Demo"> <h1>Highlight text using AngularJS.</h1> <div class="container" ng-controller="Demo"> <input type="text" placeholder="Search" ng-model="search.text"> <ul> <!-- filter code --> <div ng-repeat="item in data | filter:search.text" ng-bind-html="item.text | highlight:search.text"> </div> </ul> </div> </body> </html>
app.js
angular.module('Demo', []) .controller('Demo', function($scope) { $scope.data = [ { text: "<< ==== Put text to Search ===== >>" } ] }) .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) } })
参考： http : //codeforgeek.com/2014/12/highlight-search-result-angular-filter/演示： http : //demo.codeforgeek.com/highlight-angular/
在这个线程的@ uri的回答中，我将其修改为使用单个string或string数组。
这是TypeScript的版本
module myApp.Filters.Highlight { "use strict"; class HighlightFilter { //This will wrap matching search terms with an element to visually highlight strings //Usage: {{fullString | highlight:'partial string'}} //Usage: {{fullString | highlight:['partial', 'string, 'example']}} static $inject = ["$sce"]; constructor($sce: angular.ISCEService) { // The `terms` could be a string, or an array of strings, so we have to use the `any` type here /* tslint:disable: no-any */ return (str: string, terms: any) => { /* tslint:enable */ if (terms) { let allTermsRegexStr: string; if (typeof terms === "string") { allTermsRegexStr = terms; } else { //assume a string array // Sort array by length then join with regex pipe separator allTermsRegexStr = terms.sort((a: string, b: string) => b.length - a.length).join('|'); } //Escape characters that have meaning in regular expressions //via: http://stackoverflow.com/a/6969486/79677 allTermsRegexStr = allTermsRegexStr.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); // Regex to simultaneously replace terms - case insensitive! var regex = new RegExp('(' + allTermsRegexStr + ')', 'ig'); return $sce.trustAsHtml(str.replace(regex, '<mark class="highlight">$&</mark>')); } else { return str; } }; } } angular .module("myApp") .filter("highlight", HighlightFilter); };
这在JavaScript中转换为：
var myApp; (function (myApp) { var Filters; (function (Filters) { var Highlight; (function (Highlight) { "use strict"; var HighlightFilter = (function () { function HighlightFilter($sce) { // The `terms` could be a string, or an array of strings, so we have to use the `any` type here /* tslint:disable: no-any */ return function (str, terms) { /* tslint:enable */ if (terms) { var allTermsRegexStr; if (typeof terms === "string") { allTermsRegexStr = terms; } else { // Sort array by length then join with regex pipe separator allTermsRegexStr = terms.sort(function (a, b) { return b.length - a.length; }).join('|'); } //Escape characters that have meaning in regular expressions //via: http://stackoverflow.com/a/6969486/79677 allTermsRegexStr = allTermsRegexStr.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); // Regex to simultaneously replace terms - case insensitive! var regex = new RegExp('(' + allTermsRegexStr + ')', 'ig'); return $sce.trustAsHtml(str.replace(regex, '<mark class="highlight">$&</mark>')); } else { return str; } }; } //This will wrap matching search terms with an element to visually highlight strings //Usage: {{fullString | highlight:'partial string'}} //Usage: {{fullString | highlight:['partial', 'string, 'example']}} HighlightFilter.$inject = ["$sce"]; return HighlightFilter; })(); angular.module("myApp").filter("highlight", HighlightFilter); })(Highlight = Filters.Highlight || (Filters.Highlight = {})); })(Filters = myApp.Filters || (myApp.Filters = {})); })(myApp|| (myApp= {})); ;
或者，如果你只是想要一个简单的JavaScript实现没有这些生成的命名空间：
app.filter('highlight', ['$sce', function($sce) { return function (str, terms) { if (terms) { var allTermsRegexStr; if (typeof terms === "string") { allTermsRegexStr = terms; } else { // Sort array by length then join with regex pipe separator allTermsRegexStr = terms.sort(function (a, b) { return b.length - a.length; }).join('|'); } //Escape characters that have meaning in regular expressions //via: http://stackoverflow.com/a/6969486/79677 allTermsRegexStr = allTermsRegexStr.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&"); // Regex to simultaneously replace terms - case insensitive! var regex = new RegExp('(' + allTermsRegexStr + ')', 'ig'); return $sce.trustAsHtml(str.replace(regex, '<mark class="highlight">$&</mark>')); } else { return str; } }; }]);
编辑包括一个修复，以前会打破这是有人search. 或任何其他在正则expression式中有意义的字符。 现在这些angular色首先被转移。
我希望我的例子能使我们很容易理解：
app.filter('highlight', function() { return function(text, phrase) { return phrase ? text.replace(new RegExp('('+phrase+')', 'gi'), '<kbd>$1</kbd>') : text; }; });
<input type="text" ng-model="search.$"> <ul> <li ng-repeat="item in items | filter:search"> <div ng-bind-html="item | highlight:search.$"></div> </li> </ul>
type – headHighlight中有一个标准的高亮filter
用法
<span ng-bind-html="text | typeaheadHighlight:query"></span>
使用范围{text:"Hello world", query:"world"}呈现
<span...>Hello <strong>world</strong></span>
当search项与元素所包含的数据相关时，使用ng-class。
所以在你的重复元素，你会有ng-class="{ className: search_query==elementRelatedValue}"
当满足条件时将dynamic地将类“className”应用于元素。
关于特殊的caracter的问题，我想只是逃避你可能会失去正则expression式search。
那这个呢：
function(text, search) { if (!search || (search && search.length < 3)) { return $sce.trustAsHtml(text); } regexp = ''; try { regexp = new RegExp(search, 'gi'); } catch(e) { return $sce.trustAsHtml(text); } return $sce.trustAsHtml(text.replace(regexp, '<span class="highlight">$&</span>')); };
一个无效的正则expression式可能只是用户input文本：
- 有效：m
- 无效：m [
- 无效：m [ô
- 无效：m [ôo
- 有效：m [ôo]
- 有效的：m [ôo] n
- 有效：m [ôo] ni
- 有效：m [ôo] nic
- 有效：m [ôo] nica
你觉得@Mik Cox怎么样？
另一个命题：
app.filter('wrapText', wrapText); function wrapText($sce) { return function (source, needle, wrap) { var regex; if (typeof needle === 'string') { regex = new RegExp(needle, "gi"); } else { regex = needle; } if (source.match(regex)) { source = source.replace(regex, function (match) { return $('<i></i>').append($(wrap).text(match)).html(); }); } return $sce.trustAsHtml(source); }; } // wrapText wrapText.$inject = ['$sce']; // use like this $filter('wrapText')('This is a word, really!', 'word', '<span class="highlight"></span>'); // or like this {{ 'This is a word, really!' | wrapText:'word':'<span class="highlight"></span>' }}
我愿意批评！ 😉
感谢您提出这个问题，因为这是我正在处理的问题。
两件事，虽然：
首先，顶部的答案很好，但是突出（）有特殊字符的问题的评论是正确的。 这个评论build议使用一个逃脱链会起作用，但他们build议使用正在被淘汰的unescape（）。 我结束了什么：
$sce.trustAsHtml(decodeURI(escape(text).replace(new RegExp(escape(search), 'gi'), '<span class="highlightedText">$&</span>')));
其次，我正在尝试在URL的数据绑定列表中执行此操作。 在highlight（）string中，不需要数据绑定。
例：
<li>{{item.headers.host}}{{item.url}}</li>
变成了：
<span ng-bind-html="highlight(item.headers.host+item.url, item.match)"></span>
遇到了将问题留在{{}}中的问题，并且遇到了各种各样的错误。
希望这可以帮助任何人遇到同样的问题。
如果您正在使用angular度材质库，则会有一个名为md-highlight-text的内置指令
从文档：
<input placeholder="Enter a search term..." ng-model="searchTerm" type="text"> <ul> <li ng-repeat="result in results" md-highlight-text="searchTerm"> {{result.text}} </li> </ul>
链接到文档： https ： //material.angularjs.org/latest/api/directive/mdHighlightText
