jQuery获取div背景图URL代码在Safari中报错，求原因解析

我来帮你拆解下这个问题——其实核心是Safari对CSS background-image 属性的解析逻辑和Chrome、Firefox这些浏览器有细微差别，才导致你的代码触发了「无法对undefined执行split」的错误，具体原因有两个：

• 引号格式差异：Chrome、Firefox这类浏览器通常会返回带双引号的格式，比如 url("xxx.jpg")，但Safari在解析时可能会省略引号，直接返回 url(xxx.jpg)。这时候你用 split('url("') 去分割，根本匹配不到对应的字符串，得到的数组第二个元素就是undefined，再调用split('")')自然就报错了。
• 无背景图时的返回值不同：如果目标元素没有设置背景图，Safari会直接返回none，而不是空字符串或者其他格式。这时候你的split('url("')同样会得到一个只有一个元素的数组，[1]索引对应的就是undefined，同样会触发错误。

修复方案：用正则表达式做更健壮的匹配 #

比起依赖固定格式的split拆分，用正则表达式能兼容各种浏览器的解析结果，不管带不带引号都能正确提取URL：

// 先获取背景图属性值
var bgImage = $('.image').css('background-image');
var targetUrl = '';
// 用正则匹配带/不带单双引号的url格式
var urlMatch = bgImage.match(/url\(["']?(.*?)["']?\)/);
// 判断匹配结果是否存在，避免无背景图时出错
if (urlMatch && urlMatch[1]) {
    targetUrl = urlMatch[1];
}

这个正则表达式/url\(["']?(.*?)["']?\)/的作用是：

• 匹配url(开头的内容
• ["']?表示单引号或双引号是可选的（可能有，也可能没有）
• (.*?)捕获URL的核心内容（非贪婪匹配，避免多匹配字符）
• 最后匹配)结尾

这样不管Safari返回带引号还是不带引号的格式，甚至其他浏览器的格式，都能准确提取到背景图的URL，同时还能处理无背景图的情况，避免报错。

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