Question

我感到相当沮丧，因为我觉得这可能很容易/很明显，我只是不把这些碎片放在一起。我正在尝试创建一个GM脚本，它将查看表中的每个URL，提取每个URL的一个部分（每个条目都是唯一的），然后插入一个 new 链接每个条目。

以下是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

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

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

“number”将是表示这些数字的变量

给表一个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”语句来修剪网址周围的区域以隔离您需要的信息

试试这个，

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函数来隔离您的数字

Answer 2

我将假设在这里使用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>" );
} );

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

Answer 3

这是一个完整的脚本，显示如何使用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;  \
    }                                   \
' );

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

3 个答案: