Javascript 将 url 显示为超链接答案

【问题标题】：Javascript display url as hyperlinkJavascript 将 url 显示为超链接
【发布时间】：2018-04-04 06:50:34
【问题描述】：

所以我有一个 URL，如果它存在于 javascript 表中，就会显示它。

我希望此 URL 成为用户可以单击但无法完全获取的超链接。

我已经尝试过，但无法正确使用，也无法正常工作。任何帮助将不胜感激。

这可能很简单，但我现在头疼

<script type="text/javascript">
    //var memos;

    if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari
        var xmlhttp = new XMLHttpRequest();
    } else { // IE6, IE5
        var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "memos.xml", false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML;
    memos = xmlDoc.getElementsByTagName("memo");  

    // Function to get values from xml and print in a table
    function showTable() {
        // For loop to iterate through each memo in XML. 
        for (var count = 0; count < memos.length; count++) {
            // Get attribute 'id' from xml and assign to id variable.
            id = memos[count].getAttribute("id");
            // Get element title from XML and get its value and assign to 'title' variable.
            title = memos[count].getElementsByTagName("title")[0].childNodes[0].nodeValue;
            sender = memos[count].getElementsByTagName("sender")[0].childNodes[0].nodeValue;
            recipient = memos[count].getElementsByTagName("recipient")[0].childNodes[0].nodeValue;
            date = memos[count].getElementsByTagName("date")[0].childNodes[0].nodeValue;
            message = memos[count].getElementsByTagName("message")[0].childNodes[0].nodeValue;
            urlNode = memos[count].getElementsByTagName("url")[0];
            //Check if URL element is empty. If empty then populate with "" else print out the URL value
            if (urlNode.hasChildNodes()) {
                url = urlNode.childNodes[0].nodeValue;
            } else {
                url = "";
            }
            // Print out the table
            document.write("<tr><td>" + id + "</td> " +
                " <td>" + title + "</td> " +
                " <td class='center'>" + sender + "</td> " +
                " <td class='center'>" + recipient + "</td> " +
                " <td class='center'>" + date + "</td> " +
                " <td class='center'>" + message + "</td> " +
                " <td class='center'>" + url + "</td></tr>");
        }
    }
</script>
</head>

<body>
    <h1>List of Memos!</h1>
    <br>

    <script type="text/javaScript">
        document.write("
        <h2 align='center'>There are currently " + memos.length + " memos altogether</h2>"); document.write("
        <br>");
    </script>

    <table class="table2">
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Sender</th>
            <th>Recipient(s)</th>
            <th>Date</th>
            <th>Message</th>
            <th>URL</th>
        </tr>

        <!-- Javascript to display the table -->
        <script type="text/javascript">
        <!-- Call the showTable function created in Javascript above -->
            showTable();
        </script>

    </table>

</body>

</html>

【问题讨论】：

url = "<a href="' + urlNode.childNodes[0].nodeValue + '">' + urlNode.childNodes[0].nodeValue + '</a>'

标签： javascript html url hyperlink

【解决方案1】：

变化：

" <td class='center'>" + url + "</td></tr>");

到

" <td class='center'><a href='#" + url + "'>" + url  + "</a></td></tr>");

已更新以处理空白网址

变化：

" <td class='center'>" + url + "</td></tr>");

到

" <td class='center'><a href='" + ((url == null || url == "")  ? "#" : url) + "'>" + url  + "</a></td></tr>");

【讨论】：

我知道我很傻！我尝试了它的变体，但从未得到正确的组合。谢谢
请注意，如果 url 为空白，您将得到 <td class='center'><a href=""></a></td></tr> IOW：空白 Anchor 标签，很可能不会引起问题，但需要注意。