javascript 使用 angular.js 动态标记搜索字符串
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20597286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
mark search string dynamically using angular.js
提问by Dor Cohen
How can I mark my search pattern dynamically in my html?
Example:
如何在我的 html 中动态标记我的搜索模式？
例子：
I'm using angular and my html looks like this:
我正在使用 angular，我的 html 看起来像这样：
<div>
<input type="text" ng-model="viewmodel.searchString"/>
<!--Moving over all phrases-->
<div ng-repeat="phrase in viewmodel.Phrases">
{{phrase.title}}
</div>
</div>
I want the string matching pattern will be mark on every change in search string.
我希望字符串匹配模式将在搜索字符串的每次更改上进行标记。
Can you help me?
你能帮助我吗？
回答by tungd
Angular UI is a great choice. You can also do it with filter like: http://embed.plnkr.co/XbCsxmfrgmdtOAeBZPUp/preview
Angular UI 是一个不错的选择。你也可以用过滤器来做：http: //embed.plnkr.co/XbCsxmfrgmdtOAeBZPUp/preview
The essence is as commented by @Hylianpuffball, dynamically create styled 'span' tags for the matches.
本质正如@Hylianpuffball 所评论的那样，为比赛动态创建样式化的“跨度”标签。
.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted"></span>')
return $sce.trustAsHtml(text)
}
})
And use it like:
并像这样使用它：
<li ng-repeat="item in data | filter:search.title"
ng-bind-html="item.title | highlight:search.title">
</li>
回答by Bj?rn Kechel
Just in case that someone (like me a moment ago) needs this for angular2:
以防万一有人（像我刚才一样）需要这个用于 angular2：
highlight-pipe.ts:
突出显示pipe.ts：
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({name: 'highlightPipe'})
export class HighlightPipe implements PipeTransform{
transform(text:string, filter:string) : any{
if(filter){
text = text.replace(new RegExp('('+filter+')', 'gi'), '<span class="highlighted"></span>');
}
return text;
}
}
and use it like this:
并像这样使用它：
at top of file:
在文件顶部：
import {HighlightPipe} from './highlight-pipe';
in template where 'yourText' is the original text and 'filter' is the part you want to highlight:
在模板中，“ yourText”是原始文本，“ filter”是您要突出显示的部分：
<div [innerHTML]="yourText | highlightPipe: filter"/>
in component:
在组件中：
pipes: [HighlightPipe]
EDIT: I updated it for RC 4 and created a plunker for testing: http://plnkr.co/edit/SeNsuwFUUqZIHllP9nT0?p=preview
编辑：我为 RC 4 更新了它并创建了一个用于测试的 plunker：http://plnkr.co/edit/SeNsuwFUUqZIHllP9nT0?p=preview
回答by Rothin Sen
Inspired by @tungd's answer but valid for multiple search terms.
灵感来自@tungd 的答案，但对多个搜索词有效。
.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase){
phrases = phrase.split(" ");
for(i=0;i<phrases.length;i++)
text = text.replace(new RegExp('('+phrases[i]+')', 'gi'),'~~~~~%%%%%')
text = text.replace(new RegExp('('+'~~~~~'+')', 'gi'),'<span class="bold greenTxt">');
text = text.replace(new RegExp('('+'%%%%%'+')', 'gi'),'</span>')
}
return $sce.trustAsHtml(text)
}
});
PS: One can always limit the input to be in non-special chars for this to be 100% bullet-proof.
PS：始终可以将输入限制为非特殊字符，以使其 100% 防弹。
回答by Mathew Berg
Try Angular UI
They have a highlight directive. You can use it as a reference to make your own (or just use it directly).
他们有一个高亮指令。您可以将其用作参考来制作自己的（或直接使用）。
