如何用Regex移除下拉菜单中特定位置的国家名称与括号

问题分析 #

你之前用的正则/[()A-Za-z]{45,100}/g存在两个核心问题：

• 误匹配国旗标签<span>里的类名字母（比如flag-icon-afg），导致标签被破坏
• 固定从第45位开始匹配的逻辑不严谨，不同国家的标签长度不一致，无法精准定位

正则方案（一步到位） #

使用以下正则替换，可直接保留国旗标签和国家代码，移除国家名称与括号：

// 处理单个选项HTML字符串
const originalHtml = '<span class="flag-icon flag-icon-afg"></span> Afganistan (+93)';
const targetHtml = originalHtml.replace(/(?<=<\/span>)\s*[A-Za-z\s]+\((\+\d+)\)/g, ' $1');

替换后结果：<span class="flag-icon flag-icon-afg"></span> +93

正则逻辑说明

• (?<=<\/span>)：仅匹配</span>之后的内容，避免修改国旗标签
• \s*：匹配span与国家名称之间的任意空格
• [A-Za-z\s]+：匹配完整的国家名称（包含字母和空格）
• \((\+\d+)\)：捕获括号内的国家代码（如+93）
• 替换为 $1：保留空格+捕获到的国家代码，剔除名称和括号

更稳妥的DOM操作方案 #

如果是在前端页面中直接操作DOM，推荐用文本提取的方式，避免正则误改HTML：

// 假设下拉选项的类名为country-option
document.querySelectorAll('.country-option').forEach(option => {
  const flagSpan = option.querySelector('.flag-icon');
  const textContent = option.textContent;
  // 提取国家代码（+开头的数字串）
  const code = textContent.match(/\+\d+/)[0];
  // 重新组装选项内容
  option.innerHTML = flagSpan.outerHTML + ' ' + code;
});

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