如何用JavaScript替换HTML文本且不刷新周边内容？

直接修改document.body.innerHTML会完全重建整个body内的DOM结构，原来元素上绑定的事件监听器、组件实例、表单状态等都会被清空，这就是导致原有功能被破坏的核心原因。

不要操作整个页面的innerHTML，而是精准定位到包含目标链接的元素，单独修改它们的src属性：

通用实现代码 #

// 遍历所有src以目标链接开头的元素
document.querySelectorAll('[src^="https://media.discordapp.net/attachments"]').forEach(element => {
  // 替换src中的域名部分
  element.src = element.src.replace('https://media.discordapp.net/attachments', 'https://cdn.discordapp.com/attachments');
});

方案优势 #

• 仅修改目标元素的属性，不会影响其他DOM节点
• 原有元素的事件绑定、组件状态、表单数据完全保留
• 执行效率远高于替换整个innerHTML

精准优化（可选） #

如果明确知道目标元素是特定类型（比如仅图片），可以缩小选择范围提升性能：

// 只处理img标签
document.querySelectorAll('img[src^="https://media.discordapp.net/attachments"]').forEach(element => {
  element.src = element.src.replace('https://media.discordapp.net/attachments', 'https://cdn.discordapp.com/attachments');
});

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