How to create links from existing text in Greasemonkey?

Question

I think I'm just having too much trouble understanding how to use regex and creating links...

I'm working on a Greasemonkey script for a virtual pet game that will create links to the wiki for each creature listed on a certain page. The problem is, new pets get added to the page all the time so I can't just hardcode the links into the script. I need to search for the creatures names and then make it a link...

You can view the target page without signing up.

Sample source code from 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" and "Fluff" would be what I want to turn into links... I found this and started working on it, and it might work, except it doesn't seem to say where to start the match (in a way that makes sense to me anyways), and I have NO clue what to put in (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;

.

Could somebody maybe please try to explain how that regex works, and what would work for (The-Identifier-That-Denotes-End-Of-Text-Of-Interest) since I don't seem to see any punctuation or spaces after the creatures names?

Thanks!

(Please NO jQuery info... javascript is enough to wrap my brain around right now LOL)

score 2 · Answer 1 · edited Jan 30 '13 at 07:30

2

Short Answer: You cannot do that with regular expressions.

Why? Because there is no unique identifier or pattern for the HTML you want to replace.

You will want to do something like this instead:

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

edited Jan 30 '13 at 07:30

Brock Adams

90,639
22
233
295

answered Jan 29 '13 at 10:23

Samuel Liew

76,741
107
159
260

just one problem... tableCell.html is undefined... time to hunt... probably greasemonkey (or firefox) use something different – Kat Cox Jan 29 '13 at 11:46
Could you explain how you figured out the 'right' and the 'table'[4] please, so I know how to figure that out? – Kat Cox Jan 29 '13 at 23:04
This still had a small error. Fixed it. +1 for warning against regex and for essentially correct concept/answer. – Brock Adams Jan 30 '13 at 07:34

score 1 · Answer 2 · answered Jan 30 '13 at 07:17

Your code can be simplified to:

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

The #right div.content, in the CSS selector, helps guard against running on the wrong table/page.

The jQuery version is only a little shorter (so far):

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

But, it will run on any browser, if you should switch in the future. (For example, IE didn't support textContent until IE9.)

score 0 · Accepted Answer · answered Jan 29 '13 at 23:02

The other answer didn't work... but this did

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

How to create links from existing text in Greasemonkey?

3 Answers3

Linked