如何使用JavaScript将文本中任意位置的所有URL转换为锚点链接

问题根因 #

你的代码仅能替换第一个URL，是两个核心问题导致的：

• 正则未添加g（全局匹配）标志，JS正则默认仅匹配字符串中第一个符合规则的内容
• 反复调用exec()但未遍历所有匹配结果，仅取了第一个匹配值做替换

修正代码 #

你只需要修改正则定义和URL替换逻辑部分即可，完整调整后的函数如下：

function showFeedModal(newsID, type, dateTimeOfNews) {
  var $modal = $('#DetailModal');
  var $modalHeader = $modal.find('div.modal-header');
  var $modalBody = $modal.find('div.modal-body');

  // 给正则添加gi标志：g=全局匹配，i=忽略大小写适配域名大小写场景
  var urlCheck = new RegExp("([a-zA-Z0-9]+://)?([a-zA-Z0-9_]+:[a-zA-Z0-9_])?([a-zA-Z0-9.-]+\\.[A-Za-z]{2,4})(:[0-9]+)?(/.*)?", "gi");

  var img = '/Dashboard/img/icons/icon-widget/';
  $modalHeader.find('div.color-black').text(dateTimeOfNews);

  $.get('/Home/NewsModal?pk_NewsID=' + newsID + '&DateTimeOfNews=' + dateTimeOfNews + '&type=' + type, function (response) {
    img += response.NewsSourceModel.SourceIconFile;
    $modalBody.find('p.mb-3').text(response.NewsSourceModel.SourceName);
    $modalBody.find('div.news-icon').html('<img class="img-fluid" src="' + img + '" alt="">');
    $modalBody.find('div.detail').html('<div class="description font-big fw-bold" data-toggle="modal" data-target="#DetailModal">' + response.Headline + '</div>');

    // 直接全局替换所有URL，无需提前test判断，无匹配时会直接返回原字符串
    let formattedDesc = response.Description.replace(urlCheck, function(url) {
      // 兼容没有协议头的URL，自动补https://避免跳转错误
      const href = url.startsWith('http') ? url : `https://${url}`;
      return `<a href="${href}" target="_blank">${url}</a>`;
    });
    $modalBody.find('div.news-content').html('<p>' + formattedDesc + '</p>');

    if (response.Link != null)
      $modalBody.find('div.news-content').append('<p><a href="' + response.Link + '" target="_blank">View Details...</a></p>');
    $modal.modal();
  })
}

额外优化说明 #

• 去掉了冗余的urlCheck.test()判断，replace方法在无匹配内容时会直接返回原字符串，不会报错
• 增加了协议头兼容逻辑：如果匹配到的URL没有带http/https前缀，会自动补https://，避免点击时跳转成当前站点的相对路径
• 直接使用replace的回调函数处理每一个匹配结果，无需反复调用exec，逻辑更简洁性能更好

内容的提问来源于stack exchange，提问作者Syed Arsalan