如何使用jQuery解码转义斜杠后的图片URL？

嘿，这个问题我太熟悉了！你遇到的情况是因为这个URL里的\/是JavaScript字符串转义后的结果（通常是JSON序列化或者后端输出时产生的），而不是标准的URI编码（比如%2F这种格式）。decodeURI和decodeURIComponent专门用来解码URI编码的字符，对这种转义斜杠自然没用啦～

核心解决思路 #

我们只需要把所有的转义序列\/替换回普通的/就行，用字符串的replace方法配合正则就能搞定，jQuery里可以直接用这个逻辑，不需要额外的jQuery特定方法（毕竟字符串操作是JS原生的，但完全可以在jQuery代码里无缝使用）。

具体实现代码 #

// 假设这是你拿到的转义后的URL
var escapedImageUrl = "https:\\/\\/s3-eu-west-1.amazonaws.com\\/adido-toolbank\\/Thumbnails\\/F\\/FLV26461.JPG";

// 全局替换所有的\/为/
var decodedUrl = escapedImageUrl.replace(/\\\//g, "/");

// 如果要在jQuery里使用，比如设置图片的src属性
$('.your-image-element').attr('src', decodedUrl);

为什么这个方法有效？ #

• 正则/\\\//g里的\\用来匹配字符串里的单个反斜杠（因为反斜杠在正则里也是转义字符，所以需要两个），\/匹配后面的斜杠，g表示全局替换所有匹配项。
• 替换完成后，你就能得到正常的、可以直接使用的URL了：https://s3-eu-west-1.amazonaws.com/adido-toolbank/Thumbnails/F/FLV26461.JPG

额外场景：如果URL来自DOM属性 #

如果这个转义后的URL是存在于元素的data-*属性里，比如：

<div data-image-url="https:\/\/s3-eu-west-1.amazonaws.com\/adido-toolbank\/Thumbnails\/F\/FLV26461.JPG"></div>

那你可以这样处理：

var escapedUrl = $('div').data('image-url');
var decodedUrl = escapedUrl.replace(/\\\//g, "/");
// 后续使用decodedUrl即可

内容的提问来源于stack exchange，提问作者Samuel Gray