无刷新页面文本替换失效问题：分页场景下的解决方案咨询

你的问题核心在于：原代码仅在页面初始加载时执行一次，而无刷新分页切换时，新的页面内容是通过AJAX异步加载到DOM中的，这些新内容并没有被执行文本替换逻辑。以下是三种可行的解决方案：

方案1：封装替换函数，在分页加载完成后手动调用 #

把文本替换逻辑封装成独立函数，然后在分页内容加载完成的时机（比如AJAX请求回调、分页按钮点击后的内容更新完成）调用这个函数：

// 封装替换逻辑
function replaceViewMoreToReadMore() {
  const mainContainer = document.getElementById("main");
  if (!mainContainer) return;
  
  // 注意：直接替换innerHTML会丢失内部元素的事件绑定，如果页面有绑定事件，建议用方案3的文本节点遍历方式
  mainContainer.innerHTML = mainContainer.innerHTML.replaceAll("View more", "Read more");
}

// 页面初始加载时执行一次
replaceViewMoreToReadMore();

// 监听分页按钮的点击事件（根据你的分页组件实际情况调整选择器）
document.querySelectorAll(".pagination-link").forEach(link => {
  link.addEventListener("click", (e) => {
    e.preventDefault(); // 阻止默认跳转
    
    // 模拟异步加载分页内容（替换成你实际的AJAX/fetch逻辑）
    fetch(link.href)
      .then(res => res.text())
      .then(html => {
        document.getElementById("main").innerHTML = html;
        // 内容加载完成后立即执行替换
        replaceViewMoreToReadMore();
      })
      .catch(err => console.error("分页加载失败：", err));
  });
});

方案2：用MutationObserver自动监听DOM变化 #

如果不知道分页加载的具体触发时机（比如用了第三方分页插件），可以用MutationObserver监听#main元素的内容变化，一旦有新内容插入，自动执行替换：

function replaceViewMoreToReadMore() {
  const mainContainer = document.getElementById("main");
  if (!mainContainer) return;
  
  mainContainer.innerHTML = mainContainer.innerHTML.replaceAll("View more", "Read more");
}

// 初始执行
replaceViewMoreToReadMore();

// 创建DOM变化监听器
const mainContainer = document.getElementById("main");
if (mainContainer) {
  const observer = new MutationObserver((mutations) => {
    // 检测到有新节点添加或内容变更时，执行替换
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length > 0 || mutation.type === "characterData") {
        replaceViewMoreToReadMore();
      }
    });
  });

  // 配置监听选项：监听子节点、后代节点及文本内容变化
  observer.observe(mainContainer, {
    childList: true,
    subtree: true,
    characterData: true
  });
}

方案3：避免innerHTML替换的优化方案（防止事件丢失） #

如果#main内部有绑定事件的元素，直接替换innerHTML会导致这些事件丢失。此时可以遍历文本节点进行替换，只修改文本内容不破坏DOM结构：

function replaceTextInNodes(element, searchStr, replaceStr) {
  element.childNodes.forEach(node => {
    // 处理文本节点
    if (node.nodeType === Node.TEXT_NODE) {
      node.textContent = node.textContent.replaceAll(searchStr, replaceStr);
    } 
    // 递归处理子元素节点
    else if (node.nodeType === Node.ELEMENT_NODE) {
      replaceTextInNodes(node, searchStr, replaceStr);
    }
  });
}

// 初始执行
replaceTextInNodes(document.getElementById("main"), "View more", "Read more");

// 结合方案2的MutationObserver，在DOM变化时调用这个函数
const mainContainer = document.getElementById("main");
if (mainContainer) {
  const observer = new MutationObserver(() => {
    replaceTextInNodes(mainContainer, "View more", "Read more");
  });

  observer.observe(mainContainer, {
    childList: true,
    subtree: true,
    characterData: true
  });
}

内容的提问来源于stack exchange，提问作者Krzyś P