如何解决在一个字符串中匹配条件以添加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>"
这样就不用担心换行了。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。