Tampermonkey script to turn text into links

Question

Another poor soul here who can't make heads or tails of text replacement in Tampermonkey/Greasemonkey. I'm dealing with a series of table rows like so:

<table class="table table-striped table-hover">
    <tr>
        [a bunch of header cells]
    </tr>
    <tr>
        <td>412</td>
        <td>An image</td>
        <td>A thing</td>
        <td>A person</td>
        <td>A place</td>
    </tr>
    <tr>
        <td>3789</td>
        <td>An image</td>
        <td>A thing</td>
        <td>A person</td>
        <td>A place</td>

What I want is to turn each of the numbers into a link of this form:

        <td><a href="https://mydomain.com/workflow/index.html?
             endrun=1&submit=Edit&record=3789">3789</a></td>

(Line break after the ? is just so it will fit on the page here; there should not be an actual line break in the URL.)

There are multiple rows in the table; each one starts with a number that I would like to linkify. On some pages on the site, the number is the third or fourth item in each row rather than the first. Each page has only one table. I don't want to change the first cell in the header row, since those cells are already clickable and used for sorting, and I don't want to linkify any of the words--just the numbers.

I looked at Most concise way to do text replacement on a web page? (using GreaseMonkey) and How to create links from existing text in Greasemonkey? and Greasemonkey: Add a link in a table and http://www.overclock.net/t/487779/help-with-greasemonkey-and-regular-expressions but I can't quite figure out how to make any of the suggested answers work for my situation. (I'm running Tampermonkey in Chrome, but hoped Greasemonkey answers might work for me.) I would humbly appreciate any help.

document.querySelectorAll("tr td:first-child").forEach(function(a){ a.innerHTML=a.textContent.link("https://mydomain.com/workflow/index.html?endrun=1&submit=Edit&record="+a.textContent.trim());}); — dandavis, Oct 28 '14 at 23:50

score 4 · Accepted Answer · answered Oct 28 '14 at 23:57

This should do it for tampermonkey.

Just need to update the namespace to the one you want it to run against. If the site already uses jQuery then you can ditch the require attribute as well.

// ==UserScript==
// @name       Updator
// @namespace  http://stackoverflow.com/
// @version    0.1
// @description  enter something useful
// @match      http://*/*
// @copyright  2012+, You
// @require http://code.jquery.com/jquery-2.1.1.min.js
// ==/UserScript==


$(document).on("ready", function() {
    
    $("table.table-striped td:first-child").each(function(e, i){
        var this$ = $(this);
        var q = this$.html()
        if (/^\d+$/ig.test(q)){
            this$.html("<a href='https://mydomain.com/workflow/index.html?endrun=1&submit=Edit&record=" + q + "' >" + q + "</a>");
        }
    });

});

Thank you, that worked perfectly! And I added a version that used td:nth-child(3) for the one page where the number is in the third column (whyyyy augh inconsistent UI will be the death of me). I've never used jquery so I really appreciate the help. — Rose Fox, Oct 29 '14 at 02:11
The syntax `$(document).on("ready", handler)` [has been removed in jQuery 3.0](https://api.jquery.com/ready/). Just say `$(function() {...});` See also [this answer](https://stackoverflow.com/a/19408123/2311167) — Adrian W, Apr 09 '20 at 13:45

tomasb · Answer 2 · 2014-10-29T12:34:13.397

0

if you don't use jQuery you can also do something like this:

    var cells = [];
    var coll1 = document.getElementsByTagName('TH');
    var coll2 = document.getElementsByTagName('TD');
    for (var i = 1; i < coll1.length; i++) {
        cells.push(coll1[i]);
    }
    for (var i = 0; i < coll2.length; i++) {
        cells.push(coll2[i]);
    }
    for (var i = 0; i < cells.length; i++) {
      var cellValue = cells[i].innerHTML;
      var number = cellValue.match(/\d+/)[0];//get first number in a cell
      cells[i].innerHTML = cellValue.replace(/\d+/, '<a href="https://mydomain.com/workflow/index.html?endrun=1&submit=Edit&record=' + number + '">' + number + '</a>');
   }

edit used your link

edited Oct 29 '14 at 12:34

answered Oct 29 '14 at 00:23

tomasb

1,663
2
22
29

Didn't work for me, I'm afraid, but thanks for the suggestion. – Rose Fox Oct 29 '14 at 02:22
Interesting before I posted I tested it and all numbers but first TH was replaced by links successfully. Had it as window.onload() function. What was the problem? – tomasb Oct 29 '14 at 12:30

Tampermonkey script to turn text into links

2 Answers2