在一个字符串中匹配条件以添加HTML并替换原始字符串

如何解决在一个字符串中匹配条件以添加HTML并替换原始字符串

这里是stackBlitz example。到目前为止我所做的。

我正在构建一个有角度的应用程序。不幸的是，我被赋予了巨大的单个字符串值。此字符串的某些部分需要“ 固定”。我发现，在每个:（冒号）之后，直到每个新行\n，都需要插入<strong>标签。

字符串示例

"Football: great\nCricket: ok\nTennis: Poor"

当前，它看起来像这样：

足球：棒极了
板球：好的
网球：可怜

但是需要它看起来像这样：

足球：伟大
板球：确定
网球：差

我认为最好的方法是创建一个管道以使字符串通过，并使用regex过滤掉冒号之后和换行符之前的单词。

接受过滤出的一个或多个单词，并为其添加强标签，然后将匹配的单词替换回原始字符串中。

我快到了，但是我无法正确执行循环，似乎它可以识别" "并将每个匹配的单词都应用于所有匹配项，所以我只会得到一个返回值。所以我回来了：

足球：
板球：
网球：

或

足球：确定 确定
板球：确定 确定
网球：确定 确定

这里是stackBlitz example。到目前为止我所做的。

boldPipe.pipe.ts

import { Pipe,PipeTransform,Sanitizer,SecurityContext } from '@angular/core';
import { noop } from 'rxjs';

@Pipe({
    name: 'boldSpan'
})
export class BoldSpanPipe implements PipeTransform {
    constructor(private sanitizer: Sanitizer) {}

    transform(value: string): any {

        const regex = /[^:]*$/gim;
        return this.sanitize(this.replace(value,regex));
    }

    replace(str,regex) {
        const matched = str.match(regex);
        debugger;
        matched
            ? matched.forEach(foundString => {
                    foundString = foundString.substring(1,foundString.length);

                    str = str.replace(regex,`<strong>${foundString}</strong>`);

              })
            : noop;
        return str;
    }

    sanitize(str) {

        return this.sanitizer.sanitize(SecurityContext.HTML,str);
    }
}

解决方法

您需要将冒号以外的至少一个字符与/[^:]+$/gm甚至是/[^:\r\n]+$/匹配，然后替换为<strong>$&</strong>模式，其中$&是指整体匹配值：

export class BoldSpanPipe implements PipeTransform {
    constructor(private sanitizer: Sanitizer) {}

    transform(value: string): any {
        const regex = /[^:]+$/gm;
        return this.sanitize(this.replace(value,regex));
    }

    replace(str,regex) {
        return str.replace(regex,'<strong>$&</strong>');
    }

    sanitize(str) {
        return this.sanitizer.sanitize(SecurityContext.HTML,str);
    }
}

,

仅str.replace(/:(.*)/g,":<strong>$1</strong>"
这样就不用担心换行了。