JavaScript 必须搜索带有"http"的字符串，并将其转换为单击时在新选项卡中打开的链接

Question

我的html中有一个表，它是从JSON文件动态填充的。加载页面并填充表之后，一些列包含url类型的字符串。我有一个脚本，可以搜索表，并为任何以'http'开头的字符串分配一个类。

我正试图重新编写该脚本，以便它将搜索表(td单元格)，找到以"http"开头的字符串，将它们转换为超链接并在新选项卡(_blank)上打开url。但是，这并没有奏效。有人能指出我在下面的脚本中出错的地方吗?我知道有link()方法，但它贬值了，所以我不想使用它。

表在脚本中由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

需要清除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>

Answer 2

您的代码似乎没有任何明显的错误，但我看不出您将其添加回表的位置。比如:

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