jQuery從文本區域中選擇所有電子郵件

Question

我試圖動態地選擇所有輸入到文本區域並由空格或逗號隔開的有效電子郵件。 （我不知道如何使用正則表達式在JavaScript中實現這一點）。正在顯示

我的主要問題，一些誤報和重複的額外信息是，（我使用的keyup假設），是有辦法解決這個問題，所以那隻能說明對方有效的電子郵件一次？

$(document).ready(function(){ 
$('.emails').keyup(function() { 
    var matches = $('.emails').val().split(' '); 
    for (var i = 0; i < matches.length; i++){ 
     if (validEmail(matches[i])){ 
      $('#emails-send').append("<div class='newmail'>" + matches[i] + "</div>"); 
     } 
    } 
}); 

function validEmail(emailAddress) { 
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); 
    return pattern.test(emailAddress); 
}; 

}); 

Answer 1

你可以存儲在另一個對象的結果，並檢查他們已經附加這樣的：http://jsfiddle.net/LKPwg/2/

這還採用了超時，以防止不完整的電子郵件地址進行添加。

var results = {}; 
var timer = null; 

$(document).ready(function() { 
    $('.emails').keyup(function() { 
     clearTimeout(timer); 
     timer = setTimeout("parseEmails()", 500); 
    }); 
}); 

function parseEmails() { 
    var matches = $('.emails').val().split(' '); 
    for (var i = 0; i < matches.length; i++) { 
     if (validEmail(matches[i])) { 
      if (results[matches[i]] == undefined) { 
       results[matches[i]] = matches[i]; 
       $('#emails-send').append("<div class='newmail'>" + matches[i] + "</div>"); 
      } 

     } 
    } 
} 

function validEmail(emailAddress) { 
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); 
    return pattern.test(emailAddress); 
};​ 

作爲逗號/空格分離 - ，可以用空白第一替換逗號：

$('.emails').val().replace(',', ' ').split(' ') 

UPDATE

http://jsfiddle.net/LKPwg/4/

備用方式檢查重複的，由搜索結果中找到的標記的子字符串，並更新result-div i n表示的情況下： （本實施例中不需要的超時，並使用該數據屬性，以確定結果）

var substr = matches[i].substr(0, (matches[i].length - 1)); 
if (results[substr]) { 
    delete results[substr]; 
    $('#emails-send .newmail[data-email="' + substr + '"]').html(matches[i]).attr('data-email', matches[i]); 
} 
else { 
    $('#emails-send').append("<div class='newmail' data-email=" + matches[i] + ">" + matches[i] + "</div>"); 
}