如何用纯JS提取以msg开头的ID中的最大数字？

需求说明 #

页面中存在多个ID格式为<a id="msg{number}"></a>的元素，ID唯一且无固定顺序，需要用纯JavaScript提取去掉msg前缀后的最大数字（示例中的预期结果为87905541）。已知可通过document.querySelectorAll('[id^="msg"]')筛选目标元素，但不清楚后续实现步骤，以下是完整解决方案。

完整实现代码 #

// 获取所有ID以"msg"开头的元素
const targetElements = document.querySelectorAll('[id^="msg"]');

// 提取每个元素ID中的数字部分并转为数值
const numArray = Array.from(targetElements).map(element => {
  // 直接截取ID中"msg"之后的部分，转为数字
  return Number(element.id.slice(3));
});

// 找出数组中的最大值
const maxNum = Math.max(...numArray);

console.log(maxNum); // 输出示例结果：87905541

步骤拆解 #

• 筛选目标元素：document.querySelectorAll('[id^="msg"]')会返回一个类数组的NodeList，包含所有ID以msg开头的元素。
• 转换为数字数组：用Array.from()把NodeList转为真正的数组，再通过map()遍历每个元素。因为msg是固定3个字符，用slice(3)直接截取后续内容比replace()更高效，最后用Number()转为数值类型，得到纯数字数组。
• 计算最大值：Math.max()需要接收单个参数，用扩展运算符...把数字数组拆分成多个参数传入，就能直接得到数组中的最大值。

额外优化（可选） #

如果担心存在ID不符合msg{number}格式的情况，可以添加简单的校验，避免非数字值干扰结果：

const numArray = Array.from(targetElements).map(element => {
  const numStr = element.id.slice(3);
  // 仅保留纯数字的情况，非数字则转为0（或其他默认值）
  return /^\d+$/.test(numStr) ? Number(numStr) : 0;
});

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