UI 聊天应用程序中的可单击链接

Clickable links in UI Chat Application

本文关键字：单击 链接 聊天 应用程序 UI      更新时间：2023-09-26

我在前端使用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 中呈现它。
知道这是怎么做到的吗？

提前致谢

你应该

使用内置的linky过滤器(从ngSanitize模块(。

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

但请注意，example.com不是可链接的资源，因为它必须以 http/https/ftp/mailto 开头。

相关文章：