javascript - 将 Javascript 数组输出到 DIV 中

Question

我有一个函数，它显示/应该从文本区域输出网址(它应该只列出网址)。但目前它只显示最后的结果/网址。我怎样才能输出所有的数组/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>

当前输出(使用此代码):

希望(应该):

我不想追加结果，因为文本区域更改后结果不会更新。 IE:

Answer 1

每当您更新结果区域时，都会覆盖以前的结果。您需要附加到它。

仅供引用: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>