程序员最近都爱上了这个网站  程序员们快来瞅瞅吧!  it98k网:it98k.com

本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

暂无数据

Angular,使评论中的链接可点击

发布于2023-02-03 03:30     阅读(642)     评论(0)     点赞(12)     收藏(4)


我正在开发一个应用程序,用户可以在其中向某些字段添加评论。这些评论也可以是链接。因此,作为用户,我希望能够单击这些链接,而不是将它们复制粘贴到新选项卡中。

  • 如果评论/属性值中出现普通网络链接([http://|http:]... 或 [https://|https:]...),则应将其显示为可点击链接。
  • 多个链接可能出现在同一个评论/属性值中。
  • 单击链接会打开一个新的浏览器选项卡,调用此链接。

这就是管理 formControl 的方式。我想我可以在正则表达式的帮助下识别多重链接,但我如何让它们也可点击?

感谢您提前回答和帮助。

this.formControl = new FormControl('', [this.params.customValidations(this.params)]);
    this.formControl.valueChanges.subscribe(() => {
      this.sendStatusToServices();
    }); 

   

解决方案


在表单编辑器/输入之外(很可能是您要查找的内容)

在将表单字段的值保存到数据库之前,或者在呈现给用户之前从数据库编辑接收到的主体,您可以使用 Regex 将链接替换为锚标记。

function replaceURLWithHTMLLinks(text) {
    var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
    return text.replace(exp,"<a href='$1'>$1</a>"); 
}

富文本编辑器

但是,如果您尝试在表单输入(如 WordPress 的文本编辑器)中启用链接,那将有点困难。您需要一个<textarea>来启用自定义 HTML 元素。然后您需要检测用户何时键入了 URL,因此您可以调用replaceURLWithHTMLLinks(). 老实说,你应该只使用一个包。那里有几个不错的。

希望这可以帮助




所属网站分类: 技术文章 > 问答

作者:黑洞官方问答小能手

链接:http://www.qianduanheidong.com/blog/article/497283/89dc76d05d8980b0f55c/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

12 0
收藏该文
已收藏

评论内容:(最多支持255个字符)