Javascript 如何从Greasemonkey中的现有文本创建链接？

我想我只是在理解如何使用正则表达式和创建链接方面遇到了太多的困难

我正在为一个虚拟宠物游戏编写一个Greasemonkey脚本，该脚本将为特定页面上列出的每个生物创建指向wiki的链接。问题是，新的宠物总是被添加到页面中，所以我不能只是将链接硬编码到脚本中。我需要搜索这些生物的名字，然后把它作为一个链接

您无需注册即可查看

目标页面中的示例源代码：

<tr>
    <td>Flizzard</td>
    <td align="center"><img src="./images/icons/yes.png" /></td>
    <td align="center"><img src="./images/icons/yes.png" /></td>
    <td align="center"><img src="./images/icons/yes.png" /></td>
    <td align="center"><img src="./images/icons/yes.png" /></td>
    <td align="center"><img src="./images/icons/yes.png" /></td>
    <td align="center"><img src="./images/icons/yes.png" /></td>
    <td align="center"><img src="./images/icons/yes.png" /></td>
</tr>
<tr>
    <td>Fluff</td>
    <td align="center"><img src="./images/icons/yes.png" /></td>
    <td align="center"><img src="./images/icons/yes.png" /></td>
    <td align="center"><img src="./images/icons/yes.png" /></td>
    <td align="center"><img src="./images/icons/yes.png" /></td>
    <td align="center"><img src="./images/icons/yes.png" /></td>
    <td align="center"><a href="accomplishments.php?family=Fluff&acc=exalted"><img src="./images/icons/no.png" border="0" /></a></td>
    <td align="center"><a href="accomplishments.php?family=Fluff&acc=herd"><img src="./images/icons/no.png" border="0" /></a></td>
</tr>  

弗利扎德
绒毛

.

“Flizzard”和“Fluff”将是我想要变成的链接。。。我发现了这个，并开始研究它，它可能会起作用，但它似乎没有说明从哪里开始匹配（以某种对我来说很有意义的方式），我也不知道该放什么（表示感兴趣文本结尾的标识符）

var html=document.body.innerHTML；
html=html.replace（/(http://wiki.unicreatures.com/index.php?title=)（*？）（第-
表示感兴趣文本结尾的标识符）/g，$1$3
);
document.body.innerHTML=html；

有人能解释一下正则表达式是如何工作的吗？由于我在生物名称后似乎看不到任何标点符号或空格，那么什么（表示感兴趣文本结尾的标识符）会起作用呢

谢谢

---

（请不要使用jQuery信息…javascript现在已经足够让我绞尽脑汁了LOL）

简短回答：正则表达式无法做到这一点。

为什么?？因为要替换的HTML没有唯一标识符或模式

您将希望执行以下操作：

// Get that table in that page
var table = document.getElementById('right').getElementsByTagName('table')[4]

// Get all table rows
var tableRows = table.getElementsByTagName('tr');

// For each table row, (except the first)
for(i=1; i<tableRows.length; i++) {

    // Get the first table cell
    var tableCell = tableRows[i].children[0];

    // Replace the text with a link, or whatever you fancy
    tableCell.innerHTML = '<a href="http://wiki.unicreatures.com/index.php?title='+tableCell.innerHTML.toLowerCase()+'">'+tableCell.innerHTML+'</a>';
}

//在该页中获取该表
var table=document.getElementById（'right'）.getElementsByTagName（'table'）[4]
//获取所有表行
var tableRows=table.getElementsByTagName（'tr'）；
//对于每个表行（第一行除外）
对于（i=1；i简短回答：正则表达式不能这样做。

为什么？因为要替换的HTML没有唯一标识符或模式

您将希望执行以下操作：

// Get that table in that page
var table = document.getElementById('right').getElementsByTagName('table')[4]

// Get all table rows
var tableRows = table.getElementsByTagName('tr');

// For each table row, (except the first)
for(i=1; i<tableRows.length; i++) {

    // Get the first table cell
    var tableCell = tableRows[i].children[0];

    // Replace the text with a link, or whatever you fancy
    tableCell.innerHTML = '<a href="http://wiki.unicreatures.com/index.php?title='+tableCell.innerHTML.toLowerCase()+'">'+tableCell.innerHTML+'</a>';
}

//在该页中获取该表
var table=document.getElementById（'right'）.getElementsByTagName（'table'）[4]
//获取所有表行
var tableRows=table.getElementsByTagName（'tr'）；
//对于每个表行（第一行除外）
对于（i=1；i另一个答案不起作用……但这确实起了作用

var mytable = document.getElementById('right').getElementsByTagName('table')[4];
var myrows = mytable.rows

for(i=1;i < myrows.length;i++)
{
var oldInner;
oldInner = myrows[i].cells[0].innerHTML;
var critterName;
critterName=myrows[i].cells[0].textContent;

 myrows[i].cells[0].innerHTML = "<a href='http://wiki.unicreatures.com
/index.php?title=" + critterName + "'"+ 'target="_blank">'+oldInner +"</a>";
}

var mytable=document.getElementById（'right'）.getElementsByTagName（'table'）[4]；
var myrows=mytable.rows
对于（i=1；i
另一个答案不起作用……但这个答案起作用了

var mytable = document.getElementById('right').getElementsByTagName('table')[4];
var myrows = mytable.rows

for(i=1;i < myrows.length;i++)
{
var oldInner;
oldInner = myrows[i].cells[0].innerHTML;
var critterName;
critterName=myrows[i].cells[0].textContent;

 myrows[i].cells[0].innerHTML = "<a href='http://wiki.unicreatures.com
/index.php?title=" + critterName + "'"+ 'target="_blank">'+oldInner +"</a>";
}

var mytable=document.getElementById（'right'）.getElementsByTagName（'table'）[4]；
var myrows=mytable.rows
对于（i=1；i
您的代码可以简化为：

var critterCells = document.querySelectorAll (
    "#right div.content table:nth-child(4) tr td:first-child"
);

for (var J = 1, L = critterCells.length;  J < L;  ++J) {
    var critterName = critterCells[J].textContent;

    critterCells[J].innerHTML =
        '<a href="http://wiki.unicreatures.com/index.php?title='
        + critterName + '"' + 'target="_blank">' + critterName
        + '</a>'
    ;
}

但是，如果您将来需要切换，它将在任何浏览器上运行。（例如，IE直到IE9才支持
textContent
。
您的代码可以简化为：

var critterCells = document.querySelectorAll (
    "#right div.content table:nth-child(4) tr td:first-child"
);

for (var J = 1, L = critterCells.length;  J < L;  ++J) {
    var critterName = critterCells[J].textContent;

    critterCells[J].innerHTML =
        '<a href="http://wiki.unicreatures.com/index.php?title='
        + critterName + '"' + 'target="_blank">' + critterName
        + '</a>'
    ;
}

但是，如果您将来需要切换，它将在任何浏览器上运行。（例如，IE直到IE9才支持
textContent
。
只有一个问题…tableCell.html未定义…是时候搜索了…可能是greasemonkey（或firefox）使用不同的东西。您能解释一下如何找到“正确”和“表格”[4]请告诉我，我知道如何解决这个问题？这仍然有一个小错误。修复了它。+1用于警告regex和基本正确的概念/答案。只有一个问题…tableCell.html未定义…是时候搜索了…可能是greasemonkey（或firefox）使用了一些不同的东西。您能解释一下如何解决“正确”和“表”问题吗[4]求你了，我知道怎么解决这个问题了？这仍然有一个小错误。修复了它。+1表示对正则表达式的警告和基本正确的概念/答案。