如何转换网页上的 SQL 数据，使任何 URL 的数据成为超链接？

Question

我有一个网站 table。 table 显示来自 MySQL 的数据。 table 中有多个列。其中一列是 URL 列。

问题

目前 table 显示完整 URL 且不可点击。

问题：

如何使文本可点击？
我应该使用 Javascript 来解决这个问题吗？或 PHP?

目标

检查具有 class ID“urlColumn”的列，看看是否...
- 单元格是 blank
  - 将单元格留空
- 单元格以 <a href 开头
  - 什么都不做，URL 已经是超链接
- 单元格不是空白，也没有 <a href
  - 将此 URL 转换为超链接。

当前解决方案 它不工作。它只是将所有内容留空，或将该列中的所有内容转换为超链接（即使没有找到 URL）

setInterval(() => { 
   let urlColumn = document.getElementsByClassName('urlColumn');
   for (let i = 0; i < urlColumn.length; i++) {

      //Checks to see if the URL cell is blank.
      if (urlColumn[i].innerHTML = '') {
         //Do nothing.

      //Checks to see if the URL is already hyperlinked.
      } else if (urlColumn[i].innerHTML = '<a href*') {
         //Do nothing. URL already converted to hyperlink.

      //Cell is not blank, and has not yet been converted to hyperlink.
      } else {

         //Stores the current value of the cell (the URL)
         var urlColumnInner = document.getElementsByClassName('urlColumn')[i];

         //Adds <a href> tag and the URL value to create the hyperlink.
         urlColumnInner = '<a href="' + urlColumnInner + '">OPEN</a>';            
      }
   }
}, 5000);

Answer 1

感谢 droopsnoot 发现了我单曲 = 的错误。

我做了一些额外的修改，代码运行完美。

您可以查看 JSFiddle here

HTML

<html>
<body>
<p>This table contains data pulled from a SQL database. The URL's are in plan text, and are not clickable. The javascript will scan through the URL column, and make the URLs into clickable hyperlinks every 5 seconds.</p>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>URL</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td class="urlColumn">https://1example.com</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td class="urlColumn"><a href="https://2example.com">OPEN</a></td>
  </tr>
      <td>Bob</td>
    <td>Smith</td>
    <td class="urlColumn">https://3example.com</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td class="urlColumn"></td>
  </tr>
</table>

</body>
</html>

Javascript

//Runs every 5 seconds.
setInterval(() => {
 
  //Gets the DOM element with class id urlColumn.
   var urlColumn = document.getElementsByClassName('urlColumn');
  
  //Loops through every element with the class id urlColumn.
   for (var i = 0; i < urlColumn.length; i++) {

      //Checks every cell with the class id urlColumn, and if a blank one is found, do nothing.
      if (urlColumn[i].innerHTML.length == 0) {

      //Checks every cell with the class id urlColumn, and if its already hyperlinked do nothing.
      } else if (urlColumn[i].innerHTML.indexOf('<a href') != -1) {

      //If the first 2 ifs are not true, we know the cell with class id urlColumn is not blank, and is not hyperlinked. 
      } else {
        //Get the non hyperlink URL, and add hyperlink tags.
         urlColumn[i].innerHTML = '<a href="' + urlColumn[i].innerHTML + '"' + 'target="_blank" rel="noopener noreferrer">OPEN</a>'; 
      }
   }
  //Run this function every 5 seconds.
}, 5000);

如何转换网页上的 SQL 数据，使任何 URL 的数据成为超链接？

How to convert SQL data on webpage so any data that is a URL becomes a hyperlink?

javascript

php

mysql

hyperlink