由多个字符串组成的Javascript筛选器数组

首先，您应该了解.filter()函数。它遍历一个数组，并根据您设置的条件的true/false返回来返回您想要的项。

MDN在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;
});

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

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/

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

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();

这个线程帮助我在搜索中达到了预期的结果，在此基础上，我将上面给出的解决方案扩展到了对象数组和多个字段中的搜索，如标题、类别或标签。

我用代码发布了我的答案，只是为了在这种情况下，如果任何开发人员需要帮助的话。尽管如此，仍有进一步改进的机会，我希望这将对某些人有所帮助。

我的要求是：

• 在标题（字符串）、类别（字符串）或标记数组（字符串数组）中查找搜索词
• 搜索词可以是多个空格分隔的示例。"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>