jQuery 實戰：網頁全域文字替換「黑龍江」→「北京」完整代碼

需求場景

在不修改後端資料的前提下，於前端將頁面所有出現的「黑龍江」替換為「北京」，包含不同標籤、巢狀結構、純文字節點。

核心實作

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
    // 綁定按鈕點擊事件
    $('#btnReplace').on('click', replaceAllText);
});

function replaceAllText() {
    // 遞迴處理所有文字節點，避免破壞事件綁定與屬性
    function walk(node) {
        if (node.nodeType === 3) { // Text node
            node.nodeValue = node.nodeValue.replace(/黑龍江/g, '北京');
        } else if (node.nodeType === 1 && 
                   node.tagName !== 'SCRIPT' && 
                   node.tagName !== 'STYLE' && 
                   node.tagName !== 'TEXTAREA' && 
                   node.tagName !== 'INPUT') {
            // 遞迴子節點，跳過腳本/樣式/輸入框
            node.childNodes.forEach(walk);
        }
    }
    walk(document.body);
}
</script>
</head>
<body>
<p>歡迎來到黑龍江，黑龍江很美。</p>
<div>
  <span>黑龍江大學</span>
  <a href="https://heilongjiang.gov.cn">官網</a>
</div>
<textarea>黑龍江不應被替換</textarea>
<button id="btnReplace">執行替換</button>
</body>
</html>

關鍵技術點解析

進階：支援多關鍵字替換

const replaceMap = {
    '黑龍江': '北京',
    '哈爾濱': '朝陽',
    '大慶': '海淀'
};

function walk(node) {
    if (node.nodeType === 3) {
        let text = node.nodeValue;
        for (const [k, v] of Object.entries(replaceMap)) {
            text = text.replace(new RegExp(k, 'g'), v);
        }
        node.nodeValue = text;
    } else if (node.nodeType === 1 && !['SCRIPT','STYLE','TEXTAREA','INPUT','SELECT'].includes(node.tagName)) {
        node.childNodes.forEach(walk);
    }
}

效能與安全考量

• 大型頁面：考慮使用 `document.createTreeWalker` 替代遞迴，避免堆疊溢位
• XSS 風險：若替換內容包含 HTML 標籤，需轉義或使用 `textContent` 而非 `innerHTML`
• 國際化：建議後端輸出時處理，前端替換僅作臨時補救

完整可執行範例

複製上方完整 HTML 存為 `.html` 即可直接在瀏覽器執行測試。