Script to remove part of img href on a site

Question

I fired up a game guide on PrimaGames.com. The text is all fine but the images have busted src. Here's an example:

<img src="/media/files/eguide_assets/final-fantasy-xii-the-zodiac-age-eguide/085-105_walkthrough-web-resources/image/wi01.png/PRIMAP/resize/700x-1>">

At the end of the src URL, you'll notice this odd string:
/PRIMAP/resize/700x-1>

I'm looking to set up a script (Stylish, Tampermonkey, etc) I can apply to PrimaGames.com so that it auto-removes that part of the src URL, which will in turn display the associated image.

mplungjan · Answer 1 · 2019-06-02T08:36:14.090

2

Bookmarklet?

javascript:(function() { [...document.images].forEach(img => { 
  const src = img.src.split("/PRIMAP"); 
  if (src.length >=2) img.src=src[0]; })})()

Alternative for unknown stuff after the file extension - here assuming you are only interested in pngs

javascript:(function() { [...document.images].forEach(img => { 
  const end = img.src.lastIndexOf(".png/");
  if (end) img.src=img.src.substring(0,end+4); })})()

edited Jun 02 '19 at 08:36

answered Jun 02 '19 at 05:26

mplungjan

169,008
28
173
236

I tried this out and it worked nicely as a Bookmarklet! Thanks for the idea! – AnghellicKarma Jun 02 '19 at 06:55

score 1 · Accepted Answer · answered Jun 02 '19 at 05:51

This is a fairly standard src rewrite task.

Here's a complete Tampermonkey / Violentmonkey script that should work on that site for both static and dynamic images:

// ==UserScript==
// @name     _Remove post file junk from image sources
// @match    *://primagames.com/*
// @noframes
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
// @grant    none
//- The @grant directives are needed to restore the proper sandbox.
/* global waitForKeyElements */

waitForKeyElements ("img", fixImgSource);

function fixImgSource (jNode) {
    var oldSrc = jNode.attr ("src");
    //-- Does the src have junk after the file suffix?
    if (/\.(png|jpg|gif)./i.test (oldSrc) ) {
        let newSrc = oldSrc.replace (/\.(png|jpg|gif).+$/i, ".$1");
        jNode.attr ("src", newSrc);
    }
}

Thank you! This worked beautifully in Tampermonkey! – AnghellicKarma Jun 02 '19 at 06:54 — AnghellicKarma, Jun 02 '19 at 06:54

score 0 · Answer 3 · answered Jun 02 '19 at 05:33

You will need to find the index where the actual image ends and create a substring up to that index.

function removeTag(image) {
    var src = image.src.toString();
    var imgFormats = ['jpg', 'jpeg', 'gif', 'png'];
    var idx;
    imgFormats.forEach(fmt => {
        if (src.lastIndexOf(fmt) > -1) {
            idx = src.lastIndexOf(fmt) + fmt.length;
        }
    })
    if (typeof idx !== 'undefined') {
        image.src = src.substr(0, idx + 1);
    }
}

If you know that every extra string will start with '/PRIMAP', then you can use the solution provided by above.

This is unnecessary `image.src.toString();` and `typeof idx !== 'undefined'` is also overkill. `if (idx)` is enough. I do not see how this answers the question in any elegant way. — mplungjan, Jun 02 '19 at 07:50

Nitin Sharma · Answer 4 · 2019-06-02T08:17:11.677

0

You just need to execute below code, Here I am just replave image src with image url, after replacing src

(function(){
  var a = document.getElementsByTagName('img');
  for(e of a){
    let t = e.src;
    e.src = t.replace(/(http|https|file:\/\/)?(\/.*\.(?:png|jpg))(.*)/i, '$2');
}
}())

Here I am changing:

/media/files/eguide_assets/final-fantasy-xii-the-zodiac-age-eguide/085-105_walkthrough-web-resources/image/wi01.png/PRIMAP/resize/700x-1%3E

to

/media/files/eguide_assets/final-fantasy-xii-the-zodiac-age-eguide/085-105_walkthrough-web-resources/image/wi01.png

Then url taking File from relative path that is why I am using file path,

If this image in you relative folder then you will get image, Else you need to add base url with the relative path

as https://primagames.com/ then relative path mean code will change to :

(function(){
      var a = document.getElementsByTagName('img');
      for(e of a){
        let t = e.src;
        e.src = `https://primagames.com${t.replace(/(http|https|file:\/\/)?(\/.*\.(?:png|jpg))(.*)/i, '$2')}`;
    }
    }());

It will work for you.

For Only remove extra stuff from image url, that is "/PRIMAP/resize/700x-1%3E", You can do below code

(function(){
    var a = document.getElementsByTagName('img');
    for(e of a){
       let t = e.src;
       e.src = t.replace(/([\w-]+\.(jpg|png|txt))(.*)/i, '$1');
    }
}())

edited Jun 02 '19 at 08:17

answered Jun 02 '19 at 07:55

Nitin Sharma

419
3
12

Why? Why the complex regex removing and adding stuff when all he wants is to remove what is after the image url. Your regex makes no sense to me – mplungjan Jun 02 '19 at 07:57
I am just doing this for getting extact url of image, Here I having taking only image relative url, If the image is not in there folder then he can add base url with the relative path, and extra part already remove because I am not taking $3 here, So whats the issue in it. – Nitin Sharma Jun 02 '19 at 08:02
Because I don't the image in there project or taking from external resource that's the main reason doing this. – Nitin Sharma Jun 02 '19 at 08:04
Please review last code, That is remove only image url extra part. – Nitin Sharma Jun 02 '19 at 08:19
You was doing code for split url using "PRIMAP", give word not for any word, So that will not work if there are something other word. – Nitin Sharma Jun 02 '19 at 08:22
It’s unreadable and unnecessary to have http:file etc to just remove something – mplungjan Jun 02 '19 at 08:32
I have given that because, when i am executing code, thr image are system taking iage from file:///media and so on, that is why i have add thia in regex to remove protocol and change it with required protocol. – Nitin Sharma Jun 02 '19 at 09:18

Script to remove part of img href on a site

4 Answers4