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(' ')

更新

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

检查重复项的另一种方法，通过在结果中搜索找到的标记的子字符串并在这种情况下仅更新结果 div： （本例不需要超时，使用 data-attribute 来识别结果）

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>");
}