。在JavaScript中的测试不按预期工作 [英] .test in javascript not working as per expectation

问题描述

我创建了一个自定义选择菜单的小插件。我必须在该下拉菜单中实现搜索功能。不过，我添加了这些功能，但有时它并没有给出正确的结果。如果您在输入框中键入'a'，那么它应该显示如下所示的结果

但是我的插件给出了下面的结果。它也正在用小写替换大写字母。
我试图解决这个问题，但无法解决它。 将移动每个匹配的起始位置（用于匹配相同字符串中的后续匹配）

所以你应该为每个元素创建一个新的RegExp对象。 （或使用 .match（）并检查其长度）

  searchItem：function（）{
 var pattValue = this.value; 
 var val = this.value; 
 $（'＃options li'）。each（function（）{
 var patt = new RegExp（pattValue，'gi'）; 
 if（！patt.test（$（this ）.text（）））{
 $（this）.hide（）; 
} else {
 $（this）.show（）; 
 apply.highlight.call （this，val）; 
} 
}）; $（bt）
 $（'＃options h2'）。each（function（）{
 var patt = new RegExp（pattValue，'gi'）; 
 if（！patt.test （$（'label'，this）.text（）））{
 $（this）.hide（）; 
} else {
 $（this）.show（）; 
 apply.highlight.call（this，val）; 
} 
}）; 
} 
  

---

您输入的字符使用的是匹配的文本，而不是用户提交的文本，您需要在RegExp中创建一个组，并使用该捕获来替换匹配

  highlight：function（val）{
 var nn = new RegExp（'（'+（val ||'^ $'）+'）'，'gi'）; 
 var txt = $（this）.find（'label'）。text（）; 
 txt = txt.replace（nn，< span class ='highlight'> $ 1< / span>）; 
 $（'label'，this）.html（txt）
} 
  

---

最后，您需要在创建选项时重置 li 变量

演示 http://jsfiddle.net/b0rspd5e/

I have create a small plugin that customize select menu. I have to implement search functionality in that dropdown. However I have add the functionality but sometimes it is not giving correct result for example. if you type 'a' in input box then it should display result as given below

but my plugin is giving result below. It is also replacing uppercase letter with lowercase. I am trying to solve this but could not getting any idea to fix it. fiddle

searchItem: function () {
    var patt = new RegExp(this.value, 'gi')
    var val = this.value;
    $('#options li').each(function () {

        if (!patt.test($(this).text())) {
            $(this).hide();
        } else {
            $(this).show();
            apply.highlight.call(this, val);
        }
    });

    $('#options h2').each(function () {
        if (!patt.test($('label', this).text())) {
            $(this).hide();
        } else {
            $(this).show();
            apply.highlight.call(this, val)
        }
    });

}

解决方案

The problem with the unmatched items is that you are using the test method of the same RegExp object for multiple elements.

But .test() will move the starting position for each match (it is for matching subsequent matches on the same string)

So you should create a new RegExp object for each element. (or use the .match() and check its length)

searchItem: function () {
        var pattValue = this.value;
        var val = this.value;
        $('#options li').each(function () {
            var patt = new RegExp(pattValue, 'gi');
            if (!patt.test($(this).text())) {
                $(this).hide();
            } else {
                $(this).show();
                apply.highlight.call(this, val);
            }
        });

        $('#options h2').each(function () {
            var patt = new RegExp(pattValue, 'gi');
            if (!patt.test($('label', this).text())) {
                $(this).hide();
            } else {
                $(this).show();
                apply.highlight.call(this, val);
            }
        });
    }

---

For the replacing of the chars to the one you inputted use the matched text instead of the user submitted one, you need to create a group in the RegExp and use that capture to replace the match

    highlight: function (val) {
        var nn = new RegExp('(' + (val||'^$') + ')', 'gi');
        var txt = $(this).find('label').text();
        txt = txt.replace(nn, "<span class='highlight'>$1</span>");
        $('label', this).html(txt)
    }

---

Finally you need to reset the li variable when creating the options

Demo at http://jsfiddle.net/b0rspd5e/

这篇关于。在JavaScript中的测试不按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！