Angular2将纯文本转换为url的方式(锚链接)

Question

我有时会有一个可以接收这样的文本的组件:

文本www.website.com

但是如果它是一个链接我想将它转换为url.像这样.

文本www.website.com

我读了这个SO答案,建议使用第三方库,例如anchorme.有没有办法以angular2方式做到这一点？

Answer 1

使用简单的正则表达式来修改HTML内容存在许多问题.

这是一种使用linkifyjs模块的方法,您需要使用它npm install.请注意输入被视为纯文本,而输出是HTML文本.

import { Pipe, PipeTransform } from '@angular/core';
import linkifyStr from 'linkifyjs/string';

@Pipe({name: 'linkify'})
export class LinkifyPipe implements PipeTransform {
  transform(str: string): string {
    return str ? linkifyStr(str, {target: '_system'}) : str;
  }
}

注意:如果您需要指定target属性,请添加例如.{target: '_system'}作为第二个参数linkifyStr.

Answer 2

好吧,为了制作一个管道,你可以制作一个由.组成的管道组件

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



    @Pipe({name: 'linkify'})
    export class LinkifyPipe implements PipeTransform {
      transform(link: string): string {
        return this.linkify(link);
      }

      private linkify(plainText): string{
        let replacedText;
        let replacePattern1;
        let replacePattern2;
        let replacePattern3;

        //URLs starting with http://, https://, or ftp://
        replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
        replacedText = plainText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

        //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
        replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
        replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

        //Change email addresses to mailto:: links.
        replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
        replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

        return replacedText;
       }
    }

然后导入这个像你将指令,传递给

pipes: [LinkifyPipe]

并插入这样的

{{url | linkify}}

Answer 3

你应该这样使用这个管道:

<div [innerHtml]="note.title | linkify"></div>

Answer 4

你应该检查 angular-linky https://github.com/dzonatan/angular-linky

<span [innerHTML]="yourText | linky"></span>