Javascript通过多个字符串过滤数组

Question

我正在尝试过滤一个名为 products 的数组，每个产品填充一个字符串。

var products = [
    'canadian black angus beef fresh',
    'canadian black angus beef frozen',
    'american black angus beef frozen'
];

搜索首先在一个名为 keywords 的数组中用空格分割表单输入元素，该数组包含可变长度的字符串。

var keywords = ['angus', 'fresh'];

实际上，我正在循环 product_array 并为关键字数组创建第二个（内部）for 循环。到现在一切都很好。

这是显示问题的缩短代码：

function test() {
    
    var products = [
        'canadian black angus beef fresh',
        'canadian black angus beef frozen',
        'american black angus beef frozen'
    ];
    
    var keywords = ['angus', 'fresh'];
    var hits = [];
    
    for (var i = 0; i < products.length; i++) {
        
        for (var j = 0; j < keywords.length; j++) {
            
            if (products[i].indexOf(keywords[j]) != -1) {
                
                /*
                a if case for looped '&&' operator 
                would be great - or something like that
                looped because of the variable length of keywords
                */
                hits.push(products[i]);
            }
        }
    }
    
    console.log(hits);
    /* 
    all products :/ - because all product matches with 'angus'
    but I'm searching for an product that contains 'angus' && 'fresh'
    */
}

我该如何解决这个问题？

Answer 1

只需放置一个标志来检查您是否拥有所有关键字：

var containsAll;

for (var i = 0; i < products.length; i++) {

    // Initialize flag -> guess that this product is correct
    containsAll = true;
    for (var j = 0; j < keywords.length; j++) {
        if (products[i].indexOf(keywords[j]) === -1) {
            // This keyword is not matched -> incorrect product
            containsAll = false;
            break;
        }
    }

    // All products has been matched
    if (containsAll) hits.push(products[i]);
}

看到这个小提琴：http://jsfiddle.net/eoz1y8n4/

Answer 2

您只需要确保您的产品中包含所有关键字：

function test() {

    var products = [
        'canadian black angus beef fresh',
        'canadian black angus beef frozen',
        'american black angus beef frozen'];

    var keywords = ['angus', 'fresh'];
    var hits = [];

    for (var i = 0; i < products.length; i++) {
        var allKeywordsMatch = true;
        for (var j = 0; j < keywords.length; j++) {

            if (products[i].indexOf(keywords[j]) === -1) {

                allKeywordsMatch = false;
                break;
            }

        }

        if (allKeywordsMatch) hits.push(products[i]);

    }

    alert(hits);
}


test();

Answer 3

首先，您应该看一下.filter() 函数。它遍历一个数组，并根据您设置的条件的真/假返回返回您想要的项目。

MDN's Docs on Array.prototype.filter()

现在，为了确保两个关键字都存在，您可以使用一些标志来指示它是否存在：

var hits = products.filter(function(item) {
    var valid = true;
    for (var i = 0; i < keywords.length; i++) {
        if (item.indexOf(keywords[i]) === -1) {
            valid = false;
        }
    }

    return valid;
});

Answer 4

这个帖子帮助我在搜索中实现了预期的结果，在此基础上，我扩展了上面给出的解决方案，以在对象数组和标题、类别或标签等多个字段中进行搜索。

我用代码发布我的答案，只是为了在任何开发人员在这种情况下需要它时提供帮助。仍然有进一步改进的机会，我希望这对某人有所帮助。

我的要求是：

• 在标题（字符串）、类别（字符串）或标签数组（字符串数组）中查找搜索词。
• 搜索词可以是多个用空格分隔的 Ex. “Es6 IIFE”
• 搜索词可以以任意顺序出现在字符串中的任何位置

我已经为此准备了一个现场演示。您可以运行并检查结果。

我有以下示例对象数组，其中包含一个文章列表。

let articles = [
            { "title": "ES6 — set, map, weak", "category": "ES6", "tags": ["ES6", "Set", "Map", "Weak"] },
            { "title": "JavaScript Modules: From IIFEs to CommonJS to ES6 Modules", "category": "JavaScript", "tags": ["JavaScript", "Modules", "IIFE", "ES6 Modules"] },
            { "title": "A guide to JavaScript Regular Expressions", "category": "JavaScript", "tags": ["JavaScript", "RegExp", "Regular Expressions"] },
        ];

如果有人在搜索框中输入“es6 iife”并按下按钮，它会首先查看标签数组，如果没有找到，则会查看标题和类别。

let output = document.querySelector('#output');
let articles = [
	{ "title": "ES6 — set, map, weak", "category": "ES6", "tags": ["ES6", "Set", "Map", "Weak"] },
	{ "title": "JavaScript Modules: From IIFEs to CommonJS to ES6 Modules", "category": "JavaScript", "tags": ["JavaScript", "Modules", "IIFE", "ES6 Modules"] },
	{ "title": "A guide to JavaScript Regular Expressions", "category": "JavaScript", "tags": ["JavaScript", "RegExp", "Regular Expressions"] },
];

let initialContent = '';
articles.map(article => {
	initialContent += `<li>
		<p><b>Title : </b> ${article.title}</p>
		<p><b>Category : </b> ${article.category}</p>
		<p><b>Tags : </b> ${article.tags}</p>
		</li>`;
});

output.innerHTML = initialContent;

function filter() {
	let searchTerm = document.querySelector('#searchBox').value;
	let keywords = searchTerm.split(' ');
	let articleBySearch = [];

	articles.map((article) => {
		let allKeywordsMatch = true;

		keywords.map((keyword) => {
			if (article.tags.some((tag) => tag.toLowerCase().indexOf(keyword.toLowerCase()) !== -1)) {
				allKeywordsMatch = true;
			} else {
				if (article.title.toLowerCase().indexOf(keyword.toLowerCase()) === -1 && article.category.toLowerCase().indexOf(keyword.toLowerCase()) === -1) {
					allKeywordsMatch = false;
				}
			}
		});

		if (allKeywordsMatch) articleBySearch.push(article);
	});

	// Display Output in the browser
	let htmlContent = '';
	articleBySearch.map(article => {
		htmlContent += `<li>
		<p><b>Title : </b> ${article.title}</p>
		<p><b>Category : </b> ${article.category}</p>
		<p><b>Tags : </b> ${article.tags}</p>
		</li>`;
	});

	output.innerHTML = htmlContent;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}

.example {
	border: 1px solid rgb(245, 28, 118);
	width: 400px;
	margin: 0 auto;
	padding: 1em;
}

.example #searchBox {
	padding: 10px;
	border: 1px solid #cccccc;
}

.example #searchBox:focus {
	padding: 10px;
	border: 1px solid #0059ff;
}

.example button {
	padding: 10px;
	color: #FFF;
	background-color: #0059ff;
	border: 1px solid #0059ff;
}

.example ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.example li {
	border: 1px solid #cccccc;
	padding: 1em;
	margin: 1em 0;
}

<div class="example">
		<input type="text" id="searchBox" placeholder="Type your words to search" />
		<button onClick="filter()">Click to Filter</button>
		<ul id="output"></ul>
</div>