如何将 http link 显示为 angular 中字符串中的锚标记

Question

我在字符串中有 http link，所以我想显示 link 作为锚标记，我试过这段代码但没有成功。

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

您能否按如下方式修改 urlify，看看是否能解决您的问题：

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

然后将结果绑定到[innerHTML]

如何将 http link 显示为 angular 中字符串中的锚标记

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

anchor

http

angular