jQuery 批量替換超鏈接 href 屬性：從純數字到動態路由

需求場景

頁面中存在多個超鏈接，href 為純數字（如 href="123"），需批量替換為 href="/plus/list.php?tid=123" 格式。

jQuery 實現代碼

$(function() {
    $('a').each(function() {
        var href = $(this).attr('href');
        // 判斷是否為純數字（可根據實際規則調整正則）
        if (/^\d+$/.test(href)) {
            $(this).attr('href', '/plus/list.php?tid=' + href);
        }
    });
});

關鍵點解析

1. $(function() { ... })：等同於 $(document).ready()，確保 DOM 就緒後執行。
2. $('a').each()：遍歷所有錨點元素。
3. 正則 /^\d+$/：匹配純數字字符串，避免誤替換已處理或非目標鏈接。
4. .attr('href', newValue)：設置新的 href 屬性值。

進階：處理相對路徑與參數保留

$('a[href^="http"]').each(function() { // 僅處理外鏈
    var href = $(this).attr('href');
    var url = new URL(href);
    if (url.searchParams.has('id')) {
        var id = url.searchParams.get('id');
        $(this).attr('href', '/detail.php?id=' + id);
    }
});

原生 JavaScript 替代方案

document.querySelectorAll('a').forEach(a => {
    const href = a.getAttribute('href');
    if (/^\d+$/.test(href)) {
        a.setAttribute('href', '/plus/list.php?tid=' + href);
    }
});

注意事項

• 若頁面鏈接由 AJAX 動態生成，需在數據渲染完成後調用替換邏輯。
• 考慮使用 event delegation（事件委托）在點擊時動態攔截修改，避免 DOM 操作開銷。
• 替換後建議檢查 SEO 影響，確保搜索引擎能正確抓取新鏈接。

通過 jQuery 遍歷與正則匹配，可高效完成批量超鏈接重寫，適配項目路由調整需求。