Вывести массив Javascript в DIV

Question

У меня есть функция, которая показывает / должна выводить URL-адреса (он должен просто перечислить URL-адреса) из текстовой области. На данный момент, однако, он показывает только последний результат / URL. Как я могу вывести все массивы / URL (может быть, в div).

Мой код:

<textarea id="textarea"></textarea>

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

<script type="text/javascript">
$("#textarea").on("change keyup paste", function() {
    var text=document.getElementById("textarea").value;
    var urlRegex = /(https?:\/\/[^\s]+)/g;
    text.replace(urlRegex, function(url) {
    var link = '<div><a href="' + url + '">' + url + '</a></div>';
    document.getElementById("converted_url").innerHTML=link
    })
});
</script>

Выход в данный момент (с этим кодом):

Желаемый (Должен быть):

Я не хочу добавлять результаты, если результаты не обновляются, а текстовая область изменяется. то есть:

Answer 1

Я написал этот код для решения вашей проблемы.

Дайте мне знать, если у вас есть какие-либо вопросы относительно кода.

var urlsContainer = $("#converted_url");
var urlsTextArea = $("#textarea");
$("#textarea").on("input", function () {
  var text = urlsTextArea.val();
  var urls = [];
  var raw_urls = text.split('\n');
  for (x = 0; x < raw_urls.length; x++) {
    if (isValidUrl(raw_urls[x]) && urls.indexOf(raw_urls[x]) < 0) {
      urls.push(raw_urls[x]);
    }
  }
  urlsUpdated(urls);
});
function urlsUpdated (urls) {
  urlsContainer.html('');
  for (x = 0; x < urls.length; x++) {
    urlsContainer.append('<div><a href="' + urls[x] + '">' + urls[x] + '</a></div>');
  }
}
function isValidUrl(str) {
  var regex = /(http|https):\/\/(\w+:{0,1}\w*)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%!\-\/]))?/;
  if(!regex.test(str)) {
    return false;
  }
  return true;
}

<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>

Обновление

Хорошо, что вы нашли решение. Я добавил рабочий пример-скриншот моего решения.

пример-экран

Обновление 2.0

let result = $("#converted_url");

$("#textarea").on("input", function() {
    result.html(""); // Reset the output
    
    var urlRegex = /(https?:\/\/[^\s]+)/g;
    var urls = [];
    $("#textarea").val().replace(urlRegex, function(url) {
      if (urls.indexOf(url) > -1) {
        return;  
      }
      urls.push(url);
    });
    for (x = 0; x < urls.length; x++) {
      var link = '<div><a href="' + urls[x] + '">' + urls[x] + '</a></div>';
      result.append(link)
    }
});

textarea { width:200px; height:50px;}

<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"></textarea>

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

Пример снимка экрана

Answer 2

При каждом обновлении области результатов вы перезаписываете предыдущие результаты. Вы должны добавить к нему.

К вашему сведению: событие input - это широкое событие, которое будет запускаться всякий раз, когда есть какой-либо ввод элемента. Вы можете обнаружить, что это проще и прямолинейнее, чем прослушивание нескольких событий. Кроме того, поскольку вы используете JQuery, вы также можете использовать его последовательно для получения всех ваших ссылок DOM.

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);
    });
});

textarea { width:200px; height:50px;}

<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>