Make sure to search for URLs in an array and loop through them according to specific conditions in Angular

Question

Make sure to search for URLs in an array and loop through them according to specific conditions in Angular

I am currently working on a project using Angular. The API response I am receiving includes three types of links, which I need to iterate over in an array within the 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/"',

I want to display the href as a hyperlink in my output, navigating to the correct link. This functionality is achieved using [innerHTML]="result" successfully for case 1.

However, for cases 2 and 3, the output displays plain text instead of hyperlinks. I have attempted using regular expressions to convert them into links, which works fine when stored in separate variables.

The challenge lies in applying these conditions of regular expressions while iterating over an array. Any suggestions to achieve this functionality are greatly appreciated.

I have updated the code in my stackblitz.

Working stackblitz can be found here:

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

API Response: The API may return any number of objects with various conditions, not limited to just the three mentioned below.

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 class="test" 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;
  }

javascript arrays angular typescript forms

Answer 1

Answer №1

The primary adjustment was to modify your functions in a way that they accept a string as input rather than fetching from global variables.

Here is the revised code. Initially, I check the category and then invoke the appropriate mapping method that you have already established.

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 class="test" 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;
  }
}

app.component.html

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

Answer 2

The primary adjustment was to modify your functions in a way that they accept a string as input rather than fetching from global variables.

Here is the revised code. Initially, I check the category and then invoke the appropriate mapping method that you have already established.

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 class="test" 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;
  }
}

app.component.html

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

Make sure to search for URLs in an array and loop through them according to specific conditions in Angular

Answer №1

app.component.ts

app.component.html

Similar questions

Make sure to always select the alternative option in ajax

Redirecting with PHP after registration using AJAX

Forward ReactJS

Retrieving Information from Ajax Call Using Python

Choosing a request date that falls within a specified range of dates in PHP Laravel

Generate and store text inputted from contenteditable

Utilizing Typescript's optional generic feature to automatically infer the type of the returned object and maintain autocomplete functionality

Angular Fusion: Delay execution of ngAfterViewInit until data is received from API call in ngOnInit

Interactively retrieving objects from a JavaScript array based on their keys

The functionality of jhtmlarea is not functioning properly when placed within an update

Determining the value of an object property by referencing another property

Having trouble getting the reset select function to work

How to add suspense and implement lazy loading for a modal using Material-UI

Identify the signature of a callback function during runtime

Pass the PHP data back to my existing webpage for JavaScript to retrieve

Upgrading from version 3 to version 5 in d3 does not just update the visualization but also introduces a new one

NextJS allows for custom styling of Tiktok embeds to create a unique and

Transfer information from a Vue function to an external JSON document

Java HTML and JS parser available for free!

Ways to verify the existence of a username in WordPress without the need to refresh the page