Javascript 将文本转换为 link

Question

我正在尝试做到这一点，以便当用户在文本框中输入文本时，它会将其打印为 link，以便他们可以单击。这是我的代码：

HTML:

<form>
<input type="text"  id="urlhtml" size ="30" placeholder="http://www.sait.ca">
<br>
<br>
<input type="submit" value="Add Url" id="submit"onclick="getUrlList(); return false">
</form>
<br>
<h2> Your favorite urls are: </h2>
<a href target ="_blank" ><h3><span id="showurls"></span>
</h3></a>

JAVASCRIPT:

 var urlList=[];
     function getUrlList () {

    var url={urlhtml};
    var i=0;
    var thisList="";

    url.urlhtml=document.getElementById("urlhtml").value;

    urlList.push(url);
        for(i=0; i< urlList.length;i++)
        {
        var thisurl={urlhtml};
        thisurl=urlList[i];
        thisList+="http://" + thisurl.urlhtml;
        thisList+="<br>";

        }
    document.getElementById("showurls").innerHTML=thisList;
}

显示 link，您可以单击它，但它只会打开同一页面，不会转到用户输入的内容。

任何帮助将不胜感激。

Answer 1

将 for 循环更改为

for(i=0; i< urlList.length;i++)
{
    thisList+="<a href='http://" + urlList[i] + "'>" + urlList[i] + "</a><br>";
}

基本上你没有正确形成锚标签

Answer 2

把代码改成这样。您必须为每个 link.

形成一个 "a" 属性

var urlList = [];

function getUrlList() {

  var url = {
    urlhtml
  };
  var i = 0;
  var thisList = "";

  url.urlhtml = document.getElementById("urlhtml").value;

  urlList.push(url);
  for (i = 0; i < urlList.length; i++) {
    thisList += "<a target='blank' href='http://" + urlList[i].urlhtml + "'>" + urlList[i].urlhtml + "</a><br>";
  }
  document.getElementById("showurls").innerHTML = thisList;
}

<form>
  <input type="text" id="urlhtml" size="30" placeholder="http://www.sait.ca" value="www.google.com">
  <br>
  <br>
  <input type="submit" value="Add Url" id="submit" onclick="getUrlList(); return false">
</form>
<br>
<h2> Your favorite urls are: </h2>
<a href target="_blank"><h3><span id="showurls"></span>
</h3></a>

Javascript 将文本转换为 link

Javascript convert text to a link

html

javascript

href