使用 jQuery 从图像中剥离 pagespeed 模块扩展答案

【问题标题】：Strip pagespeed module extension from image with jQuery使用 jQuery 从图像中剥离 pagespeed 模块扩展
【发布时间】：2015-03-16 07:29:03
【问题描述】：

我的网站上有这个 jQuery 函数，它可以向图像添加 在 Facebook 上分享按钮，效果很好。

问题是，现在我已经在我的服务器上安装了 Google 的 Pagespeed 模块，以加快速度。像魅力一样工作，除了一件事：

图像现在获得了 Facebook 似乎不喜欢的 pagespeed 扩展。

所以，我正在寻找一个函数来获取图像 src（这已经到位），剥离添加的 pagespeed 扩展，然后发回“原始”图像 src。

我正在像这样获取图像 src：

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

我没有在这个函数之后去掉pagespeed扩展的函数。

google pagespeed 图片如下所示：

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

问题是，需要去掉两个部分：

700x524x 出现在图像名称之前...

...以及文件扩展名之后的所有内容 (.pagespeed.ic.9rlwkDUtDK.webp)

有没有大师可以建议我解决这个问题？

谢谢！

// 詹斯。

【问题讨论】：

标签： jquery pagespeed mod-pagespeed google-pagespeed

【解决方案1】：

您可能想要使用正则表达式来匹配您想要（和不想）保留的字符串部分，然后您可以使用反向引用来提取原始文件名。这里的文件名将在匹配组中，$1。

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

参见https://regex101.com/r/jR8fI3/1的示例

在javascript中：

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

参见http://jsfiddle.net/1afhzfxa/的示例

【讨论】：

太棒了@doublesharp！如果我还需要保留文件的路径，mysite/wp-content... 等，这可能吗？
当然，事实上，它应该可以工作。如果不是，您可能需要为路径使用另一个匹配组，然后在 replace() 中使用 $1$2。
值得注意的是，它使用“.pagespeed”来匹配插件附加内容的开头，因此如果您碰巧在文件名中有一个带有该图像的图像，它会中断。不过，您可以更具体地了解模式匹配 - 如果您不熟悉正则表达式，请务必进行一些研究，因为它非常强大。
完全可以做到！非常感谢您的帮助！