如何使用JavaScript在我的图像库中实现多标签搜索？

我有一个带有搜索输入的图像库，用户可以在其中键入图像标题或图像标签并搜索匹配项。我现在需要能够有多个标签搜索。例如，如果我键入：#tree->结果将是所有标记中有“tree”的图像（特别是），而不是部分包含单词的图像，因为标记搜索应该是特定的。我需要能够键入：#tree，#sky->输出所有包含“tree”和“sky”的图像。到目前为止，我的代码只执行第一个示例

HTML:

<div class="searchBtn">
    <input type="text" id="inputValue" placeholder="Search by name or #tag">
    <button onclick="Search()" type="button">Search</button>
</div>

搜寻

JS:

let filterSearch=$（“#inputValue”）.val（）.toLowerCase（）；
函数findAlimages（筛选、启动、项查询）{
让照片=[]；
让tagSign=“#””；
const searchByTag=过滤器搜索[0]==标记符号；
让searchCondition=searchByTag？filterSearch.slice（1）：过滤器；
让newFiltered=imageArrayPhotos.filter(
searchByTag？image=>image.tag.indexOf（searchCondition）>=0:
image=>image.title.toLowerCase（）.indexOf（searchCondition）>=0；
for（让i=start；i=numberOfImages）{
打破
}
}
归还照片；
}

---

我可以使用

上的回调函数来完成它吗？让newFiltered=imageArrayPhotos.filter（function（）{}）

遍历所有可能的函数？

为什么不使用

regex

。检查这是否可行

让searchByTag=true；
让imageArrayPhotos=[{
标签：'树'，
标题：“树”
},
{
标签：'森林'，
标题：“树”
},
{
标签：“天空”，
标题：“天空”
},
{
标签：'鸟'，
标题：“鸟”
},
{
标签：'水树'，
标题：“天空”
},
];
让过滤器搜索=“”；
让searchCondition=''；
let模式；
设newFiltered=[]；
函数搜索（）{
newFiltered=[]；
过滤器搜索=“”；
搜索条件=“”；
filterSearch=$（“#inputValue”）.val（）；
filterSearch=filterSearch.split（'，'）；
//searchCondition=searchByTag？filterSearch.slice（1）：过滤器；
//newFiltered=imageArrayPhotos.filter（检查过滤器）；
过滤器搜索forEach（函数（项）{
项目=$.trim（项目）；
searchByTag=项目[0]==“#”；
pattern=newregexp（“^”+$.trim（item）.replace（/#/g），）+“$”；
让itemData=imageArrayPhotos.filter（检查过滤器）；
如果（itemData.length>0）{
newFiltered=newFiltered.concat（itemData）；
}
});
console.log（newFiltered）；
}
函数检查过滤器（图像）{
返回searchByTag？pattern.test（image.tag）：
模式.测试（图像.标题）
}

搜寻

嗨，你能解释一下正则表达式吗？

（/，/g，“|”）和
（/，/g，”）
的确切含义是什么？就好像我把两种模式都设置为titlePatt一样，但它对标记不区分大小写（它会找到部分包含单词的标记，我需要它是特定的）。感谢您花时间更新代码和那些正则表达式，将
，
替换为
|
，因为正则表达式将管道视为表达式的分离。您正在将输入文本转换为lower，因此它将两个输入都作为lower并进行匹配。但是，我如何将其作为标记的regexp，专门搜索该标记，并排除包含该单词部分内容的标记，例如：#dog->dog，而不是#dog->dog，underdog等…您好@Rohit.007，你知道我如何将它作为标记的regexp，专门搜索该标记，并排除那些包含该单词部分内容的标记，例如：#dog->dog，而不是#dog->dog，underdog等等……这些已经被处理过了。这将找到确切的标记，如果您找到#dog，它将只在标记中找到#dog而不是#underdog，我已经添加了#tree和#watertree的示例
let filterSearch = $("#inputValue").val().toLowerCase();

function findAllImages(filter, start, itemsCount) {  
    let photos = [];
    let tagSign = "#";
    const searchByTag = filterSearch [0] === tagSign;
    let searchCondition = searchByTag ? filterSearch.slice(1) : filter;

       let newFiltered = imageArrayPhotos.filter(
    searchByTag ? image =>  image.tag.indexOf(searchCondition) >= 0 :
        image => image.title.toLowerCase().indexOf(searchCondition) >= 0);

for (let i = start; i < newFiltered.length; i++) {
    photos .push(newFiltered [i]);

    if (photos.length >= numberOfImages) {
        break;
    }
}
return photos ;
}