2012-01-12 101 views
5

我在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阵列?在这种情况下,它会过滤出“萨莉在塔科贝尔工作”并保留其余部分。

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

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数组中,然后使用keywords数组筛选来自JSON对象的data.log,然后将其附加到屏幕上。

我也有一个不起作用的删除过滤器功能。也许有人可以帮助我。

+0

新增的Javascript代码,因为这是一个JavaScript的问题(jQuery是为Javascript库)。顺便说一句,这些数组似乎不是Javascript数组... – kapa 2012-01-12 17:55:29

+0

我也删除了jQuery标签,因为问题与它无关。另外,@ bazmegakapa是对的。这些不是有效的JavaScript数组。这看起来像PHP数组。在JavaScript中,只需使用方括号:var arr = [1,2,3]' – 2012-01-12 18:01:01

+0

您是对的。对不起,我写的程序使用了jQuery,Javascript,PHP和HTML的组合..刚刚有点混淆。 – amlane86 2012-01-12 18:02:15

回答

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

没有jQuery的:

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

冷静+1。它工作吗? – qwertymk 2012-01-12 18:31:46

+0

@qwertymk我只在IE7和Chrome中测试过,没有理由在其他浏览器中无法使用。如果您在传统浏览器中使用第二个浏览器,则需要从MDN中填充“.filter”和“.bind”。 – Esailija 2012-01-12 18:32:34

+0

[DEMO](http://jsfiddle.net/yDbGq/) – qwertymk 2012-01-12 18:34:32

0

您可以使用[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); 

Live example

4

jQuery的的 “过滤器” 字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) }) 
+0

在我看来这里最好的答案,即使它从我的一些借用;)。 – 2012-01-12 18:06:26

+0

@ChrisPratt:我没有借任何东西。 – georg 2012-01-12 21:23:21

1
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]); 
    } 
} 

UPDATE

由于从jQuery的角度来看这里的更好的答案,我修改了回答一个VA nilla JavaScript方法,仅适用于那些可能需要在没有jQuery的情况下执行此操作的人。

+0

......我认真地想到了正则表达式的头顶。做得很好。 :D虽然使用'$ .grep()'函数拍摄它会很好。 +1 – 2012-01-12 18:03:47

+0

+1非常好的解决方案,写出循环,并且不需要jQuery:D – jondavidjohn 2012-01-12 18:05:06

+2

如果您使用'for..in',可能希望包含'hasOwnProperty()'我老实说只是使用常规的'为',你正在处理数组而不是对象。 https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/hasOwnProperty – jondavidjohn 2012-01-12 18:20:42

0

使用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("|") + ")"); 
}); 
0
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/

1

顶部头,和未经考验的。作为一个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); 
相关问题