问题描述
我有一个类似的文本：
LOREM IPSUM
DOLOR SIT amet,
1. consectetuer adipiscing elit. Aenean commodo LIGULA EGET dolor. Aenean massa. Cum sociis natoque penatibus
SUMMERY: ET MAGNIS DIS
PHASELLUS VIVERRA NULLA
LUCTUS PULVINAR, HENDRERIT ID
2. parturient montes, nascetur ridiculus mus. Donec quam
SUMMERY: FELIS, ULTRICIES NEC.
3. Pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede
SUMMERY: ET MAGNIS DIS
PHASELLUS VIVERRA NULLA
vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
MOLLIS PRETIUM.
现在我要为以SUMMERY开头的特定大写字母上色，这意味着我必须上色
摘要：ET MAGNIS DIS PHASELLUS VIVERRA NULLA LUCTUS PULVINAR，汉德里特ID
摘要：FELIS，未完成。
摘要：ET MAGNIS DIS PHASELLUS VIVERRA NULLA
我怎样才能做到这一点？ 或者我怎样才能在字符串数组中获得这些值？ 数组应如下所示：
["SUMMERY: ET MAGNIS DIS
PHASELLUS VIVERRA NULLA
LUCTUS PULVINAR, HENDRERIT ID", "SUMMERY: FELIS, ULTRICIES NEC.", "SUMMERY: ET MAGNIS DIS
PHASELLUS VIVERRA NULLA"]
1楼
如果我的理解是正确的，那么您需要修改代码的某些更改。 如果您正在寻找以下代码：
AppComponent
export class AppComponent {
name = 'Angular';
data = [
{
"text": "1. consectetuer adipiscing elit. Aenean commodo LIGULA EGET dolor. Aenean massa. Cum sociis natoque penatibus",
"child": [
{
"text": "SUMMERY: ET MAGNIS DIS PHASELLUS VIVERRA NULLA LUCTUS PULVINAR, HENDRERIT ID",
"color": "red"
}
]
},
{
"text": "2. parturient montes, nascetur ridiculus mus. Donec quam",
"child": [
{
"text": "SUMMERY: FELIS, ULTRICIES NEC.",
"color": "green"
}
]
},
{
"text": "3. Pellentesque eu, pretium quis,sem. Nulla consequat massa quis enim. Donec pede",
"child": [
{
"text": "SUMMERY: ET MAGNIS DIS PHASELLUS VIVERRA NULLA",
"color": "blue"
}
]
},
{
"text": "vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede MOLLIS PRETIUM.",
"child": []
}
]
constructor() { }
}
应用HTML代码
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<div>
LOREM IPSUM DOLOR SIT amet,
<div *ngFor="let pText of data; let i=index">
<p>{{pText.text}}</p>
<div *ngFor="let cText of pText.child;">
<p [ngStyle]="{color: cText?.color}" style="padding-left: 20px">{{cText.text}}</p>
</div>
</div>
</div>
这是一个
如果无法了解您的情况，请告诉我。
2楼
我们找到了使用正则表达式执行此操作的方法。 这是执行此操作的代码。
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'highLightText' }) export class HighLightText implements PipeTransform { transform(summary: string): any { let cleanedString = summary.replace(/\\\\.br\\\\\\d{3} /g, '\\\\.br\\\\'); const regexReported = /(?<=SUMMARY:)(.+?)(?=\\\\.br\\\\\\\\.br\\\\\\s+Reported and)/gm; var segment = regexReported.exec(cleanedString); if (segment == null || segment.length === 0) { const regexDoctor = /(?<=SUMMARY:)(.+?)(?=\\\\.br\\\\\\\\.br\\\\\\s+Dr)/gm; segment = regexDoctor.exec(cleanedString); } if (segment == null || segment.length === 0) return summary; else { if (segment[0].indexOf('SUMMARY:') > 0) { var value = this.replaceBreaks(summary); if (value.includes('SUMMARY:<br/> <br/>')) { value = value.replace(new RegExp("SUMMARY:<br/>", "g"), "SUMMARY:") let highLight = value.replace(new RegExp("SUMMARY:", 'g'), '<span class="sixteen"> SUMMARY:'); let removingSpan = highLight.replace(new RegExp('.\\s+<br/>\\s+<br/> <br/>', 'g'), '.</span><br/> <br/>'); return `${removingSpan}`; } if (value.includes('SUMMARY: <br/><br/><br/>')) { value = value.replace(new RegExp("SUMMARY:<br/><br/>", "g"), "SUMMARY:"); } let highLight = value.replace(new RegExp("SUMMARY:", 'g'), '<span class="sixteen"> SUMMARY:'); let removingSpan = highLight.replace(new RegExp('<br/> <br/>', 'g'), '</span><br/> <br/>'); return `${removingSpan}` } else { return cleanedString.replace('SUMMARY:', '').replace(segment[0], '<span class="sixteen"> SUMMARY:' + segment[0] + "</span>"); } } } public replaceBreaks(value: string) { let newValue = value .replace(/\\\\.br\\\\\\d{3}/g, "<br/>") .replace(/\\\\.br\\\\/g, "<br/>"); return `${newValue}`; } }
.sixteen{ color:blue; }