如何用JavaScript替换p标签指定文本且保留图片（仅修改JS文件）

没问题，这是完全符合你需求的实现方式——不用碰一行HTML代码，只靠JavaScript就能替换指定文本，同时保证p标签里的图片丝毫不影响：

核心思路 #

我们不直接替换整个p标签的HTML内容（那样可能会导致图片重加载或DOM结构被破坏），而是精准操作DOM的文本节点：只替换纯文本内容，完全不触动<img>、<span>这类元素节点，这样图片自然会原封不动保留。

代码实现 #

// 获取目标p标签（如果页面有多个p，可根据实际场景调整选择器，比如加类名或其他属性）
const targetP = document.querySelector('p');

// 递归遍历节点，只处理文本节点的内容
function replaceTargetText(node) {
  // 如果是纯文本节点，执行替换
  if (node.nodeType === Node.TEXT_NODE) {
    // 全局替换所有"morrhåren"为"skägget"（g表示全局匹配，避免只替换第一个）
    node.textContent = node.textContent.replace(/morrhåren/g, 'skägget');
  } 
  // 如果是元素节点，递归遍历它的子节点（跳过脚本和样式标签，避免不必要的操作）
  else if (node.nodeType === Node.ELEMENT_NODE && !['SCRIPT', 'STYLE'].includes(node.tagName)) {
    Array.from(node.childNodes).forEach(childNode => replaceTargetText(childNode));
  }
}

// 触发替换操作
replaceTargetText(targetP);

为什么这个方法靠谱？ #

• 完全保留元素节点：<img>、<span>这些标签都会原封不动，图片肯定不会消失；
• 全局替换所有匹配项：不管"morrhåren"在p标签里出现多少次，都会被替换；
• 不破坏原有DOM状态：不像直接修改innerHTML会重新解析HTML（可能导致图片重加载、绑定的事件丢失），这个方法更安全稳定。

处理多个p标签的情况 #

如果页面上有多个需要替换的p标签，只需要把选择器改成querySelectorAll，然后循环处理每个p即可：

const allParagraphs = document.querySelectorAll('p');

function replaceTargetText(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    node.textContent = node.textContent.replace(/morrhåren/g, 'skägget');
  } else if (node.nodeType === Node.ELEMENT_NODE && !['SCRIPT', 'STYLE'].includes(node.tagName)) {
    Array.from(node.childNodes).forEach(childNode => replaceTargetText(childNode));
  }
}

allParagraphs.forEach(paragraph => replaceTargetText(paragraph));

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