使用JavaScript或jQuery替换元素ID及关联属性值

核心思路 #

先记录每个元素的旧ID，生成新ID后，不仅修改元素自身的ID，还要遍历所有元素的所有属性，找到属性值等于旧ID的项同步替换为新ID。

完整代码示例 #

jQuery代码

$('div[id]').each(function() {
  const $element = $(this);
  const oldId = $element.attr('id');
  // 生成带随机数的新ID，可按需调整规则
  const newId = `newValueWithRandomNumber_${Math.floor(Math.random() * 1000)}`;

  // 修改元素自身ID
  $element.attr('id', newId);

  // 遍历所有元素，批量替换引用旧ID的属性值
  $('*').each(function() {
    const $current = $(this);
    const attributes = this.attributes;
    for(let i = 0; i < attributes.length; i++) {
      const attr = attributes[i];
      if(attr.value === oldId) {
        $current.attr(attr.name, newId);
      }
    }
  });
});

对应HTML示例

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example1"> 这里的ID可以轻松修改 </div>

<div id="example2"> 需要动态找到所有引用该ID的地方并修改 </div>
<div data-bs-target="example2"> 按钮 </div>
<div data-custom="example2"> 按钮 </div>
<div any-attr="example2"> 按钮 </div>

注意事项 #

• 若页面元素过多，全量遍历所有元素会影响性能，可缩小遍历范围（比如只遍历带data-*属性的元素，或指定DOM区域内的元素）。
• 如果属性值是包含旧ID的字符串（比如#example2这类带井号的选择器），可调整判断逻辑：

  if(attr.value.includes(oldId)) {
    const updatedValue = attr.value.replace(oldId, newId);
    $current.attr(attr.name, updatedValue);
  }
  

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