JavaScript动态加载与导航页面的曼达伊字符替换问题求助

核心问题分析 #

目标网站属于单页应用（SPA），通过侧边栏导航跳转时页面并未完全刷新，仅更新DOM内容和前端路由。之前的方案要么只处理初始加载的DOM，要么监听范围、时机不对，导致新路由下的内容未被替换。

可行解决方案 #

1. 全局DOM监听+路由变化双触发 #

结合MutationObserver监听整个文档的DOM变化，同时监听前端路由事件（适配hash/history两种路由模式），每次路由切换后强制触发全量替换，确保新加载的内容被处理：

// 曼达伊-希伯来字符映射表（按需补充完整）
const charMap = {
  'ࡀ': 'א',
  'ࡁ': 'ב',
  'ࡂ': 'ג',
  // 剩余字符映射...
};

// 递归替换节点内文本
function replaceChars(node) {
  // 跳过脚本、样式标签
  if (node.nodeType === Node.ELEMENT_NODE && (node.tagName === 'SCRIPT' || node.tagName === 'STYLE')) return;
  
  // 处理文本节点
  if (node.nodeType === Node.TEXT_NODE) {
    node.textContent = node.textContent.replace(/[ࡀ-ࡶ]/g, match => charMap[match] || match);
    return;
  }
  
  // 递归处理子节点
  node.childNodes.forEach(replaceChars);
}

// 初始化DOM变化监听
function initDOMObserver() {
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      mutation.addedNodes.forEach(node => replaceChars(node));
    });
  });

  // 监听body下所有子节点变化（含子树）
  observer.observe(document.body, {
    childList: true,
    subtree: true,
    characterData: true
  });
}

// 初始化路由变化监听
function initRouteListener() {
  // 处理hash路由切换
  window.addEventListener('hashchange', () => {
    setTimeout(() => replaceChars(document.body), 150);
  });

  // 处理history路由切换
  window.addEventListener('popstate', () => {
    setTimeout(() => replaceChars(document.body), 150);
  });

  // 拦截a标签点击，处理前端跳转
  document.addEventListener('click', e => {
    const link = e.target.closest('a');
    if (!link || link.target || link.origin !== window.location.origin) return;
    
    const targetUrl = new URL(link.href);
    // 判断是否为前端路由跳转（非页面刷新）
    if (targetUrl.pathname !== window.location.pathname || targetUrl.hash !== window.location.hash) {
      setTimeout(() => replaceChars(document.body), 200);
    }
  });
}

// 启动所有逻辑
initDOMObserver();
initRouteListener();
// 初始页面替换
replaceChars(document.body);

2. 优化：避免重复替换已处理内容 #

为防止重复替换同一文本，可给已处理的父元素添加标记：

function replaceChars(node) {
  if (node.dataset.processed) return;
  
  if (node.nodeType === Node.ELEMENT_NODE && (node.tagName === 'SCRIPT' || node.tagName === 'STYLE')) return;
  
  if (node.nodeType === Node.TEXT_NODE) {
    node.textContent = node.textContent.replace(/[ࡀ-ࡶ]/g, match => charMap[match] || match);
    // 给父元素标记已处理（文本节点无法添加dataset）
    node.parentElement?.setAttribute('data-processed', 'true');
    return;
  }
  
  node.childNodes.forEach(replaceChars);
}

关键注意事项 #

• 替换时必须跳过script和style标签，避免破坏页面逻辑
• 路由变化后的延迟时间可根据网站DOM更新速度调整（100-300ms区间适配大多数SPA）
• 拦截a标签时需判断同源且非新窗口打开，不影响外部链接跳转

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