如何用角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屋！