JavaScript 必须在 td 中搜索带有 'http' 的字符串，并将其转换为 link，单击后会在新选项卡中打开

Question

我的 html 中有一个 table，它是从 JSON 文件动态填充的。加载页面并填充 table 后，某些列包含 url 的字符串。我有一个脚本可以搜索 table 并将 class 分配给以 'http'.

开头的任何字符串

我正在尝试修改该脚本，以便它搜索 table（td 单元格），找到以 'http' 开头的字符串，将它们转换为 hyperlinks并在新选项卡 (_blank) 上打开 url。但是，它不起作用。有人可以指出我在下面的脚本中哪里出错了吗？我知道有 link() 方法，但它已贬值，所以我不想使用它。

table 在脚本中由 ID (#YukonTerr_FR) 标识。

谢谢！


var tds4 = document.querySelectorAll("#YukonTerr_FR td");
for (var i = 0; i < tds4.length; i++) {
  var str4 = tds4[i].innerText;
  var link = document.createElement("a");
  if (str4.includes("https")) {
    link.setAttribute("href", "str4");
    link.setAttribute("target", "_blank");
    link.appendChild(document.createTextNode("str4"));
  }   
}

Answer 1

您的代码似乎没有任何明显的错误，但我看不到您将其添加回 table 的位置。类似于：

...
tds4[i].appendChild(link)

Answer 2

您需要清除 td 的内容并将新创建的“a”元素附加到 td。另外，使用变量 str4，而不是字符串 "str4"

var tds4 = document.querySelectorAll("#YukonTerr_FR td");
for (var i = 0; i < tds4.length; i++) {
  var str4 = tds4[i].innerText;
  var link = document.createElement("a");
  if (str4.includes("https")) {
    tds4[i].innerText = ""; //Clear content of td
    link.setAttribute("href", str4);
    link.setAttribute("target", "_blank");
    link.appendChild(document.createTextNode(str4));
    tds4[i].appendChild(link); // Add the new link to td
  }
}

<b>Before:</b>
<table>
  <tr>
    <td>https://www.google.com</td>
  </tr>
  <tr>
    <td>Just a string</td>
  </tr>
  <tr>
    <td>https://amazon.com</td>
  </tr>
</table>
<p></p>
<b>After:</b>
<table id="YukonTerr_FR">
  <tr>
    <td>https://www.google.com</td>
  </tr>
  <tr>
    <td>Google</td>
  </tr>
  <tr>
    <td>https://amazon.com</td>
  </tr>
</table>

JavaScript 必须在 td 中搜索带有 'http' 的字符串，并将其转换为 link，单击后会在新选项卡中打开

JavaScript must search td for string with 'http' and convert it to link that opens in new tab when clicked

javascript

string

hyperlink