如何用JavaScript将聊天消息中的链接转为<a>可点击标签

可以通过JavaScript结合正则表达式实现需求，具体实现如下：

1. 选中所有带有messages类的div元素
2. 用正则匹配消息中所有以http/https开头的链接
3. 将匹配到的链接替换为带有target="_blank"属性的<a>标签

代码示例：

// 获取所有目标聊天消息容器
const messageContainers = document.querySelectorAll('.messages');

// 遍历每个容器处理链接
messageContainers.forEach(container => {
  // 正则匹配http/https开头的完整链接（匹配到下一个空格为止）
  const linkPattern = /\bhttps?:\/\/\S+/g;
  // 替换链接为可点击的a标签
  container.innerHTML = container.innerHTML.replace(linkPattern, link => {
    return `<a href="${link}" target="_blank">${link}</a>`;
  });
});

说明 #

• 正则/\bhttps?:\/\/\S+/g：\b确保匹配完整的链接开头，https?:\/\/匹配http或https协议，\S+匹配所有非空白字符，直到遇到空格停止
• 替换时保留原链接作为<a>标签的href属性和显示文本，target="_blank"保证链接在新窗口打开

内容的提问来源于stack exchange，提问作者mohmmadreza najafi