Question

我有一个简单的表单，用户可以输入“推文”。我在幕后用一些javascript来控制输入网址时会发生什么。

如果输入了诸如test.com之类的网址，则会出现一个新的输入字段。

如果输入了存储在数组中的网址，则会输入新的输入字段以及选择选项。

这是我的javascript：

var test = ["test1.com", "test2.com", "test3.com"];
$('#tweet_text_ga').hide();
$('#custom_alias').hide();
$('#tweet_campaign').hide();
$('#tweet_text').keydown(function () {
    var val = this.value;

    if (/\.[a-zA-Z]{2,3}/ig.test(val)) {
        $('#custom_alias').show();
    } else {
        $('#custom_alias').hide();
    }

    if ($.inArray(val, test) !== -1) {
        $('#tweet_campaign').show();
    } else {
        $('#tweet_campaign').hide();
    }
});

如果只输入网址，它可以正常工作。但是只要添加更多文本，它就会忽略url是否在数组中，并删除select选项。我不太清楚如何更好地解释这个，所以我设置了一个小提示来表明我的意思。

我希望有人理解并指出我正确的方向

Fiddle

Answer 1

那是因为您正在检查整个输入是否在数组中：if ($.inArray(val, test) !== -1)。您需要使用正则表达式从输入中检索URL并检查。

编写一个检索任何URL的正则表达式，获取该URL并检查它是否是您的幸运之一：

var urlsInInput = /[a-z0-9]+\.[a-zA-Z]{2,3}/ig.exec(val);
if (urlsInInput.length == 1 && $.inArray(urlsInInput[0], test) !== -1) {

而不是

if ($.inArray(val, test) !== -1) {

Fiddle

Answer 2

这是处理第一个网址的我的版本

Live Demo

$('#tweet_text').keydown(function () {
    var val = this.value;
    var urls = val.match(/[a-z0-9]+\.[a-zA-Z]{2,}/ig);
    var alias = (urls && urls.length>0) 
    $('#custom_alias').toggle(alias);

    var tweet = urls && urls.length>0 && $.inArray(urls[0], test) !== -1;
    $('#tweet_campaign').toggle(tweet);
});

Answer 3

@siledh说的话。以下是如何使用当前测试数组的方法

var reg = new RexExp(test.join('|').replace(/\./ig, "\\."), 'ig')
if( reg.test(val) ) {
    $('#tweet_campaign').show();
} else {
    $('#tweet_campaign').hide();
}

Answer 4

广告系列字段再次开始消失的原因是您将输入的整个值与数组进行比较。如果您只是找到所有域匹配，然后将它们与您的阵列进行比较，它应该可以正常工作。

像这样：

var test = ["test1.com", "test2.com", "test3.com"];

$('#tweet_text_ga').hide();
$('#custom_alias').hide();
$('#tweet_campaign').hide();

$('#tweet_text').keyup(function () {

    var alias    = false;
    var campaign = false;

    var domain = /([a-z0-9]+(:?[\-\.]{1}[a-z0-9]+)*\.[a-z]{2,6})/ig;
    var val    = this.value;
    var match  = val.match(domain);

    if (match) {
        alias = true;
        match.forEach(function(e) {
            campaign = campaign || ($.inArray(e, test) !== -1);
        });
    }

    if (alias === true) {
        $('#custom_alias').show();
    } else {
        $('#custom_alias').hide();
    }

    if (campaign === true) {
        $('#tweet_campaign').show();

    } else {
        $('#tweet_campaign').hide();
    }

});

Answer 5

您的$.isArray(val, test)出了问题，您使用的值就是整个值。而且不确定你的目的，所以写一个像这样的代码。希望它会有所帮助。

http://jsfiddle.net/sheldon_w/KLuK8/

var test = ["test1.com", "test2.com", "test3.com"];

var urlReg = /[^\s]+\.[a-zA-Z]{2,3}/ig;
$('#tweet_text_ga').hide();
$('#custom_alias').hide();
$('#tweet_campaign').hide();
$('#tweet_text').keydown(function () {
    var val = this.value;

    var matchedUrls = [];
    val.replace(urlReg, function (matched) {
        matchedUrls.push(matched);
    });

    if (matchedUrls.length > 0) {
        $('#custom_alias').show();
    } else {
        $('#custom_alias').hide();
    }

    $(matchedUrls).each(function (idx, url) {
        if ($.inArray(url, test) !== -1) {
            $('#tweet_campaign').show();
            return false;
        } else {
            $('#tweet_campaign').hide();
        }
    });

});

如果url存在于数组中做某事

5 个答案: