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

Question

这是一个stackBlitz example。到目前为止我做了什么。

我正在构建一个 angular 应用程序。不幸的是，我得到了一个巨大的单一字符串值。该字符串的一部分需要是“粗体”。我已经确定在每个 :（冒号）之后直到每个新行 \n 都需要插入  标签。

字符串示例

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

目前看起来是这样的：

足球：很棒
板球：好的
网球：差

但需要它看起来像这样：

足球：很棒
板球：还行
网球：差

我认为最好的方法是创建一个管道来传递字符串，用正则表达式过滤掉冒号之后和换行符之前的单词。

将过滤掉的单词或单词添加到其中，然后将匹配的单词替换回原始字符串。

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

足球：
板球：
网球：

或

足球：还行还行
板球：还行还行
网球：还行还行

这是一个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);
    }
}

Answer 1

您需要至少匹配一个除冒号以外的字符与/[^:]+$/gm，甚至/[^:\r\n]+$/，然后替换为$&所指的$&模式到整个匹配值：

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);
    }
}

Answer 2

简单str.replace(/:(.*)/g, ":"
这种方式不用担心换行。

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

Match criteria within one string to add HTML and replace original string

javascript

regex

pipe

angular