Question

我需要在HTML语句中突出显示多个单词。

Ex: words: ['Hello', 'world', 'my']  
Statement: 'Hello, welcome to my beautiful world'

在正常情况下，我可以使用正则表达式查找并替换（例如，用

这样的标记替换每个单词的出现）

<span  class="highlight-span"> word </span>.

但是问题是，如果我的替换标记字符串中有诸如spa，span，class，lass，high之类的任何单词，我会遇到问题。）

有什么更好的方法吗？

下面是供您参考的代码。

import {
    Pipe,
    PipeTransform
} from '@angular/core';
@Pipe({
    name: 'highlight'
})
export class HighlightSearch implements PipeTransform {
    transform(value: string, args: string): any {
        if (args && value) {
            let startIndex = value.toLowerCase().indexOf(args.toLowerCase());
            if (startIndex != -1) {
                let endLength = args.length;
                let matchingString = value.substr(startIndex, endLength);
                return value.replace(matchingString, "<span  class="highlight-span">" + matchingString + "</span>");
            }

        }
        return value;
    }
}

在这种情况下，我的搜索词无法显示mar，mark。如何摆脱此类问题？

Answer 1

这是使用RegExp

来完成此操作的简单得多的方法

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'highlight'
})
export class HighlightPipe implements PipeTransform {

    transform(value: string, args: string[] | string): string {
        if (!args.length) { return value; }
        const pattern = Array.isArray(args) ? args.filter(arg => !!arg).join('|') : args;
        const regex = new RegExp(pattern.concat('|<[^>]*>'), 'gi');
        return value.replace(regex, (match) => /<[^>]*>/g.test(match) ? match: `<mark>${match}</mark>`);
    }

}

我已经制作了管道，以便您可以根据需要使用两个数组或单个字符串来突出显示。 <[^>]*>是用于匹配HTML标签的RegEx。

如果您要区分大小写进行搜索，只需按如下所示创建i时删除RegExp

const regex = new RegExp(pattern.concat('|<[^>]*>'), 'g');

然后在模板中，使用如下所示的管道

<span [innerHTML]="sentence | highlight: highlightWords"></span>

sentence和highlightWords所在的地方

sentence: string = 'Hello, welcome to my beautiful world';
highlightWords: string[] = ['world', 'my'];

这是StackBlitz上的一个有效示例。

Answer 2

一种快速而粗略的方法

import {
    Pipe,
    PipeTransform
} from '@angular/core';
import {
    DomSanitizer
} from '@angular/platform-browser'

    @Pipe({
        name: 'highlight'
    })
    export class HighlightSearch implements PipeTransform {

        constructor(private sanitizer: DomSanitizer){}

        transform(value: string, args: string): any {
            if (args && value) {
                let startIndex = value.toLowerCase().indexOf(args.toLowerCase());
                if (startIndex != -1) {
                    let endLength = args.length;
                    let matchingString = value.substr(startIndex, endLength);
                    let temp = value.replace("<mark>", "START_PLACEHOLDER");
                    temp = temp.replace("</mark>", "END_PLACEHOLDER");
                    temp = temp.replace(matchingString, "<mark>" + matchingString + "</mark>");
                    temp = temp.replace( "START_PLACEHOLDER","<mark>");
                    temp = temp.replace( "END_PLACEHOLDER","</mark>");
                    return this.sanitizer.bypassSecurityTrustHtml(temp)
                }

            }
            return value;
        }
    }

在插入html时也使用Dom Sanitizer

在语句中突出显示多个字符串-Javascript

2 个答案: