2017-03-31 36 views
0

我想有一個管道,它檢測字符串中的任何URL並創建一個鏈接。目前我創建了這個,這似乎不工作:Angular2管道正則表達式URL檢測

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

我該如何解決它?

+0

您可以使用此NPM包:https://www.npmjs.com/package/url-regex – Marian07

回答

0

好像有兩個問題您實現:

  1. 你的正則表達式匹配具有URL的「WWW」部分第一個捕獲組($ 1)。你想改變正則表達式像這樣爲它工作(注意在開始的一對額外parethesis的和最終的正則表達式):

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

  • 管無法正常呈現html。如this之類的其他問題中提到的那樣,你需要一個技巧來做到這一點。例如,您需要將「管道值」分配給跨度屬性outerHTML(該跨度不會被渲染)。
  • Plunker example