Using JavaScript in Browser's Bookmarklet to Edit the URL with Regex

Question

So I know it's possible to run JavaScript by storing them in the browser's bookmark (aka. bookmarklet), but I'm not sure if it's possible to use bookmarklet to auto-edit the current URL (and then bring you to the new URL).

What I'm trying to do:

In the URL, replace everything before (and including) the string

/image/thumb/

with

https://a1.mzstatic.com/us/r1000/0/

and remove everything after (and including) the last

So for example, the following URL:

https://is2-ssl.mzstatic.com/image/thumb/Music/v4/4e/61/09/4e610911-7e0e-d348-8246-11ef6ffe00ab/886443607118.jpg/540x540bb.webp

should become (and redirect to)

https://a1.mzstatic.com/us/r1000/0/Music/v4/4e/61/09/4e610911-7e0e-d348-8246-11ef6ffe00ab/886443607118.jpg

after clicking on the bookmark with JavaScript.

Some more examples:

https://is2-ssl.mzstatic.com/image/thumb/Features122/v4/b0/26/80/b0268001-9527-3477-1df2-c68f02271a9f/ffe8be4a-2798-4a68-b691-9a91edb1c177.png/216x216sr.webp

should become (and redirect to)

https://a1.mzstatic.com/us/r1000/0/Features122/v4/b0/26/80/b0268001-9527-3477-1df2-c68f02271a9f/ffe8be4a-2798-4a68-b691-9a91edb1c177.png

https://is4-ssl.mzstatic.com/image/thumb/Video124/v4/ac/c2/b0/acc2b0a3-8105-2f22-2b0d-ea274223e959/Jobe81235fa-44f7-43f8-a7d6-421093c13e0b-110141253-PreviewImage_preview_image_nonvideo_sdr-Time1616098999993.png/300x300.jpg

should become (and redirect to)

https://a1.mzstatic.com/us/r1000/0/Video124/v4/ac/c2/b0/acc2b0a3-8105-2f22-2b0d-ea274223e959/Jobe81235fa-44f7-43f8-a7d6-421093c13e0b-110141253-PreviewImage_preview_image_nonvideo_sdr-Time1616098999993.png

Taurz · Accepted Answer · 2022-05-26T10:43:50.577

0

Use String.prototype.match(regExp) to get the url part which you want and then combine the url part with your url prefix.

function replaceUrl(url) {
   const prefix = 'https://a1.mzstatic.com/us/r1000/0';
   const lastPart = url.split("/image/thumb/")[1];
   const match = lastPart ? lastPart.slice(0, lastPart.lastIndexOf("/")) : null;
   const targetUrl = match ? `${prefix}/${match}` : url;
   return targetUrl;
}
const targetUrl = replaceUrl('https://is2-ssl.mzstatic.com/image/thumb/Music/v4/4e/61/09/4e610911-7e0e-d348-8246-11ef6ffe00ab/886443607118.jpg/540x540bb.webp');

Add a bookmarklet, the bookmarklet's script is like:

javascript:(function(){
  function replaceUrl(url) {
   const prefix = 'https://a1.mzstatic.com/us/r1000/0';
   const lastPart = url.split("/image/thumb/")[1];
   const match = lastPart ? lastPart.slice(0, lastPart.lastIndexOf("/")) : null;
   const targetUrl = match ? `${prefix}/${match}` : url;
    return targetUrl;
 }
 const targetUrl = replaceUrl(location.href);
 window.open(targetUrl,"_blank");
})()

The location.href is the url of current tab, you can change it to whatever you need (may be url from links of current page etc.). the second parameter of window.open() could be _blank(open in a new tab) or _self(open in current tab)

edited May 26 '22 at 10:43

answered May 24 '22 at 09:55

Taurz

388
2
6

But how do I incorporate that into a browser's bookmark to make it retrieve and change the URL? – Wonderer May 24 '22 at 10:25
It's not possible in my opinion. Bookmark is a browser tool, there's no way to control it by javascript. but you can configure your server to redirect current url to new url. – Taurz May 24 '22 at 10:38
It's certainlly possible and it's known as Bookmarklets: https://www.freecodecamp.org/news/what-are-bookmarklets/ I even have one working in my Bookmark. I just couldn't figure out how to do the things I described. – Wonderer May 24 '22 at 10:59
i'm confused. you want to add a bookmarklet yourself or provide such an 'adding bookmarklet' way to users? The bookmarklet must be added manually and one bookmarketlet goes to one url , because when you click the bookmarklet, how do you know the origin url? you must write the origin url precisely in your javascript codes. besides, there's no programmable way to add a bookmarklet – Taurz May 25 '22 at 08:22
I was trying to add a bookmarlet myself, for example, the following bookmarklet removes the toolbar from Youtube videos: javascript:(function(){var goaway=".ytp-gradient-bottom,.ytp-gradient-top,.ytp-chrome-top,.ytp-chrome-bottom{display:none;}";if("\v"=="v"){document.createStyleSheet().cssText=goaway}else{var tag=document.createElement("style");tag.type="text/css";document.getElementsByTagName("head")[0].appendChild(tag);tag[(typeof document.body.style.WebkitAppearance=="string")?"innerText":"innerHTML"]=goaway}})(); The above bookmarklet doesn't need to contain any URL to work – Wonderer May 25 '22 at 23:33
1

ok, that makes sense,i've edited my answer,hope it helps – Taurz May 26 '22 at 01:23
Thanks, but it looks like your script was written before I edited the part about what strings to replace/remove (my original idea about replace/remove was flawed). Could you see if you could edit your script accordingly? (The first two examples indeed work with your current script, but I've added a 3rd example in the last part, which is an exception that doesn't work with your current script. You can probably see why my original idea was flawed from that example.) – Wonderer May 26 '22 at 08:34
change `reg` to `/\/(Music|Features).*\.(jpg|png)/`, if you know all the prefixes and picture formats, you can extend the regexp like `(Music|Features|someOtherPrefix...)` and `(jpg|png|someOtherFormat...)` – Taurz May 26 '22 at 08:49
That doesn't work when the original URL also ends with .jpg or .png (it also might not even be an image, so using .jpg or .png might not always work). The "Prefix" can be many various things besides "Music" or "Features", so it's hard to include all of them. (Please see another last example I just added.) That's why I figured out using "/image/thumb/" and "last /" (as described in the Question) is the best idea that works with everything. – Wonderer May 26 '22 at 09:45
The new way of converting worked like a charm, thanks so much – Wonderer May 26 '22 at 11:32

Using JavaScript in Browser's Bookmarklet to Edit the URL with Regex

1 Answers1