1

我正在尝试动态选择所有输入到文本区域并以空格或逗号分隔的有效电子邮件。（我不确定如何使用正则表达式在 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);
};

});
4

1 回答 1

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：（此示例不需要超时并使用数据属性来识别结果）

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>");
}
于 2012-06-26T07:21:39.823 回答