JS中如何精确替换字符串中的指定用户名？

方法一：按用户名长度从长到短替换 #

短用户名可能是长用户名的子串，先处理长用户名就能避免被后续短用户名的替换干扰。

实现步骤 #

• 将用户列表按用户名长度倒序排序
• 遍历排序后的列表，逐个替换对应用户名

代码示例 #

const text = "Hi @john.doe, i see @john has tagged you";
const users = [
  { username: "@john.doe", userId: 1 },
  { username: "@john", userId: 2 }
];

// 按用户名长度从长到短排序
const sortedUsers = [...users].sort((a, b) => b.username.length - a.username.length);

let resultText = text;
sortedUsers.forEach(user => {
  // 替换所有出现的目标用户名
  resultText = resultText.replaceAll(user.username, `${user.username}(${user.userId})`);
});

console.log(resultText);
// 输出：Hi @john.doe(1), i see @john(2) has tagged you

方法二：使用正则表达式匹配独立的用户名 #

通过正则的正向否定预查，确保匹配的用户名是独立存在的，而非其他用户名的子串。需要注意转义用户名中的正则特殊字符（比如.），避免语法错误。

代码示例 #

const text = "Hi @john.doe, i see @john has tagged you";
const users = [
  { username: "@john.doe", userId: 1 },
  { username: "@john", userId: 2 }
];

let resultText = text;
users.forEach(user => {
  // 转义用户名中的正则特殊字符
  const escapedName = user.username.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  // 构造正则：匹配完整用户名，且后面不能是字母、数字或.（避免匹配长用户名的子串）
  const matchRegex = new RegExp(escapedName + '(?!\\w|\\.)', 'g');
  resultText = resultText.replace(matchRegex, `${user.username}(${user.userId})`);
});

console.log(resultText);
// 输出：Hi @john.doe(1), i see @john(2) has tagged you

两种方法对比 #

• 方法一实现简单，无需处理正则语法，适合用户名格式固定的场景；
• 方法二更灵活，无需依赖排序，适用于复杂的字符串匹配场景，但需要注意正则特殊字符的转义。

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