如何匹配域名后首个路径段为en/fr以控制聊天插件图标显示？

嗨，我明白你的困扰！原来的正则表达式/en|fr/确实太宽泛了——只要URL里任何位置出现en或fr（比如某个参数里、页面文件名里），插件都会加载，这显然不是你想要的效果。我们需要精准匹配域名后第一个路径段是en或fr的情况，下面给你两种靠谱的解决方案：

方法一：优化正则表达式 #

我们可以写一个更精确的正则，锚定URL开头，确保en或fr紧跟在域名的斜杠后面：

const url = window.location.href;
// 精准匹配stackoverflow.com后直接跟en/fr的情况
if (url.match(/^https:\/\/stackoverflow\.com\/(en|fr)\//)) {
  // 推荐用createElement代替document.write，更安全
  const script = document.createElement('script');
  script.id = 'sb-php-init';
  script.src = 'supportboard/php/sb.php';
  document.body.appendChild(script);
}

这里的正则^https:\/\/stackoverflow\.com\/(en|fr)\//做了这些事：

• ^ 锚定URL开头，避免匹配中间位置的字符串
• 转义.（因为正则里.代表任意字符）
• 明确匹配/en/或/fr/作为路径的起始部分

方法二：使用URL API（更推荐） #

正则容易有边缘情况（比如URL带端口、哈希值时），用浏览器原生的URL对象解析路径会更可靠、可读性更高：

const currentUrl = new URL(window.location.href);
// 拆分路径，取第一个非空的路径段（域名后的第一个部分）
const firstPathSegment = currentUrl.pathname.split('/').filter(Boolean)[0];
// 判断是否是目标语言代码
if (['en', 'fr'].includes(firstPathSegment)) {
  const script = document.createElement('script');
  script.id = 'sb-php-init';
  script.src = 'supportboard/php/sb.php';
  document.body.appendChild(script);
}

这个方法的优势在于：

• 自动处理各种URL格式（比如https://stackoverflow.com/en/hello.html?foo=bar、https://stackoverflow.com/fr/#section都能正确识别）
• 代码逻辑清晰，不需要维护复杂的正则表达式

另外补充一句：尽量避免使用document.write，因为如果在页面加载完成后执行它，会覆盖整个页面内容，用createElement动态创建脚本并添加到DOM是更安全的做法。

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