如何用角2突出显示段落中的单词? [英] how to highlight a word in a paragraph in angular 2?
问题描述
我已经在angular 1.x中做到了这一点,但我想知道如何使用关键字在angular 1.x iam中突出显示angular 2..im中的动态单词
I have done this in angular 1.x but i want to know how to highlight a dynamic word in angular 2..in angular 1.x iam using a keyword
<td><div highlight="var" keywords="somename"> {{paragraph}}</div></td>
我通过使用下面的angular-highlight.js完成了上面的html.
I have done the above html by using the below angular-highlight.js .
angular.module('angular-highlight', [])
.directive('highlight', function()
{
var component = function(scope, element, attrs) {
if (!attrs.highlightClass) {
attrs.highlightClass = 'angular-highlight';
}
var replacer = function(match, item) {
return '<span class="'+attrs.highlightClass+'">'+match+'</span>';
}
var tokenize = function(keywords) {
keywords = keywords.replace(new RegExp(',$','g'), '').split(',');
var i;
var l = keywords.length;
for (i=0;i<l;i++) {
keywords[i] = '\\b'+keywords[i].replace(new RegExp('^ | $','g'), '')+'\\b';
}
return keywords;
}
scope.$watch('keywords', function() {
//console.log("scope.keywords",scope.keywords);
if (!scope.keywords || scope.keywords == '') {
element.html(scope.highlight);
return false;
}
var tokenized = tokenize(scope.keywords);
var regex = new RegExp(tokenized.join('|'), 'gmi');
//console.log("regex",regex);
// Find the words
var html = scope.highlight.replace(regex, replacer);
element.html(html);
});
}
return {
link: component,
replace: false,
scope: {
highlight: '=',
keywords: '='
}
};
});
推荐答案
如果有人对一个简单的(通用)解决方案感兴趣,我想出了一条指令(基于Thierry Templier的工作!).
In case someone is interested in a simple (generic) solution, I came up with a directive (based on Thierry Templier work !).
此伪指令允许您传递要使用的文本,搜索文本和要应用的类:
This directive allows you to pass the text to work with, the search text and a class to apply :
import { Directive, ElementRef, Renderer, Input, OnInit } from '@angular/core';
import { escapeStringRegexp } from '../helpers/helper';
@Directive({
selector: '[appColorSearchedLetters]'
})
export class ColorSearchedLettersDirective implements OnInit {
@Input() search: string;
@Input() text: string;
@Input() classToApply: string;
constructor(private el: ElementRef, private renderer: Renderer) { }
ngOnInit() {
if (typeof this.classToApply === 'undefined') {
this.classToApply = '';
}
if (typeof this.search === 'undefined') {
this.renderer.setElementProperty(this.el.nativeElement, 'innerHTML', this.text);
return;
}
let search = escapeStringRegexp(this.search.toString());
this.renderer.setElementProperty(this.el.nativeElement, 'innerHTML', this.replace(this.text, search));
}
replace(txt: string, search: string) {
let searchRgx = new RegExp('('+search+')', 'gi');
return txt.replace(searchRgx, `<span class="${this.classToApply}">$1</span>`);
}
}
和助手
import { escapeStringRegexp } from '../helpers/helper';
包含:
let matchOperatorsRe = /[|\\{}()[\]^$+*?.]/g;
export function escapeStringRegexp (str) {
if (typeof str !== 'string') {
throw new TypeError('Expected a string');
}
return str.replace(matchOperatorsRe, '\\$&');
};
此函数来自 https://www.npmjs.com/package/escape-字符串正则表达式,并归功于Sindresorhus.
This function is from https://www.npmjs.com/package/escape-string-regexp and credit goes to Sindresorhus.
这是我的用法:
<span appColorSearchedLetters [search]="search" [text]="user.name" classToApply="searched"></span>
这篇关于如何用角2突出显示段落中的单词?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!