如何从 Greasemonkey 中的现有文本创建链接？ [复制]

Question

我认为我在理解如何使用正则表达式和创建链接时遇到了太多麻烦......

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

无需注册即可查看the target page。

来自目标页面的示例源代码：

<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”将是我想要变成链接的内容......我找到了这个并开始研究它，它可能会起作用，只是它似乎没有说明从哪里开始比赛（无论如何，以某种对我来说有意义的方式），我不知道要输入什么（The-Identifier-That-Denotes-End-Of-Text-Of-Interest）

var html = document.body.innerHTML;
html = html.replace( /(http://wiki.unicreatures.com/index.php?title=)(.*?)(The-
Identifier-That-Denotes-End-Of-Text-Of-Interest)/g, $1<a href="path/to/$2">$2</a>$3
);
document.body.innerHTML = html;  

.

也许有人可以尝试解释一下该正则表达式是如何工作的，以及什么会起作用（The-Identifier-That-Denotes-End-Of-Text-Of-Interest），因为我似乎没有看到任何标点符号或生物名称后的空格？

谢谢！

（请不要使用 jQuery 信息...javascript 足以让我的大脑立即陷入困境 LOL）

Answer 1

简答：你不能用正则表达式做到这一点。

为什么？因为您要替换的 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>';
}

Answer 2

您的代码可以简化为：

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>'
    ;
}

CSS 选择器中的#right div.content 有助于防止在错误的表格/页面上运行。

---

jQuery 版本只是短一点（到目前为止）：

var critterCells = $("#right div.content table:eq(4) tr:gt(0)").find ("td:first");

critterCells.each (function () {
    var jThis       = $(this);
    var critterName = jThis.text ();
    jThis.html (
        '<a href="http://wiki.unicreatures.com/index.php?title='
        + critterName + '"' + 'target="_blank">' + critterName
        + '</a>'
    );
} );

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

Answer 3

另一个答案没有用......但这确实

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>";
}