如何使用JavaScript替换HTML中div标签内的指定文本内容

方案1：文本节点遍历替换（优先推荐） #

该方案仅修改div内的纯文本节点，不会改动原有DOM结构、不会导致子元素绑定的事件失效，兼容性和稳定性更好。
示例HTML结构：

<!-- 你的目标div -->
<div class="content">
  其他固定内容
  <span>嵌套的子元素内容</span>
  My text here
</div>

实现代码：

// 封装通用替换函数
function replaceSpecifiedText(divSelector, oldStr, newStr) {
  // 获取目标div元素
  const targetDiv = document.querySelector(divSelector);
  if (!targetDiv) return;
  // 遍历div下所有子节点
  targetDiv.childNodes.forEach(node => {
    // 仅处理文本类型节点
    if (node.nodeType === Node.TEXT_NODE) {
      node.textContent = node.textContent.replaceAll(oldStr, newStr);
    }
  })
}

// 调用示例：将.content div内的"My text here"替换为"新的自定义文本"
replaceSpecifiedText('.content', 'My text here', '新的自定义文本');

方案2：innerHTML快速替换（仅适合静态DOM场景） #

如果目标div是纯静态内容，没有绑定任何事件监听，可以用更简单的写法，缺点是会重绘整个div内部结构，原有绑定的事件会全部失效。
实现代码：

const targetDiv = document.querySelector('.content');
if (targetDiv) {
  targetDiv.innerHTML = targetDiv.innerHTML.replaceAll('My text here', '新的自定义文本');
}

补充说明 #

• 如果需要全局匹配不区分大小写的内容，可将replaceAll('My text here', newStr)替换为replace(/my text here/gi, newStr)，其中i代表忽略大小写，g代表匹配所有符合条件的内容。
• 如果需要批量修改多个div的内容，可将querySelector替换为querySelectorAll，遍历所有匹配到的div执行替换逻辑即可。

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