如何将HTML按钮中的“Contact Me”文本替换为“Contact Us”

方法1：批量替换所有元素中的目标文本（通用版） #

这个方法会遍历页面所有文本节点，自动替换所有包含“Contact Me”的内容，无需依赖元素ID：

// 定义替换文本的函数
function replaceText(oldText, newText) {
  const textWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT,
    null,
    false
  );

  let currentNode;
  while (currentNode = textWalker.nextNode()) {
    if (currentNode.textContent.includes(oldText)) {
      currentNode.textContent = currentNode.textContent.replaceAll(oldText, newText);
    }
  }
}

// 执行替换
replaceText("Contact Me", "Contact Us");

方法2：仅替换按钮元素中的目标文本（精准版） #

如果确定目标内容只出现在按钮中，可以用这个更精准的方式，避免误改其他文本：

// 获取所有按钮元素
const contactButtons = document.querySelectorAll('button');

contactButtons.forEach(btn => {
  // 去除文本前后空格后判断是否匹配
  if (btn.textContent.trim() === "Contact Me") {
    btn.textContent = "Contact Us";
  }
});

为什么你之前的代码无效？ #

• 你写的第二段代码只是在内存中修改了字符串变量，并没有操作页面上的DOM元素，所以页面不会有任何变化。
• 第一段代码依赖元素ID，但如果目标按钮没有设置ID，或者你找不到对应的ID，自然无法生效。

额外提示 #

如果页面中的按钮是动态加载的（比如点击、滚动后才出现），需要把替换代码放在元素加载完成后执行，比如：

document.addEventListener('DOMContentLoaded', () => {
  // 这里放上面的替换函数或代码
});

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