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-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-Of-Text-Of-Interest），因为我似乎没有看到任何标点符号或生物命名后的空格？

谢谢！

（请不要jQuery信息...... javascript足以让我的大脑现在包围大声笑）

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

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

3 个答案: