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 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"]

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

这里是ONLINE Demo

如果无法找到您的情况，请告诉我。

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

在Angular 2中突出显示特定文本

2 个答案: