如何根据URL或html lang属性动态切换电话号码输入掩码

你可以按照「优先匹配URL路径、lang属性兜底」的逻辑改造原有代码，具体实现如下：

核心实现逻辑 #

• 先初始化掩码映射表，统一维护不同语言/路径对应的掩码规则，后续调整规则只需要改映射表即可
• 读取当前页面URL路径，优先匹配路径规则，命中则直接使用对应掩码
• 若路径未命中规则，则读取<html>标签的lang属性值做兜底匹配
• 拿到最终生效的掩码后，遍历所有type=tel的输入框绑定掩码插件

完整修改后代码 #

// 定义掩码匹配规则
const maskRules = {
  en: '000-000-000-000',
  uk: '+38 (000) 000-00-00',
  ru: '+38 (000) 000-00-00'
}

// 获取当前生效的语言标识
let activeLang = ''
const currentPath = window.location.pathname
// 优先匹配URL路径
if (currentPath.includes('/en/')) {
  activeLang = 'en'
} else if (currentPath.includes('/uk/')) {
  activeLang = 'uk'
} else if (currentPath.includes('/ru/')) {
  activeLang = 'ru'
} else {
  // 路径未命中时，读取html标签lang属性兜底
  const htmlLang = document.documentElement.getAttribute('lang') || ''
  // 提取lang属性的基础语言段，兼容en-US、uk-UA这类带地区的标准写法
  activeLang = htmlLang.split('-')[0]
}

// 拿到对应掩码，未匹配到规则时默认用乌克兰地区掩码，避免空值
const activeMask = maskRules[activeLang] || maskRules.uk

// 给所有电话输入框绑定对应掩码
const telInputs = $('input[type=tel]')
$.each(telInputs, function() {
  $(this).mask(activeMask)
})

补充说明 #

• 代码默认URL路径优先级高于lang属性，如果需要把lang属性作为第一判断依据，只需要把路径检测和lang属性读取的代码块调换顺序即可
• 兜底逻辑可以根据自身业务调整，比如需要默认用英文掩码，把兜底值改成maskRules.en就行

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