如何将http链接显示为角度字符串中的锚标记答案

【问题标题】：how to show http link as an anchor tag which is in the string in angular如何将http链接显示为角度字符串中的锚标记
【发布时间】：2022-01-04 04:09:55
【问题描述】：

我在字符串中有 http 链接，所以我想将该链接显示为锚标记，我尝试了这段代码但没有用。

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>

【问题讨论】：

你为什么不简单地使用锚标签<a>并将你的字符串绑定到它的href属性？
如果您可以查看图像，整个字符串（链接和文本）都来自背景，所以我需要先将它们拆分，然后我必须将锚标记添加到链接。

标签： angular http anchor

【解决方案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]

【讨论】：