How can a Greasemonkey script split a link into three related links?

Question

I want to use Greasemonkey to link Redmine issue numbers which are displayed in cgit commit messages to their issues or projects.

The HTML source of the cgit Commit messages is like this.

<a href='/editingmodule/commit/?id=49e4a33e0f8b306ded5'>refs #459 - create separate directory and repo for editingModule, lots of dif...</a>

What I want to do is to make the #459 a separate href to the Redmine issue, but leave retain the cgit links on both sides unchanged. So the URL above is transformed into something like this:

<a href='/editingmodule/commit/?id=49e4a33e0f8b306ded5'>refs</a>
<a href='http://redmine.project.com/redmine/issues/459'>#459</a>
<a href='/editingmodule/commit/?id=49e4a33e0f8b306ded5'> - create separate directory and repo for editingModule, lots of dif...</a>

It may be hard to read but the #459 in the link above is linked to the Redmine project.

The link to the Redmine issue can also be appended to the cgit link for clarity.

Answer 1

Use jQuery to find the links, and regex to extract the key text parts.

Here is a complete working script; see the inline comments for more info:

// ==UserScript==
// @name     _Split Commit links and add Redmine 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==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

//-- Fing matching links
$("a[href*='/editingmodule/commit/']").each ( function () {
    /*-- Parse each link for the expected format:
        refs #{number} {description text}
    */
    var jThis       = $(this);
    var parseText   = jThis.text ().match (/\s*(refs)\s+\#(\d+)\s+(.+)/i);
    if (parseText  &&  parseText.length >= 4) {
        //-- Truncate original link text.
        jThis.text (parseText[1]);

        //-- Add tailing link.
        jThis.after (
            ' <a href="' + jThis.attr ("href") + '">' + parseText[3] + '</a>'
        );

        //-- Add Redmine link. Note it is inserted just after the original link.
        var issueNumber = parseInt (parseText[2], 10);
        jThis.after (
            ' <a href="http://redmine.project.com/redmine/issues/'
            + issueNumber + '">#' + issueNumber + '</a>'
        );

        //-- Style the Redmine link, if desired.
        jThis.next ().css ("background", "yellow")
    }
} );