0

正規表現の使用方法とリンクの作成方法を理解するのに苦労していると思います...

特定のページにリストされている各クリーチャーの wiki へのリンクを作成する仮想ペット ゲーム用の Greasemonkey スクリプトに取り組んでいます。問題は、新しいペットが常にページに追加されるため、リンクをスクリプトにハードコードすることができないことです。生き物の名前を検索して、リンクにする必要があります...

サインアップしなくても目的のページを閲覧できます。

ターゲット ページのサンプル ソース コード:

<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 の情報は NO でお願いします...今のところ、私の脳を包み込むには 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>'
    );
} );

ただし、将来切り替える必要がある場合は、どのブラウザーでも実行できます。(たとえば、IE はtextContentIE9 までサポートしていませんでした。)

于 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 に答える