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开头。