UI聊天應用程序中的可單擊鏈接

Question

我在前端使用AngularJS，在聊天應用程序中使用Socket.io。
用戶發送消息時，其在UI中的呈現方式如下：

<p class="chat-msg">{{chat.msg}}</p>  

但是，如果用戶發送任何鏈接，我如何使其可單擊？

一種方法是將消息傳遞給正則表達式，並檢查消息是否包含鏈接並將其放在<a>標記中，並在上述標記中呈現該消息。
但是，如果消息包含一些html標記，而該標記是用戶試圖將其發送給另一個用戶的，則它將被替換為html。
例：

User1:  Show me your code in example.com  
User2:  My code is as follows : <p>This is a simple <b>app</b</p> in example.com
User3:  Looks Good  

在上面的代碼中，只有example.com應該是可單擊的，並且<p>標簽應顯示為消息的一部分，而不是在UI中呈現。
知道如何做到這一點嗎？

提前致謝

Answer 1

您應該使用內置的linky過濾器（來自ngSanitize模塊）。

<p class="chat-msg" ng-bind-html="chat.msg | linky"></p>

但是請注意， example.com不是可鏈接資源，因為它必須以http / https / ftp / mailto開頭。