Question

I’m feeling fairly frustrated, because I feel like this is probably very easy/obvious and I’m just not putting the pieces together. I’m trying to create a GM script that will look at each URL in a table, extract one piece of each URL (unique for each entry), and then insert a new link that’ll appear after each entry.

Here’s an example of what the HTML would look like:

<table border="1" cellpadding="1" cellspacing="0" width="400">
<tbody>
<tr>
    <td>
        <a href="http://website.com/names/1936">joseph smith</a>
    </td>
    <td>11</td>
</tr>
<tr>
    <td>
        <a href="http://website.com/names/1756">john smith</a>
    </td>
    <td>1</td>
</tr>
<tr>
    <td>
        <a href="http://website.com/names/350466">scott smith</a>
    </td>
    <td>0</td>
</tr>
<tr>
    <td>
        <a href="http://website.com/names/789533">adam smith</a>
    </td>
    <td>6</td>
</tr>
</tbody>
</table>

I’d like, for each entry, to identify the number that comes after “/names/”, which is unique to each name and is not always the same length. Then I’d like to insert a new link after the one already there, like this:

<a href="http://website.com/names/[number]/edit">[number]</a>

For a basic example of how it would look, I’d like this (for each entry):

<tr>
    <td>
        <a href="http://website.com/names/1936">joseph smith</a> <a href="http://website.com/names/1936/edit">1936</a>
    </td>
    <td>11</td>
</tr>

Any help would be much appreciated. As I said, I feel as if I’m a bit dense, and that this should be a lot simpler than I’m making it out to be. I’ve been trying to figure it out for days, and I can’t seem to get anywhere (I’m not fully proficient at javascript yet!).

Update: for clarification, my difficulty is doing what I believe are three things:
1) identifying these specific URLs (as opposed to any other that might appear elsewhere in the table or page
2) extracting the number from the URLs
3) inserting the new link after each of these links

I don’t have the ability to change the HTML code already there, to give IDs for example.

Answer 1

Here’s a complete script that shows how to do this using jQuery, and with CSS styling to make it look better:

// ==UserScript==
// @name     _Add edit links after user links
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

//--- This next selector is highly page-specific.
var nameLinks   = $("td a[href*='names']");
nameLinks.each ( function () {
    /*---   From: <a href="http://website.com/names/1756">john smith</a>
            Make: <a href="http://website.com/names/1756/edit">Edit user 1756</a>
            (Plus some housekeeping.)
    */
    var newURL  = this.href.replace (/names\/(\d+)$/i, "names/$1/edit");
    var userNum = RegExp.$1;    // Special feature of replace().

    $(this).after (
        '<a href="' + newURL + '" class="gmEditLink">Edit user ' + userNum + '</a>'
    );
} );

GM_addStyle ( '                         \
    a.gmEditLink {                      \
        margin-left:            1em;    \
        font-size:              80%;    \
        vertical-align:         super;  \
    }                                   \
' );