1

テキスト領域に入力され、スペースまたはコンマで区切られたすべての有効な電子メールを動的に選択しようとしています。(JavaScriptでこれを実現するために正規表現を使用する方法がわかりません)。

私の主な問題は、多くの誤検知と余分な重複情報が表示されていることです (keyup を使用していると思います)。この問題を修正して、有効な電子メールを 1 回だけ表示する方法はありますか?

$(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 に答える