1

我感到相当沮丧，因为我觉得这可能很容易/很明显，我只是没有把这些碎片放在一起。我正在尝试创建一个 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 不同）从 URL 中提取数字 3）插入新的每个链接之后的链接

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

4

3 回答 3

1 
var slash=str.lastIndexOf("/");
var number=str.slice(slash);

其中 str 是包含 url 的字符串。第一行获取字符串中最后一个 / 的位置，第二行将字符串从该 / 的索引分割到字符串的末尾，为您提供 URL 中 / 之后的所有内容

然后“数字”将是代表这些数字的变量

给表一个 ID，id="mytable"。您需要包含 jQuery 库才能使其正常工作。

$('#mytable tr').each(function() {
    var url= $(this).find("td:first").html();
    //at this point url holds the contents of the entire td

});

.. 然后您可以使用一系列“lastIndexOf”和“slice”语句来修剪 url 周围的区域以隔离您需要的信息

试试这个，

var count = 1
$('table').each(function(){
   (this).attr("id", "table"+count);
   count++;
});

这将为页面上的每个表分配一个 ID。所以第一个表的 id 为 table1，第二个表为 table2。

然后您可以使用该功能（我假设它是您想要的第二张表），

$('#table2 tr').each(function() {
    var url= $(this).find("td:first").html();
    //at this point url holds the contents of the entire td
});

并且，如上所述，使用 indexOf 和 slice 函数来隔离您的号码

于 2012-06-15T16:29:25.077 回答
1

我将假设在这里使用 jQuery 是可以的。我试图对此进行相当冗长的评论，以便让您对每一步发生的事情有一个很好的了解

// Get all <a> tags within the table and loop over them
$("table a").each( function() {
    // Get the url this <a> tag points to
    var url = $(this).attr("href");

    // Parse the id using regex (find a string of numbers following a "/"
    var userId = url.replace( /.*\/(\d+).*/, "$1" );

    // Create the new, desired, url
    var newUrl = "http://website.com/names/" + userId + "/edit/";

    // Append the new link after this <a> tag
    $(this).after( "<a href='" + newUrl + "'>" + userId + "</a>" );
} );

希望这可以帮助。如果您有任何问题，请告诉我！

于 2012-06-15T22:16:16.733 回答
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;  \
    }                                   \
' );
于 2012-06-16T00:50:43.127 回答