檢查陣列中的URL并根據角度條件進行迭代

我正在處理一個 angular 專案，我在 API 的回應中得到了 3 種型別的鏈接，如下所示，我正在 html 中通過陣列對其進行迭代。

case 1: <a class="test" href="https://www.google.com/" target="_blank">click here</a> ,
case 2: 'with only href ------- href="https://www.facebook.com/". ',
case 3: 'Without a tag and href ----- "https://www.google.com/"',

我想href在我的輸出中將我得到的回應顯示為超鏈接，它應該導航到適當的鏈接。為此，我使用了[innerHTML]="result"它，它適用于案例 1。

截至目前，它在輸出中顯示為案例 2 和案例 3 的純文本。我使用正則運算式將它們轉換為鏈接。如果我將它們放在單獨的變數中，它作業正常。

如何使用我在迭代陣列時已經完成的正則運算式的條件。

請幫我實作這個功能。

我已經在stackblitz 中更新了我的代碼。

作業堆疊閃電戰是：

https://stackblitz.com/edit/angular-ivy-ckabj3?file=src/app/app.component.html

來自 API 的回應：可以有任意數量的具有任何條件的物件，而不僅僅是低于 3。

  apiresponse: any = {
    response: [
      {
        hrefmessages:
          'with only href ------- href="https://www.facebook.com/". ',
      },

      {
        hrefmessages: 'Without a tag and href ----- "https://www.google.com/"',
      },
      {
        hrefmessages:
          'with both a tag and href ------- <a  href="https://www.google.com/" target="_blank">click here</a>. ',
      },
    ],
  };

HTML：

<div *ngFor="let result of hrefArray">
  <p
    [innerHTML]="result"
  ></p>
</div>

TS：

  withHrefAndWithoutAtag() {
    let match = this.withJustHref.match(
      /(\b(https?|ftp|file):\/\/[-A-Z0-9 &@#\/%?=~_|!:,.;]*[-A-Z0-9 &@#\/%=~_|])/gi
    );
    console.log('match', match);
    let final = this.withJustHref.replace('href=', '');
    console.log('final', final);
    match.map((url) => {
      final = final.replace(
        url,
        '<a href="'   url   '" target="_BLANK">'   url   '</a>'
      );
    });
    console.log(final);
    this.withJustHref = final;

    return final;
  }

uj5u.com熱心網友回復：

主要的變化是讓你的方法接受一個字串作為輸入，而不是從全域變數中讀取。

這是結果。基本上我首先檢查類別，然后呼叫您已經撰寫的正確 map 方法。

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  hrefArray: any = [];

  apiresponse: any = {
    response: [
      {
        hrefmessages:
          'with only href ------- href="https://www.facebook.com/". ',
      },

      {
        hrefmessages: 'Without a tag and href ----- "https://www.google.com/"',
      },
      {
        hrefmessages:
          'with both a tag and href ------- <a  href="https://www.google.com/" target="_blank">click here</a>. ',
      },
    ],
  };

  ngOnInit(): void {
    this.hrefArray = this.mapHrefs();
  }

  mapHrefs(): string[] {
    return this.apiresponse.response.map((item) => {
      let message = item.hrefmessages;
      if (message.includes('<a ')) return message;

      if (message.includes('href')) return this.withHrefAndWithoutAtag(message);

      return this.withoutHrefAndAtag(message);
    });
  }

  withHrefAndWithoutAtag(item: string): string {
    let match = item.match(
      /(\b(https?|ftp|file):\/\/[-A-Z0-9 &@#\/%?=~_|!:,.;]*[-A-Z0-9 &@#\/%=~_|])/gi
    );
    console.log('match', match);
    let final = item.replace('href=', '');
    console.log('final', final);
    match.map((url) => {
      final = final.replace(
        url,
        '<a href="'   url   '" target="_BLANK">'   url   '</a>'
      );
    });
    console.log(final);

    return final;
  }

  withoutHrefAndAtag(item: string): string {
    let match = item.match(
      /(\b(https?|ftp|file):\/\/[-A-Z0-9 &@#\/%?=~_|!:,.;]*[-A-Z0-9 &@#\/%=~_|])/gi
    );
    let final = item;
    match.map((url) => {
      final = final.replace(
        url,
        '<a href="'   url   '" target="_BLANK">'   url   '</a>'
      );
    });

    return final;
  }
}

應用程式組件.html

<div  *ngFor="let result of hrefArray">
  <p [innerHTML]="result"></p>
</div>

標籤：javascript 数组 有角的 打字稿 形式

上一篇：php無法保存圖片

下一篇：表單處理php