jQuery动态使用当前域名在find()选择器中失效问题排查

这个问题我之前也碰到过！核心原因是动态拼接的域名包含CSS选择器的特殊字符，导致jQuery无法正确解析你的选择器，进而失效。

具体原因分析 #

当你静态写mywebsite时，选择器a:not([href*=mywebsite])是合法的，因为mywebsite里没有CSS选择器的特殊字符。但动态获取的window.location.hostname通常是完整域名（比如mywebsite.com），拼接后选择器会变成：

a:not([href*=mywebsite.com])

这里的.在CSS选择器语法中是类选择器的标记，浏览器会把它当成语法的一部分，而不是字符串里的普通字符，直接导致选择器语法错误，自然无法生效。另外你之前的动态代码还遗漏了闭合的括号，这也是一个小问题，但核心矛盾还是特殊字符的解析冲突。

两种可行解决方案 #

方案一：使用.filter()方法（推荐） #

这种方法完全避开CSS选择器的语法限制，逻辑更清晰，也不用处理特殊字符转义：

var $this_domain = window.location.hostname;
$div.find("a").filter(function() {
  // 过滤掉href包含当前域名的a标签，同时处理href为null的情况避免报错
  const href = $(this).attr("href");
  return href && !href.includes($this_domain);
}).attr('rel', function(i, val) { 
  // 你的自定义逻辑
  return val; 
});

方案二：转义特殊字符后拼接选择器 #

如果你坚持要用字符串拼接的方式，需要先转义域名中的CSS特殊字符（比如.、#、&等），同时给属性值加上引号保证语法合法：

// 定义CSS选择器转义函数，处理所有特殊字符
function escapeCssSelector(str) {
  return str.replace(/[!"#$%&'()*+,.\/:;<=>?@[\\\]^`{|}~]/g, '\\$&');
}

var $this_domain = escapeCssSelector(window.location.hostname);
// 给属性值加上单引号，避免语法歧义
$div.find("a:not([href*='" + $this_domain + "'])").attr('rel', function(i, val) { 
  // 你的自定义逻辑
  return val; 
});

小提示 #

实际开发中优先选择方案一，因为它不需要考虑各种特殊字符的情况，代码可读性和稳定性都更高。

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