javascript - JQuery - 使用给定的正则表达式搜索元素值

Question

假设我有一些这样的元素

<div class="friendListItem" data-user-name="Andi">Andi<div>
<div class="friendListItem" data-user-name="John">John<div>
<div class="friendListItem" data-user-name="Anderson">Anderson<div>
<div class="friendListItem" data-user-name="John Smith">John Smith<div>
<div class="friendListItem" data-user-name="George">George<div>

我正在尝试使用正则表达式创建搜索功能，该功能将根据数据用户名文本匹配来显示元素。例如，我希望当用户输入 nd 时在 jQuery 中捕获 Andi和 Anderson html 元素，

当他们输入“John”来捕获 John 时和John Smith元素，

当他们输入“John Smith”时，仅显示 John Smith元素。

到目前为止我已经想出了这个

$('#inputSearchFriends').on('input', function () {
    const searchText = this.value.trim();
    $('.friendListItem').filter(function() {
        const re = new RegExp(searchText);
        return this.attributes['data-user-name'].value.match(re);
    }).show();
}

但它仅在准确输入文本时返回元素。 我还需要正则表达式模式不区分大小写，因此如果我输入“john”，它仍然会匹配“John”。 我该怎么做？

Answer 1

我会使用一个简单的 indexOf() 因为它比正则表达式方法更快，将所有内容都小写以进行比较。 演示可能看起来有点奇怪，因为它首先隐藏了所有内容，但您明白了:

$('#inputSearchFriends').on('input', function () {
    const searchText = this.value.trim();
    $('.friendListItem').hide();
    $('.friendListItem').filter(function() {
        return this.attributes['data-user-name'].value.toLowerCase().indexOf(searchText.toLowerCase()) > -1;
    }).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="friendListItem" data-user-name="Andi">Andi</div>
<div class="friendListItem" data-user-name="John">John</div>
<div class="friendListItem" data-user-name="Anderson">Anderson</div>
<div class="friendListItem" data-user-name="John Smith">John Smith</div>
<div class="friendListItem" data-user-name="George">George</div>
<input id="inputSearchFriends">