javascript - 对于表中已有的每个链接，如何基于 URL 的一部分创建链接？

Question

我感到相当沮丧，因为我觉得这可能非常简单/显而易见，我只是没有把各个部分放在一起。我正在尝试创建一个 GM 脚本，它将查看表格中的每个 URL，提取每个 URL 的一部分(每个条目都是唯一的)，然后插入一个新链接，该链接将出现在每个条目。

这是 HTML 的示例:

<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>

对于每个条目，我想识别“/names/”之后的数字，每个名称都是唯一的，并且长度并不总是相同。然后我想在已有链接之后插入一个新链接，如下所示:

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

关于它的外观的基本示例，我想要这个(对于每个条目):

<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>

任何帮助将不胜感激。正如我所说，我觉得我有点笨，这应该比我想象的要简单得多。几天来我一直在努力解决这个问题，但似乎一无所获(我还没有完全精通 javascript!)。

更新:为了澄清，我的困难在于做我认为是三件事: 1) 识别这些特定的 URL(与可能出现在表格或页面其他地方的任何其他 URL 相对) 2) 从 URL 中提取数字 3) 在每个链接之后插入新链接

我无法更改已经存在的 HTML 代码，例如提供 ID。

Answer 1

这是一个完整的脚本，展示了如何使用 jQuery 执行此操作，并使用 CSS 样式使其看起来更好:

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