JavaScript 正則替換：在指定字元後插入 HTML 標籤 (按鈕)

需求

頁面內容含特殊標記 `#`，需在每個 `#` 後插入一個按鈕：

// 原始內容
xxxxx
#target#
yyyyy

// 期望結果
xxxxx
#操作target#操作
yyyyy

核心思路：字串替換而非 DOM 操作

直接操作 `innerHTML` 會破壞事件綁定、選區、輸入框狀態。最佳實踐：取得文字 → 正則替換 → 寫回 innerHTML → 事件委託。

實現代碼

function injectButtonsAfterHash(containerSelector, buttonHtml) {
    const container = document.querySelector(containerSelector);
    if (!container) return;
    
    // 1. 獲取純文字內容 (避免破壞現有標籤)
    // 若容器含複雜結構，建議用 TreeWalker 遍歷文字節點
    let text = container.textContent || container.innerText;
    
    // 2. 正則替換：匹配 # 後插入按鈕 HTML
    // 使用佔位符避免重複替換已插入的按鈕內的 #
    const placeholder = '___HASH_PLACEHOLDER___';
    text = text.replace(/#/g, placeholder);          // 先保護所有 #
    text = text.replace(new RegExp(placeholder, 'g'), `#${buttonHtml}`);
    
    // 3. 寫回 (僅演示，實際建議針對文字節點替換)
    container.innerHTML = text; // 注意：會移除容器內原有標籤與事件
    
    // 4. 事件委託 (容器層級綁定一次)
    container.addEventListener('click', e => {
        if (e.target.matches('.injected-btn')) {
            const hashText = e.target.previousSibling?.textContent?.trim() || '';
            console.log('按鈕點擊，關聯標記:', hashText);
            // 業務邏輯...
        }
    });
}

// 使用
const btnHtml = '操作';
injectButtonsAfterHash('#content-area', btnHtml);

進階：精準處理文字節點 (不破壞現有 DOM)

function injectInTextNodes(root, targetChar, injectHtml) {
    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null, false);
    const textNodes = [];
    while (walker.nextNode()) textNodes.push(walker.currentNode);
    
    textNodes.forEach(node => {
        if (node.textContent.includes(targetChar)) {
            const span = document.createElement('span');
            // 將文字按 targetChar 分割，交替插入文字節點與按鈕
            const parts = node.textContent.split(new RegExp(`(${targetChar})`));
            parts.forEach((part, i) => {
                if (part === targetChar) {
                    span.appendChild(document.createTextNode(part));
                    const btn = document.createElement('span');
                    btn.innerHTML = injectHtml;
                    btn.className = 'injected-btn-wrapper';
                    span.appendChild(btn);
                } else if (part) {
                    span.appendChild(document.createTextNode(part));
                }
            });
            node.parentNode.replaceChild(span, node);
        }
    });
}

// 使用
injectInTextNodes(document.getElementById('content'), '#', '操作');

關鍵點總結

安全提醒

若標記內容來自用戶輸入，務必對 `buttonHtml` 及周圍文字進行 HTML 編碼，防止 XSS：

function escapeHtml(str) {
    return str.replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
}