在角度应用程序中自动将纯文本转换为聊天消息中的可单击URL

Question

我正在为有角度的应用程序开发聊天功能。我想检测输入文本中的URL，并在发送时将其显示为可点击的链接。

我尝试使用

<div class="chatbox-text" ng-bind-html="chatbox-text | linky:'_blank'">{{ message.content }}</div>

但似乎不起作用。

有什么建议吗？

我的要求是：

User1：www.example.com，单击“发送”。它应显示为User2的可点击URL。

Answer 1

您正在使用看起来像AngularJS库的linky指令。

我建议您使用linkify-it，效果很好。

编辑：刚刚注意到问题被标记为angular，但是代码是AngularJS。如果确实是Angular（如2+），请使用上面的库并绑定到innerHTML：

<div [innerHTML] = "msg | linkifyDirective | sanitizeHTML" ></div>

请注意，我组成了指令名称，这只是为了向您发送指令。或者，您可以不使用指令而在函数中链接和清除消息，但这会带来性能成本。

如果您的项目确实是AngularJS，请更改标签。

Answer 2

您是否曾尝试使用http开头发送http://example.com之类的消息？因为www.example.com不是链接

Answer 3

这种显示文本的逻辑怎么样？

• 将输入字符串分割为多个单词

• 创建一个细分受众群数组，该细分受众群具有以下属性：value和isLink

• 在细分的构造函数中，检查文本是否为链接，以HTTP或www或其他任何规则开头
• 模板中的每个细分均显示为具有关联的click事件的跨度
如果链接重定向到链接，则
• 在点击事件处理程序中，将收到细分对象
• 在模板中分配一个CSS类，如果islink为true，则将范围显示为链接

玩得开心！