检查输入字段是否包含特定文本。

Question

我正在尝试查找用户在输入字段中输入的文本是否包含某些特定文本 - 我已经实现了它的功能，但只适用于完全匹配，而不是部分匹配。如果用户在进行匹配之前键入任何内容，则代码自然不会触发。

我需要做的是检查输入字段中是否包含@nyu.edu。

$('.email').keyup(function(){
    if ($(".email").val() == "@nyu.edu") {
        $("p.warning").css("visibility", "visible");
    }
    else if ($(".email").val() != "@nyu.edu") {
        $("p.warning").css("visibility", "hidden");
    }
});

- Nikki Mather

---

不需要使用else if（bla bla），可以简单地使用 } else { 或三目运算符，或者一个接受 布尔值 参数的 jQuery 方法，如.toggle()。 - Roko C. Buljan

Answer 1

检查字符串是否包含子字符串可以很容易地通过使用 haystack.indexOf(needle) 并检查是否等于 -1（未找到）来完成。

if ($(".email").val().indexOf("@nyu.edu") !== -1) {
    // contains
} else {
    // does not contain
}

---

在ES6的规范中有一个函数叫做includes，你可能会觉得更加自然。

你可以按照以下方式添加对ES6 String.prototype.includes的支持。

if (!String.prototype.includes) {
    String.prototype.includes = function (needle, pos) {
        return this.indexOf(needle, pos || 0) !== -1;
    };
}

"foobar".includes('foo'); // true

- Paul S.

---

@RokoC.Buljan IE8和互联网不是朋友。 - Paul S.

根据微软的说法，indexOf的_String_版本在IE6+中可以正常工作，obj.prototype也是如此（请参见要求部分）。@RokoC.Buljan - Paul S.

".includes"或".contains"是相同的。 - Edwin Reynoso

@Edwin 目前_ES6草案_使用String.prototype.includes，因为与先前版本的MooTools存在签名冲突。 - Paul S.

Answer 2

工作经验：

http://codepen.io/anon/pen/XJKMjo

$('.email').keyup(function() {
    var exp = /@nyu\.edu$/; // reg ex
    var input = $(this).val(); // email input
    var matches = exp.test(input); // boolean
    // changes to hidden or visible
    $("p.warning").css("visibility", (matches) ? "visible" : "hidden");
});

- Rafael

Answer 3

你可以使用jQuery根据HTML元素的属性内容进行过滤，以包含、以某个字符串开头或以某个字符串结尾。要匹配包含某个字符串的属性元素，你可以在jQuery选择器中使用[attr*="value"]，但我认为你想要的是以某个字符串结尾的元素。以下是如何实现：

var elements = $(".email[value$='@nyu.edu']");
if(elements.length > 0) {
    // Do something with the elements, such as removing an .error class
} else {
    // Email doesn't end with @nyu.edu
}

了解更多有关 jQuery结束匹配属性选择器或像此类的 浏览其他属性选择器。

- Pluto

---

不要在每个键事件上跨越整个DOM树寻找像.email[value$='@nyu.edu']这样的低速选择器...请注意。 - Roko C. Buljan

还可以阅读有关 $= 选择器的更多信息。没有人保证该字符串将恰好以该值结尾。 - Roko C. Buljan

@RokoC.Buljan 它明确地首先过滤具有类email的元素，这正是其他推荐答案所做的。你在哪里看到这不是保证的？ - Pluto

你是怎么想的，“而且你在哪里看到这不是保证的？”？如果我复制粘贴了一个带有结尾空格的电子邮件地址，你的脚本将会失败。那个地球？（不要把建议太当成个人攻击，相反，思考问题并加以改进 :)） - Roko C. Buljan

我不明白我怎么会把什么东西当成个人的笑话，但既然你表达清楚了，你有读完我发布的整篇回答吗？我最先提到的是[attr*="value"]属性选择器。 - Pluto

Answer 4

jsBin演示

var $warning = $("p.warning"); // P.S. make sure not to target a wrong .warning!
$('.email').on("input", function(){
    $warning.toggle( /@nyu\.edu/ig.test(this.value) );
});

正如我所提到的，.warning 作为一个类可以代表任何第一个 .warning 出现。使用其他选择器，例如 .next() 或 .closest(selector).find(".warning")

如果您忘记检查复制粘贴情况，您的客户损失了 $$$，您的老板会解雇您。;) 开玩笑，使用 "input" 事件。

P.S 使用 .warning{display:none;} 而不是 visibility

- Roko C. Buljan

---

“.” 是正则表达式中的特殊字符，“@nyu@edu” 将匹配，这绝对是不可取的。此外，在您的示例中，只要有人输入任何带有 "@nyu.edu" 的内容，警告就会显示。只要它是不正确的，警告就会保持隐藏。 - Pluto

@pluto 你太棒了。谢谢。 - Roko C. Buljan