javascript - 如何识别段落中的链接并使其可点击 Angular 2

标签 javascript angular

我有一段包含链接的字符串。这些链接必须是可点击的并将用户重定向到特定页面。我已经编写了自定义管道,但我错过了这里的要点。

尝试过:

import {
  Pipe,
  PipeTransform
} from '@angular/core';
import {
  DecimalPipe
} from '@angular/common';

@Pipe({
  name: 'urlify'
})

export class UrlifyPipe implements PipeTransform {

  transform(text: any): any {
    var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(urlRegex, function(url) {
      return '<a href="' + url + '">' + url + '</a>';
    });
  }
}

还有我的字符串:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo www.sentinal.com. Aenean massa. Cum sociis http://sentinal.com et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium 

结果:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo www.sentinal.com. Aenean massa. Cum sociis <a href="http://sentinal.com">http://sentinal.com</a> et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

正如我们所见,www.sentinal.com 和 http://sentinal.com并没有真正转换。添加了 h 标签,但这不是我想要的。任何想法的人如何实现它。我无法使用 Urlify 库,我想用自己的代码编写它。提前致谢

最佳答案

你应该这样做

<div [innerHtml]="my_model | urlify "></div>

我们必须使用innerHtml,以便它能够呈现html格式标签

关于javascript - 如何识别段落中的链接并使其可点击 Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54472505/

相关文章:

javascript - dxDataGrid 使用 ngResource 触发对所有类型的 Web api 的无限调用(错误 : [$rootScope:infdig] 10 $digest() iterations reached. 中止!)

javascript - 转换 RxJS Observable

javascript - 分别计算每个添加行的总数和Javascript中所有行的总数

javascript - 如何使用 AngularJS 从查询字符串中检索值

javascript - 更有效地发送 Canvas 内容

javascript - 解构更改名称并设置默认值

node.js - npm install 返回 syscall spawn git 错误

angular - 在 Angular 2 中,如何在提交时滚动到必填字段错误

angular - 如何更改 Angular 2 应用程序中的默认图标图标?

javascript - 绘图工具 - Angular2