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