前端 JavaScript 郵箱地址實體編碼防採集

將電子郵件地址轉換為 HTML 實體編碼（david@yahoo.com），可讓瀏覽器正常顯示與點擊，卻能阻擋大多數簡單爬蟲直接掃描 mailto: 或明文郵箱。

核心加密函式

function encodeEmail(email) {
    let encoded = '';
    for (let i = 0; i < email.length; i++) {
        encoded += '&#' + email.charCodeAt(i) + ';';
    }
    return encoded;
}

// 使用範例
const raw = 'davidz94@yahoo.com';
const encoded = encodeEmail(raw); // "davidz94@yahoo.com"
document.getElementById('emailLink').innerHTML = 
    '<a href="mailto:' + encoded + '">' + encoded + '</a>';

完整互動頁面範例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Email 加密示範</title></head><body>
<input type="text" id="emailInput" value="davidz94@yahoo.com" size="30" />
<button onclick="doEncode()">加密</button>
<button onclick="copyResult()">複製結果</button>
<br><br>
<strong>加密結果 (HTML 實體):</strong>
<input type="text" id="encodedOutput" size="80" readonly />
<br><br>
<strong>瀏覽器渲染預覽:</strong>
<span id="preview"></span>

<script>
function encodeEmail(email) {
    let r = '';
    for (let i = 0; i < email.length; i++) r += '&#' + email.charCodeAt(i) + ';';
    return r;
}
function doEncode() {
    const e = document.getElementById('emailInput').value.trim();
    const enc = encodeEmail(e);
    document.getElementById('encodedOutput').value = enc;
    document.getElementById('preview').innerHTML = 
        '<a href="mailto:' + enc + '">' + enc + '</a>';
}
function copyResult() {
    const ta = document.getElementById('encodedOutput');
    ta.select();
    document.execCommand('copy');
    alert('已複製到剪貼簿');
}
</script>
</body></html>

進階：剪貼簿跨瀏覽器支援

現代瀏覽器建議使用 navigator.clipboard.writeText() (需 HTTPS)，舊版 IE 使用 window.clipboardData.setData()。上方範例使用 document.execCommand('copy') 兼容性較好，但已棄用。

限制與補充

• 此法僅阻擋「不解析 HTML 實體」的簡易爬蟲；進階爬蟲會解碼實體。
• 更強保護：圖片化郵箱、JavaScript 動態組裝、表單驗證碼、伺服器端轉發。
• 無障礙考量：實體編碼不影響螢幕閱讀器朗讀，但 mailto: 點擊行為正常。