Question

我已经采取了一些措施，但我会发布我的问题和我最近成功的代码。

如果您熟悉Sublime Text，那么这将更加快捷。如果没有，我会尽力解释，但我绝对推荐这个程序作为附注。

目标是匹配给定搜索字符串的标题并突出显示匹配项。问题是匹配可以是任何顺序，并且不必表示字符串的开头，并且字符串在原始输入中用空格分隔

示例：

String to Match: "Hello World"

Does it match? 
"hello" -> Yes!
"h w" -> Yes!
"el orl" -> Yes!
"World Hello" -> Yes!
"Hello Foo" -> No!

所以输入非常宽容。我有它可以匹配文本，并确定是否显示结果。我只是坚持突出工作。我可能采取了错误的方法，但这就是我所拥有的：

$('#sdfilter').live('keyup change', function() {
    var inText = $(this).val().trim(); //remove trailing whitespace
    var blocks = $('.listing'); //blocks to loop through

    $.each(blocks, function() {
        var title = $(this).children('.title').text(); //the title in the block
        if (matchAll(title, inText)) {
            $(this).show();
        } else {
            $(this).hide();
        }
    })

})

matchAll = function(string, args) { //string= string to match, args= search input
    var die = 0; //return switch
    var checks = args.split(' '); //break input into array
    $.each(checks, function() {
        var myReg = new RegExp(this, 'i'); //search term to regex
        if (!string.match(myReg)) { //if it doesn't match, kill the function
            die = 1;
        } 
    })

    if (die == 1) {
        return false;
    } else {
        return true;
    }
}

我尝试使用$.each(checks, function() {...})循环进行替换以添加<span>标记，但输入字符串在循环时匹配span标记。

我找到的解决方案非常接近，但并不像我希望的那样充满活力。所以我的官方问题是：我是否朝着正确的方向前进？如果是这样，我在这里错过了什么？

修改

对不起，我想我还不够清楚。我需要知道如何前进，以便突出显示匹配的内容。使用上面的例子和'[]'来表示突出显示

String to Match: "Hello World"

Does it match? 
"hello" -> Yes! -> "[Hello] World"
"h w" -> Yes! -> "[H]ello [W]orld"
"el orl" -> Yes! -> "H[el]lo W[orl]d"
"World Hello" -> Yes! -> "[Hello] [World]"
"Hello Foo" -> No! -> **hidden

通过将匹配项包装在span标记

中来完成突出显示

编辑2

当尝试string = string.replace(myReg, '<span>' + this + '</span>')之类的内容（作为if (!string.match(myReg))的else语句）时，我最终会将<span>个元素与之匹配。我想这可以预期，因为相同的输入反复循环。有没有办法将它们从myReg中排除？小代码块供参考：

...
$.each(checks, function() {
        var myReg = new RegExp(this, 'i'); //search term to regex
        if (!string.match(myReg)) { //if it doesn't match, kill the function
            die = 1;
        } else {
            string = string.replace(myReg, '<span>' + this + '</span>');
        }
    })
...

Answer 1

我对此的理解是OP说如果输入的值都在“匹配的字符串”中，那么它被认为是匹配。

我做了一个小提琴here。主要修复方法是使用.text()。我已经对代码进行了评论，以帮助您了解正在发生的事情。

正则表达式匹配并突出大量方差

1 个答案: