0

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

我正在为虚拟宠物游戏编写 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”将是我想要变成链接的东西......我找到了这个并开始研究它，它可能会起作用，除了它似乎没有说明从哪里开始比赛（在某种程度上无论如何，这对我来说很有意义），我不知道该输入什么（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）

4

3 回答 3

2

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

为什么？因为要替换的 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>';
}
于 2013-01-29T10:23:58.330 回答
1

您的代码可以简化为：

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

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

于 2013-01-30T07:17:01.457 回答
0

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

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>";
}
于 2013-01-29T23:02:33.520 回答