将文本中的url转化为超链接,包含端口

今天接到一个需求,要求在聊天窗口中,用户输入的文本内容,如果里面有超链接地址,就自动转换为a标签,让用户可以点击。

这个需求N年前做的sass项目就实现过,不过这次要求要把端口号也解析出来,例如http://localhost:3010/这样,趁机复习一下正则。

废话不多说,直接上代码

// 将文本中的url转化为超链接,包含端口
export const handleTextUrl = text => {
  let result = text || ''
  let reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-|:)+)/g
  if (result) {
    result = text.replace(reg, '<a href="$1$2" target="_blank">$1$2</a>')
  }
  return result
}
// handleTextUrl('测试一个地址:http://wiki.kaikeba.cn/pages/viewpage.action?pageId=24184041')
// handleTextUrl('http://localhost:3010/')

 

本站文章如未注明均为原创 | 文章作者:刘晓帆 | 转载请注明来自:前端印象

发表评论

邮箱地址不会被公开。 必填项已用*标注

浏览量:82 次浏览