Search code examples
jquerypagespeedmod-pagespeedgoogle-pagespeed

Strip pagespeed module extension from image with jQuery

I have this jQuery function on my site that adds a share on Facebook button to images, which have worked great.

Problem is, now I have installed Google's Pagespeed Module on my server, to make things a little faster. Works like a charm, except for one thing:

Images now get the pagespeed extension, which Facebook doesn't seem to like.

So, what I'm looking for is a function to get the image src (this is already in place), strip the added pagespeed extensions, and send back the "original" image src.

I'm fetching the image src like this:

img = $(this).attr('src');

What I don't have is a function to strip the pagespeed extension after this function.

The google pagespeed images look's like this:

http://my-site.com/wp-content/uploads/700x524ximagename700x524.jpg.pagespeed.ic.9rlwkDUtDK.webp

The problem is, there are two parts needed to be stripped out:

700x524x that appears before the image name...

...and everything after the file extension (.pagespeed.ic.9rlwkDUtDK.webp)

Is there some guru out there that can suggest me a solution to this problem perhaps?

Thanks!

// Jens.

Solution

  • You probably want to use a regular expression to match the parts of the string you do (and don't) want to keep, and then you can use a backreference to extract the original file name. The filename here will be in the matched group, $1.

    \d*x\d*x(.*)\.pagespeed.*

    See example at https://regex101.com/r/jR8fI3/1

    In javascript:

    var image = "700x524ximagename700x524.jpg.pagespeed.ic.9rlwkDUtDK.webp";
var original = image.replace(/\d*x\d*x(.*)\.pagespeed.*/, "$1");
alert(original);

    See example at http://jsfiddle.net/1afhzfxa/