One approach is the following:
// here we use the Arrow syntax form of an Immediately-Invoked Function
// Expression ('IIFE'); this function is encountered and then immediately
// invoked by the browser:
// (function(){ /*...code...*/ })() or
// (()=>{ /*...code...*/})()
(() => {
// using document.querySelectorAll('a') to retrieve a NodeList
// of all <a> elements in the document, and passing that
// NodeList to Array.from() in order to use Array methods
// on the discovered Nodes:
let links = Array.from(document.querySelectorAll('a')),
// the new path we want to create:
newPath = '/xyz/Ticketnumber.jspx';
// here we filter the links Array, again using an Arrow function:
links.filter(
// the first argument of the Array.prototype.filter() method
// is always a reference to the current array-element of the
// Array (here it's named 'anchor'); and this is passed into
// the function:
(anchor) => {
// if the anchor.hostname is exactly-equal to the supplied
// String:
if (anchor.hostname === 'companysachinperf.com') {
// we update/set the 'data-oldhref' attribute of the
// current <a> element to the current value of the href
// attribute (this is for demonstration purposes in the
// demo, and is irrelevant to the performance/functionality;
// it can be removed:
anchor.dataset.oldhref = anchor.href;
// we update the <a> element's hostname property to the
// value of the supplied String:
anchor.hostname = 'oldwebe.company.com';
// we update the path to the new path:
anchor.pathname = newPath;
}
})
// here we close the function statement, the parentheses that follow
// the function (the '()') can contain any arguments you wish to supply
// and those arguments will be available to the function; however they
// would need to be declared within the opening parentheses of the
// Arrow function:
/* ((argumentA,argumentB) => {
...code...
})(document.body,somethingElse);
*/
})();
(() => {
let links = Array.from(document.querySelectorAll('a')),
newPath = '/xyz/Ticketnumber.jspx';
links.filter(
(anchor) => {
if (anchor.hostname === 'companysachinperf.com') {
anchor.dataset.oldhref = anchor.href;
anchor.hostname = 'oldwebe.company.com';
anchor.pathname = newPath;
}
})
})();
/*
irrelevant to the functionality and for demo purposes only:
*/
a::before {
content: attr(href);
}
a::after {
display: block;
content: '\A(Used to be: ' attr(data-oldhref) ')';
}
<a href="https://companysachinperf.com/newweb/TicketDetnumber.jspx?tNumber=7-12345" data-oldhref=""></a>
JS Fiddle demo.
To wrap the functionality into a Tampermonkey script, from my own installation of Tampermonkey:
// ==UserScript==
// @name Modifying links
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Modifying links from one hostname to another
// @author David Thomas: https://stackoverflow.com/a/53693814/82548
// @match https://companysachinperf.com
// @grant none
// ==/UserScript==
(function() {
'use strict';
(() => {
let links = Array.from(document.querySelectorAll('a')),
newPath = '/xyz/Ticketnumber.jspx';
links.filter(
(anchor) => {
if (anchor.hostname === 'companysachinperf.com') {
anchor.dataset.oldhref = anchor.href;
anchor.hostname = 'oldwebe.company.com';
anchor.pathname = newPath;
}
})
})();
})();
From your comment below the question:
How to adapt the code that you provided to be flexible for any ticket number. Currently it is hardcoded for 7-12345. ...How to put all the html+css+js code all in [Tampermonkey]?
No, you're mistaken, while there is only one <a> element in the demo if you look at the code the ticket number, the tNumber=12345 is absolutely not modified or encoded in any way except in the <a> element's href attribute; the supplied code – assuming that link format matches your description – will work with any ticket number, since it will remain unchanged by the script.
As for adding the HTML to Tampermonkey: you don't need to; the Tampermonkey script operates on the HTML it finds in the relevant pages (which you determine using the // @match http://*/* line in the Tampermonkey script).
As for adding CSS to a page using Tampermonkey, that's easy enough, for example:
// ==UserScript==
// @name Adding Style demo
// @namespace http://tampermonkey.net/
// @version 0.1
// @description try to take over the world with garish color choices
// @author David Thomas: https://stackoverflow.com/a/53693814/82548
// @match https://stackoverflow.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// create a <style> element:
let style = document.createElement('style'),
// find the <head> element:
head = document.querySelector('head'),
// define a CSS Selector:
importantElements = 'h1 > a',
// define a CSS property-value (note that
// using '!important' - which ordinarily
// shouldn't be used is used here because
// I couldn't be bothered to increase the
// specificity of the 'importantElement'
// selector):
importantColor = '#f00 !important';
// assign an id to the created <style> element:
style.id = 'TampermonkeyInsertedStyleElement';
// update the text-content of the <style> element
// using a template literal (delimited by backticks),
// in which newlines don't require escaping and in which
// JavaScript variables can be interpolated:
style.textContent = `
body { background-color: #f908; }
${importantElements} {color: ${importantColor};}`;
// appending the created <style> element to the <head>:
head.appendChild(style);
})();
References:
Bibliography:
