如果字符串在任何地方包含url，则使用javascript将其转换为链接[重复]

Posted 2023-05-08

【中文标题】如果字符串在任何地方包含url，则使用javascript将其转换为链接[重复]

【英文标题】：if string contains url anywhere convert it into link using javascript [duplicate]

【发布时间】：2021-11-30 19:15:42

【问题描述】：

我有一个从数据库获取数据的模式。但我需要知道 Description 中是否有任何 URL 将其转换为锚标记。它仅适用于第一个位置的 URL，但我的段落包含太多 URL。

function showFeedModal(newsID, type, dateTimeOfNews) 

  var $modal = $('#DetailModal');
  var $modalHeader = $modal.find('div.modal-header');
  var $modalBody = $modal.find('div.modal-body');

  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]+)?(/.*)?");

  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 + '" >');
    $modalBody.find('div.detail').html('<div class="description font-big fw-bold" data-toggle="modal" data-target="#DetailModal">' + response.Headline + '</div>');

    //if NewsContent contains url anywhere convert it to hyperLink
    if (urlCheck.test(response.Description)) 
      $modalBody.find('div.news-content').html('<p>' + response.Description.replace(urlCheck.exec(response.Description)[0], "<a href='" + urlCheck.exec(response.Description)[0] + "' target='_blank'>" + urlCheck.exec(response.Description)[0] + "</a>") + '</p>');
    
    else
      $modalBody.find('div.news-content').html('<p>' + response.Description+ '</p>');


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

【参考方案1】：

你已经完成了大部分工作，你只需要使用replaceAll()而不是replace()来替换所有链接，而不仅仅是第一个：

function showFeedModal(newsID, type, dateTimeOfNews) 

  var $modal = $('#DetailModal');
  var $modalHeader = $modal.find('div.modal-header');
  var $modalBody = $modal.find('div.modal-body');

  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]+)?(/.*)?");

  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 + '" >');
    $modalBody.find('div.detail').html('<div class="description font-big fw-bold" data-toggle="modal" data-target="#DetailModal">' + response.Headline + '</div>');

    //if NewsContent contains url anywhere convert it to hyperLink
    if (urlCheck.test(response.Description)) 
      $modalBody.find('div.news-content').html('<p>' + response.Description.replaceAll(urlCheck.exec(response.Description)[0], "<a href='" + urlCheck.exec(response.Description)[0] + "' target='_blank'>" + urlCheck.exec(response.Description)[0] + "</a>") + '</p>');
    
    else
      $modalBody.find('div.news-content').html('<p>' + response.Description+ '</p>');


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

【讨论】：

我已经尝试过了，但它不能正常工作。

那么您的问题不在这里，因为replaceAll() 会完全按照您的预期工作。