how to show http link as an anchor tag which is in the string in angular

Question

I have http link in the string, So i want to show that link as an anchor tag, I tried this code but did not work.

ts:

 urlify(text: any) {
    var urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.replace(urlRegex, function(url: string) {
      return url;
    })
  }
  
  
  getStoryList() {
    
      this.storiesData = res["1tool-project-management"].data.stories;
      this.storiesData.forEach((element: any,index) => {
         element.description_of_story = this.urlify(element.description_of_story)
      //  this.storiesData[index]["titleurl"] = this.urlify(element.description_of_story)
        
      });
      this.storiesData.forEach((element: any) => {
        element.description_of_story1 = element.description_of_story.replace(element.description_of_story,'')
        
      });

html:

 <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                           {{urlify(row.description_of_story)}}
                            <!-- <span [innerHTML]="urlify(row.description_of_story)"></span> -->
                        </ng-template>

Answer 1

Can you modify urlify as below and see if that resolves your issue:

    urlify(text: any) {
      var urlRegex = /(https?:\/\/[^\s]+)/g;
      return text.replace(urlRegex, function(url: string) {
        return `<a href="${url}" target="_blank">${url}</a>`;
      })
    }

and then bind the result to[innerHTML]