突出显示角2中的特定文本

Question

我有一条短信，大概是：

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 VIVERRA NULLA LUCTUS PULVINAR，HENDRERIT ID

萨默里:费利斯，乌尔特里尼。

夏季: ET MAGNIS DIS病虫害

我怎么能这么做？或者如何在字符串数组中获得这些值？数组应该如下所示：

["SUMMERY: ET MAGNIS DIS 

 PHASELLUS VIVERRA NULLA

 LUCTUS PULVINAR, HENDRERIT ID", "SUMMERY: FELIS, ULTRICIES NEC.", "SUMMERY: ET MAGNIS DIS 

 PHASELLUS VIVERRA NULLA"]

Answer 1

我们已经找到了用正则表达式来实现这个目标的方法。这是这样做的代码。

​

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

​

Answer 2

如果我的理解是正确的，那么您需要修改代码的某些更改。这是代码，如果您需要：

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() { }
}

App 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>

这是一个在线演示

如果我不能了解你的情况，请告诉我。