我在 angularJS 中使用 ng-repeat 和过滤器，就像电话教程一样，但我想突出显示页面中的搜索结果。使用基本的 jQuery，我会简单地在输入键上解析页面，但我正在尝试以有角度的方式来做。有什么想法吗？
我的代码：
<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 angularjs-ng-repeat
我的高亮解决方案，将其与 angular-ui-tree 元素一起使用：https://codepen.io/shnigi/pen/jKeaYG
angular.module('myApp').filter('highlightFilter', $sce =>
function (element, searchInput) {
element = element.replace(new RegExp(`(${searchInput})`, 'gi'),
'<span class="highlighted">$&</span>');
return $sce.trustAsHtml(element);
});
添加css：
.highlighted {
color: orange;
}
HTML：
<p ng-repeat="person in persons | filter:search.value">
<span ng-bind-html="person | highlightFilter:search.value"></span>
</p>
并添加搜索输入：
<input type="search" ng-model="search.value">
【讨论】：
如果您使用的是角度材质库，则有一个名为 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
【讨论】：
我希望我的简单示例能让您更容易理解：
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>
【讨论】：
phrase 和text 是什么？
$sce。这只是一个例子，它必须简单易懂。如果您需要 - 将其包装在您的代码中。谢谢。
从@uri 在此线程中的回答出发，我将其修改为使用单个字符串 OR 字符串数组。
这是 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;
}
};
}]);
EDITED 包含以前会破坏的修复程序，这是某人搜索了. 或任何其他在正则表达式中有意义的字符。现在这些字符首先被转义。
【讨论】：
| 将阻止正则表达式。应该是这样的var escape = new RegExp('[\\-\\[\\]\\/\\{\\}\\(\\)\\*\\+\\?\\.\\\\\^\\$\\|]', 'g'); var termsEscaped : string [] = new Array(); terms.sort((a: string, b: string) => b.length - a.length).forEach( (value:string, index: number, array : string[]) : void => { termsEscaped.push(value.replace(escape, "\\$&")); }); var allTermsRegexStr : string = termsEscaped.join('|');
angular-bootstrap:typeaheadHighlight中有标准的高光滤镜
用法
<span ng-bind-html="text | typeaheadHighlight:query"></span>
在{text:"Hello world", query:"world"} 范围内渲染
<span...>Hello <strong>world</strong></span>
【讨论】：
angular ui-utils 只支持一个术语。我使用的是以下过滤器而不是作用域函数：
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>
【讨论】：
theTerms 应该是一个字符串数组。
termsToHighlight = termsToHighlight.split(" ");，然后再进行排序。
var regex = new RegExp('(' + termsToHighlight.join('|') + ')', 'ig');
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/
【讨论】：
感谢您提出这个问题，因为这也是我正在处理的问题。
不过有两件事：
首先，最佳答案很棒，但是关于 highlight() 的特殊字符有问题的评论是准确的。该评论建议使用可以工作的转义链，但他们建议使用正在逐步淘汰的 unescape() 。我最终得到了什么：
$sce.trustAsHtml(decodeURI(escape(text).replace(new RegExp(escape(search), 'gi'), '<span class="highlightedText">$&</span>')));
其次，我试图在 URL 的数据绑定列表中执行此操作。在 highlight() 字符串中，您不需要数据绑定。
例子：
<li>{{item.headers.host}}{{item.url}}</li>
成为：
<span ng-bind-html="highlight(item.headers.host+item.url, item.match)"></span>
将它们留在 {{ }} 中时遇到问题并出现各种错误。
希望这对遇到同样问题的人有所帮助。
【讨论】：
另一个命题：
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>' }}
我愿意接受批评！ ;-)
【讨论】：
关于特殊字符的问题，我认为只是逃避你可能会失去正则表达式搜索。
这个呢：
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>'));
};
一个无效的正则表达式可能是用户只输入文本：
@Mik Cox 你怎么看？
【讨论】：
在 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;
}
【讨论】：
return $sce.trustAsHtml(unescape(escape(text).replace(new RegExp(escape(search), 'gi'), '<span class="highlightedText">$&</span>')));
apple，返回的html包含http://www.apple.com。它不会破坏链接吗？
RegExp.quote = function(str) { return (str+'').replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&"); };转义特殊字符像这样：new RegExp(RegExp.quote(search), 'gi')
gi 和$& 是什么意思吗...拜托
过滤器-> Highlite（过滤器）。 还有 Keypress 指令。
【讨论】：
使用当搜索词与元素包含的数据相关时应用的 ng-class。
所以在你的 ng-repeated 元素上，你会有ng-class="{ className: search_query==elementRelatedValue}"
当条件满足时，将类“className”动态应用于元素。
【讨论】：