Question

我想有一个管道，它检测字符串中的任何url并创建一个链接。目前我创建了这个，这似乎不起作用：

@Pipe({name:'matchUrl'})
export class MatchUrlPipe implements PipeTransform {
    transform(value: string, arg?: any): any {
      var exp = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g;
      return value.replace(exp, "<a href='$1'>$1</a>");
    }
}

我该如何解决？

Answer 1

似乎您的实施存在两个问题：

你的正则表达式有第一个捕获组（$ 1）匹配＆＃39; www＆＃39;网址的一部分。你想改变像这样的正则表达式来使它工作（注意在正则表达式的开头和结尾有一对额外的parethesis）：

var exp = /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,4}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*))/g;

管道无法正常渲染html。如this之类的其他问题所提到的，你需要一个技巧来做到这一点。您需要指定“管道”值＆＃39;例如，跨度的属性outerHTML（不会渲染范围）。

Plunker example

Angular2管道正则表达式url检测

1 个答案: