jQuery 텍스트 영역의 모든 전자 메일 선택

Question

텍스트 영역에 입력되고 공백이나 쉼표로 구분 된 모든 유효한 전자 메일을 동적으로 선택하려고합니다. (나는 자바 스크립트에서 이것을 달성하기 위해 정규 표현식을 사용하는 방법을 잘 모르겠다.)

내 주된 문제는 잘못된 긍정과 중복 정보가 많이 표시된다는 것입니다. (키 업을 사용한다고 가정합니다.) 올바른 이메일을 한 번만 표시하도록이 문제를 해결할 수있는 방법이 있습니까? 그들은 이미이 같은 추가하는 경우

$(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); 
};​ 

쉼표/​​공백의 seperation에 대한, 당신은 첫 번째 공백에 쉼표를 대체 할 수 :

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

UPDATE

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

다른 방법을 중복 검사에 의해 결과에서 발견 된 토큰의 하위 문자열을 검색하고 결과 div를 업데이트합니다. 이 경우 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>"); 
}