如何对字符串数组进行过滤？

Question

我是一个有用的助手，可以为您翻译文本。

我有一个jQuery字符串数组。我还有另一个关键字数组，我想使用它来过滤字符串数组。

我的两个数组：

    var arr = new Array("Sally works at Taco Bell", "Tom drives a red car", "Tom is from Ohio", "Alex is from Ohio");

    var keywords = new Array("Tom", "Ohio");

如何在jQuery中使用关键字数组keywords来过滤arr数组？在这种情况下，它将过滤掉"Sally works at Taco Bell"并保留其余部分。

以下是我正在使用的实际代码。

var keywords= [];
var interval = "";
var pointer = '';
var scroll = document.getElementById("tail_print");

$("#filter_button").click(
function(){
    var id = $("#filter_box").val(); 
    if(id == "--Text--" || id == ""){
        alert("Please enter text before searching.");
    }else{
        keywords.push(id);
        $("#keywords-row").append("<td><img src=\"images/delete.png\" class=\"delete_filter\" /> " + id + "</td>");
    }
}
);

$(".delete_filter").click(
function(){
   ($(this)).remove(); 
}
);

function startTail(){
clearInterval(interval);
interval = setInterval(
function(){
    $.getJSON("ajax.php?function=tail&pointer=" + pointer + "&nocache=" + new Date(),
        function(data){
            pointer = data.pointer;
            $("#tail_print").append(data.log);
            scroll.scrollTop = scroll.scrollHeight;
        });
}, 1000);
}

整个目的是让用户过滤日志结果。因此，用户执行开始 startTail() 和 $.getJSON() 的操作，检索由 PHP 函数构建并打印结果的 JSON 对象。完美无瑕运作。现在我想给用户提供过滤传入尾部项目的选项。用户点击筛选按钮，jQuery 获取筛选文本并将其添加到关键字 (keywords) 数组中，然后使用关键字数组过滤 JSON 对象中的 data.log，并将其附加到屏幕上。

我还有一个未能正常工作的删除筛选器功能。或许有人可以帮助我解决这个问题。

- amlane86

---

添加了Javascript标签，因为这是一个Javascript问题（jQuery是Javascript的库）。顺便说一下，那些数组似乎不是Javascript数组... - kapa

我还删除了jQuery标签，因为问题与其无关。此外，@bazmegakapa是正确的。那些不是有效的JavaScript数组。那看起来像是PHP数组。在JavaScript中，只需使用方括号：var arr = [1, 2, 3]。 - Alex Turpin

你说得对。抱歉……我写的程序使用了jQuery、Javascript、PHP和HTML的组合……有点混淆了。 - amlane86

@Xeon06 jQuery 标签没问题，说明 OP 接受基于 jQuery 方法的解决方案。 - kapa

Answer 1

$.grep( arr, $.proxy(/./.test, new RegExp(keywords.join("|"))));

没有使用jQuery：

arr.filter(/./.test.bind(new RegExp(keywords.join("|"))));

- Esailija

---

@qwertymk 好的，我只在IE7和Chrome中进行了测试，但没有理由它不能在其他浏览器中工作。如果您在旧版浏览器中使用第二个选项，则需要从MDN中获取.filter和.bind的shim。 - Esailija

我正在Qt/QML中使用它来过滤ComboBox的内容，具体取决于旁边TextField中的文本：非常好用，只需一行代码进行过滤，速度非常快（没有明显的延迟；有大约500个字符串需要过滤）。起初尝试了一些臃肿的typeahead JavaScript库，但无法使其正常工作。你的一行代码：完美 -> 谢谢！ :D - mozzbozz

Answer 2

jQuery中“filter”的意思是grep

var arr = ["Sally works at Taco Bell", "Tom drives a red car", "Tom is from Ohio", "Alex is from Ohio"];
var keywords = ["Tom", "Ohio"];

var regex = new RegExp(keywords.join("|"));

result = $.grep(arr, function(s) { return s.match(regex) })

- georg

---

在我看来，这是最好的答案，尽管它有些借鉴了我的观点 ;)。 - Chris Pratt

@ChrisPratt：我没有借任何东西。 - georg

Answer 3

var filtered = [];
var re = new RegExp(keywords.join('|'));

for (var i=0; i<arr.length; i++) {
    if (re.search(arr[i])) {
        filtered.append(arr[i]);
    }
}

更新

由于从jQuery的角度来看这里有更好的答案，因此我修改了我的答案，采用了纯JavaScript方法，以便那些可能需要在没有jQuery的情况下完成此操作的人使用。

- Chris Pratt

---

...而且我认真地必须脑海中考虑正则表达式。做得好。:D 不过，如果能够使用$.grep()函数就更好了。+1 - Richard Neil Ilagan

+1 非常好的解决方案，写出循环，而且不需要 jQuery :D - jondavidjohn

如果你正在使用 for..in，可能需要包含一个 hasOwnProperty()。老实说，我会只使用普通的 for，因为你正在处理数组而不是对象。https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/hasOwnProperty - jondavidjohn

同意。我倾向于过度使用for .. in，因为它更接近我经常处理的Python。我已经对其进行了更改。 - Chris Pratt

Answer 4

这只是一个初步的想法，还未经过测试。作为jQuery插件：

(function($) {

    $.foo = function(needle, haystack) {
        return $.grep(haystack, function () {
            var words = this.split(' '),
                flag = false
                ;

            for(var i=0; i < words.length; i++) {
                flag = $.inArray(words[i], needle);
                if (flag) { break; }
            }

            return flag;                
        });
    };

})(jQuery);

然后你可以（理论上）像这样运行：

var bar = $.foo(keywords, arr);

- Richard Neil Ilagan

Answer 5

你可以使用 [filter][1] 函数，但无论如何都需要循环遍历两个数组。你可以使用 indexOf 来检查一个字符串是否包含在另一个字符串中。

var arr = ["Sally works at Taco Bell", "Tom drives a red car", "Tom is from Ohio", "Alex is from Ohio"];
var keywords = ["Tom", "Ohio"];
var filtered = [];

for(var i = 0; i < arr.length; i++) {
    for(var j = 0; j < keywords.length; j++) {
        if (arr[i].indexOf(keywords[j]) > -1) {
            filtered.push(arr[i]);
            break;
        }
    }
}

console.log(filtered);

实时示例

- Alex Turpin

Answer 6

运用jQuery的强大功能：

var keywords = ["Tom", "Ohio"];
$(["Sally works at Taco Bell", "Tom drives a red car", "Tom is from Ohio", "Alex is from Ohio"]).filter(function(k, v) {
    return v.match("(" + keywords.join("|") + ")");
});

- greut

Answer 7

var keywords = ['Tom', 'Ohio'];
var arr = ['Sally works at Taco Bell', 'Tom drives a red car', 'Tom is from Ohio', 'Alex is from Ohio'];
var matcher = new RegExp(keywords.join('|'));
var newarr = [];
$.each(arr, function(index, elem) {
   if (elem.match(matcher)) {
      newarr.push(elem);
   }
});
console.log(newarr);

代码演示: http://jsfiddle.net/LQ92u/1/

- Explosion Pills