Объединить дубликаты URL в 1 URL, Javascript

Question

У меня есть функция, которая показывает / выводит URL-адреса из текстовой области. На данный момент, однако, он не объединит дубликаты в 1 URL. Как вывести те же URL-адреса, что и один (Объединить http://google.com, www.google.com, http://www.google.com, или просто google.com)?

На данный момент:

Должно быть:

Мой код:

let result = $("#converted_url");

$("#textarea").on("input", function() {
    result.html(""); // Reset the output

    var urlRegex = /(https?:\/\/[^\s]+)/g;
    $("#textarea").val().replace(urlRegex, function(url) {
      var link = '<div><a href="' + url + '">' + url + '</a></div>';

      // Append the new information to the existing information
      result.append(link);
    });
});

.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<div id="converted_url"></div>

JS FIDDLE

Кредиты

Скотт Маркус, Stackoverflow

Answer 1

let result = $("#converted_url");

$("#textarea").on("input", function() {
    result.html(""); // Reset the output
    
    var urlRegex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9]\.[^\s]{2,})/g;
     var found = [];
    $("#textarea").val().replace(urlRegex, function(url) {
    var link = "";
     var protOmmitedURL = url.replace(/^(?:https?:\/\/)?(?:www\.)?/i, "").split('/')[0];
        if (found.includes(protOmmitedURL)) {
      return;
    }else
    {
      link = '<div><a href="' + url + '">' + url + '</a></div>';
      found.push(protOmmitedURL);
    }
     
      // Append the new information to the existing information
      result.append(link);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(Just type anything in the box to trigger the event.)<br>
<textarea id="textarea">http://google.com blah blah http://facebook.com</textarea>

<div id="converted_url"></div>

Answer 2

Простое исправление: хранить совпавшие URL-адреса в массиве и добавлять ссылку, только если URL-адрес отсутствует в этом массиве.

ОБНОВЛЕНИЕ: изменено регулярное выражение на /((https?:\/\/|www\.|\/\/)[^\s]+)/g, чтобы оно соответствовало ссылкам, начинающимся с http://, https://, www., //. Вы можете использовать любое другое регулярное выражение, относящееся к другим случаям (например, http://www.), просто измените сохраненный URL-адрес, чтобы вы могли сравнить его (вы можете рассматривать ссылки http и https как уникальные).

let result = $("#converted_url");

$("#textarea").on("input", function() {
  result.html(""); // Reset the output

  var urlRegex = /((https?:\/\/|www\.|\/\/)[^\s]+)/g;
  var found = [];
  $("#textarea").val().replace(urlRegex, function(url) {
    let trimmedUrl = url.replace(/^(https?:\/\/|www\.|\/\/)/, "");
    if (found.includes(trimmedUrl)) {
      return;
    }
    found.push(trimmedUrl);
    var link = '<div><a href="' + url + '">' + url + '</a></div>';

    // Append the new information to the existing information
    result.append(link);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(Just type anything in the box to trigger the event.)<br>
<textarea id="textarea">http://google.com blah blah http://facebook.com</textarea>

<div id="converted_url"></div>