What is the method for a Greasemonkey script to divide a link into three interconnected links?

My goal is to use Greasemonkey to link Redmine issue numbers found in cgit commit messages to their respective issues or projects.

The cgit commit message HTML source looks like this:

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

What I aim to achieve is to turn the #459 into a separate hyperlink leading to the Redmine issue, while keeping the cgit links intact on either side. This means transforming the URL above to:

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

Although it may seem complicated, the #459 in the link above is now connected to the Redmine project.

For clarity, the Redmine issue link can also be added to the cgit link.

javascripthyperlinkgreasemonkeyredminecgit

Answer №1

Utilize jQuery for locating the links, and regex for extracting specific text segments.

Below is a functional script; refer to the comments within for additional details:

// ==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 necessary to address a change in design
    implemented in GM 1.0. It reinstates the sandbox environment.
*/

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

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

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

        //-- Customize the style of the Redmine link, if preferred.
        jThis.next ().css ("background", "yellow")
    }
} );

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement an AppBar that fades in and out when scrolling within a div?

I'm trying to implement a Scrollable AppBar that hides on scroll down and reappears when scrolling up. Check out this image for reference To achieve this functionality, I am following the guidelines provided by Material-UI documentation export defa ...

javascriptcssreactjsmaterial-ui

When you click on a list of links, a stylish image gallery will appear using fancybox

Can anyone lend a hand with this? I would greatly appreciate any assistance CSS <a id="fancybox" href="javascript:;">Gallery 1</a> <br /> <a id="fancybox" href="javascript:;">Gallery 2</a> <br /> <a id="fancybox" hr ...

phpjavascriptjqueryfancybox

Determining which data is retrieved from a database based on a specific field using Sequelize and MySQL

I'm looking to retrieve the most recent records from a database, organized by category. My goal is to fetch 20 records, with 5 of the latest posts in each category. I want to ensure that the result consists of 20 total records, evenly distributed amon ...

javascriptmysqlnode.jsexpresssequelize.js

How can I prevent users from selecting text when they right click using JavaScript?

My custom context menu on canvas works well, but I'm facing an issue with Text elements. When I try to right-click on a text element, it triggers text selection as if double-clicking. I attempted to use the following code: document.addEventListener(& ...

javascripthtml5-canvasmouseevent

Managing spinners in Protractor when they are concealed by a wrapper element

While writing a test for an Angular app using Protractor, I encountered several issues with handling spinners. I managed to solve some of them, but I'm unsure how to test spinners that are hidden by a wrapper. For instance, when the parent tag has ng- ...

javascriptangularjsseleniumprotractore2e-testing

How to extract and compare elements from an array using Typescript in Angular 6

I have created a new Angular component with the following code: import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { HttpClient } from '@angular/common/http'; @Compone ...

javascriptarraysangulartypescript

JavaScript functions are not being triggered when the submit button is clicked

I am facing an issue where the form buttons are not triggering functions in my React application. The post request is being made using Axios. Could this be related to the structure of my components? Or perhaps it has something to do with file naming conven ...

javascriptreactjsfunctionnext.jsaxios

Encountering an unexpected error: receiving a void element tag as input in React

Any ideas on how to resolve the following error message: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML` Check out my code snippet below: import "./styles.css"; export default function App() { re ...

javascriptreactjs

Ways to access information and functions from another component

Creating a timer dashboard where alarms can change the background color of the timer. Looking to display the timer on a different page with the set background color from the dashboard, but struggling to pass data between components successfully. http ...

javascriptreactjsvue.js

Tips for adjusting the dimensions of my chart using JavaScript or Jquery

Utilizing DevExtreme widgets for the creation of a line chart in jQuery as shown below: var dataSource = [{"Date Range": "August-2018", Benelux: 194, Czech_Slovakia: 128, ...

javascriptjquerycsschartsdevextreme

Acquire information from a Card using Oracle Apex

I have a Card Regions that showcases some of my tables. I'd like each card to redirect to a specific page based on a number (the "page_table" number corresponds to the page it will redirect to). Below is the Query for the Cards Region: SELECT table_n ...

javascriptjqueryplsqloracle-apex

The issue with text color not displaying properly within a Material-UI Theme

While designing a color theme using Material-UI, I specified the contrast text as white (#fff). Surprisingly, it seems to work for buttons with the primary color but not for those with the secondary color. I attempted overrides following the suggestions p ...

javascriptreactjsmaterial-ui

Do not open iframe links in a new window

Is it possible to manipulate the iframe so that links open inside the iframe window? I want the links clicked within the iframe to stay within the same window instead of opening in a new one. However, I have too many links to individually edit their code ...

javascripthtmliframe

Tips on revealing concealed information when creating a printable format of an HTML document

I need to find a way to transform an HTML table into a PDF using JavaScript or jQuery. The challenge I'm facing is that the table contains hidden rows in the HTML, and I want these hidden rows to also appear in the generated PDF. Currently, when I co ...

javascripthtmljquerycss

What could be the reason why my AJAX error is not displaying the exception from my Webmethod?

I am currently utilizing Google Chrome for my work tasks. After referring to , I attempted to throw an exception from a webmethod. However, no output is shown in the console.log. The only information I received is a generic error message from the network ...

javascriptjqueryajaxentity-framework

Creating Dynamic Components in ReactJS with Conditional Rendering

Currently, I'm using an if-else statement to show different content based on whether Firestore is ready and the user is logged in. However, I am facing an issue where the firebase.auth.uid is returning as undefined even though it is correctly connecte ...

javascriptreactjsfirebase

A helpful tip for creating line breaks within a Vue JS v-for loop using CSS

I am looking to arrange the names in alphabetical order when a list item is clicked. My tools of choice are Vue.js and Flex Grid. The list item I am working with is called ListAll, When clicking on ListAll, I want to display all the records grouped by na ...

javascriptcssvue.jsvuejs2flexboxgrid

Remove a specific item from a MongoDB Collection using its ID

I have a MongoDB collection named "Members" which stores data for each member including first name, last name, and an autogenerated Object ID. I am able to retrieve the data using ExpressJS and display it with VueJS. While my get and post methods are worki ...

javascriptmongodbexpressvue.jscollections

How can I optimize my Javascript applications for better search engine rankings?

Recently, I've been exploring the idea of implementing a fresh workflow process for web development. Yemoan, Grunt, and Bower in conjunction with AngularJS look promising as a solution for front-end development. However, one major drawback is their po ...

javascriptangularjsgruntjsyeoman

Rearrange object based on several criteria - JavaScript

var numbers = { "value": [{ "num1": 1, "num2": 10 }, { "num1": 15, "num2": 13 }, { "num1": 26, "num2": 24 }, { "num1": 6, "num2": 25 }, { "num1": 15, "num2": 20 ...

javascriptsorting