如何高效批量按规则修改HTML元素ID？

一、批量修改现有格式的ID（如H1_b→H2_b递增） #

直接用原生JS就能实现，核心逻辑是选中目标元素后，提取原有ID里的数字部分，递增后重新拼接赋值：

// 选中所有ID匹配「H+数字+_b」格式的元素
const targetElements = document.querySelectorAll('[id^="H"][id$="_b"]');

targetElements.forEach(el => {
  // 用正则提取ID中的数字
  const numMatch = el.id.match(/H(\d+)_b/);
  if (numMatch) {
    const currentNumber = parseInt(numMatch[1], 10);
    // 数字递增1后重新设置ID
    el.id = `H${currentNumber + 1}_b`;
  }
});

二、给无ID元素按规则生成ID #

如果是要给一批没有ID的元素生成连续编号的ID（比如给所有target-class类元素生成H1_b、H2_b...）：

const elements = document.querySelectorAll('.target-class');

elements.forEach((el, index) => {
  // index是0起始，加1让编号从1开始
  el.id = `H${index + 1}_b`;
});

三、自定义规则的复用函数 #

如果需要适配不同的前缀、后缀或起始编号，可以封装成函数，方便重复调用：

function batchGenerateIds(selector, prefix = 'H', suffix = '_b', startNum = 1) {
  const elements = document.querySelectorAll(selector);
  elements.forEach((el, index) => {
    el.id = `${prefix}${startNum + index}${suffix}`;
  });
}

// 调用示例：给所有p标签生成P1_content、P2_content...
batchGenerateIds('p', 'P', '_content', 1);

注意事项 #

• 执行时机：务必在DOM加载完成后运行代码，可将代码放在DOMContentLoaded事件回调中，或者直接放在</body>标签前。
• 唯一性检查：生成ID前要确保不会和页面现有ID重复，必要时可以先清空目标元素的原有ID。
• 正则适配：如果原有ID格式更复杂，需要调整正则表达式来精准提取数字部分，避免匹配错误。

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