if string contains url anywhere convert it into link using javascript

Question

I have a modal in which I am getting data from DB. But I need to know if there is any URL in Description anywhere convert it to anchor tag. It is working only for 1st position URL but my paragraph contains too many 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 + '" alt="">');
    $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();
  })

}

score 0 · Answer 1 · answered Oct 12 '21 at 09:31

You already have made most of the work, you just need to use replaceAll() instead of replace() to replace all the links, and not only the first one:

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 + '" alt="">');
    $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();
  })

}

Then your issue is not here, because `replaceAll()` would work exactly like what you're expecting. — zessx, Oct 12 '21 at 13:34

if string contains url anywhere convert it into link using javascript

1 Answers1