JS实现微信im文本消息超链接解析方法

当我们在做 im 即时聊天时，需要对用户发送的文本消息，进行处理，如果消息内容中包含链接的话，我们需要将其包装成链接形式，点击可以跳转。 本文是参照微信消息解析链接的方式，大家可以收藏以方便日后使用。

效果预览

解析方法

以下方法仅适用于浏览器 Web 端，小程序端进行相关修改即可使用。

/**
 * 解析文本消息
 * @param content {string} 文本内容
 * @return 解析后的消息 {html | string} 
 */
/**
 * 解析文本消息
 * @param content {string} 文本内容
 * @return 解析后的消息 {html | string} 
 */
function parseContent(content) {
  // 定义一个正则表达式，用于匹配链接部分或邮箱地址部分
  const LINK_REG = /((https?:\/\/)?([\da-z.,-]+)\.([a-z.,]{2,6})([/\w .,-]*)*(\?[\w%&=-]*)?(,\w+)*\.?)|([\w._%+-]+@[\da-z.-]+\.[a-z.]{2,6})/gi
  // 使用正则表达式匹配链接部分或邮箱地址部分，并去重
  const matchList = [...new Set(content.match(LINK_REG))]
  // 如果匹配成功，返回链接部分或邮箱地址部分和非链接部分，否则返回原数据
  if (matchList) {
    matchList.map((url) => {
      // 去除左右两边的空格、英文句号、英文逗号
      url = url.trim().replace(/^\.+|\.+$|^,+|,+$/g, '')
      // 链接如果不是 http 开头，则补上 http
      const href = url.startsWith('http') ? url : `http://${url}`
      // 定义一个动态正则表达式，英文问号需要转义
      const regex = new RegExp(url.replace('?', '\\?'), 'g')
      // 将链接改为 a 标签
      content = content.replace(regex, `<a href='${href}' target='_blank'>${url}</a>`)
    })
    return content
  } else {
    // 否则是纯文本，直接返回
    return content
  }
}

以上关于JS实现微信im文本消息超链接解析方法的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。