Javascript 如何使“我的搜索”字段按标记名过滤图像，当输入字段中的名称以“"#&引用；签名

我有一个按名称筛选图像的搜索输入，但现在我希望在键入的单词或字母以“#”开头时，在相同的输入字段中按图像的标记名对过滤器进行签名 但我现在需要考虑“#”符号，因为我的标签名不是以“#”开头的。 它应该使用RegEx生成，以区分大小写，还是有更简单的方法？ 下面是我代码的一部分

<div class="searchButton">
    <input type="text" id="inputValue" placeholder="Search by name or tag">
    <button onclick="goToPage(0,limit)" type="button">Search</button>
</div>

搜寻

还有我的Javascript：

以下是我的对象数组的外观和函数：

arrayPhotos= [{
        "location": "Photos/_DSC0150.jpg",
        "title": "Title001",
        "id": "image_id_001",
        "tag": [ "building", "city", "hotel"]
      },
      {
        "location": "Photos/_DSC0226.jpg",
        "title": "Title002",
        "id": "image_id_002",
        "tag": [ "fruit", "palm"]
      },
      {
        "location": "Photos/_DSC0442.jpg",
        "title": "Title003",
        "id": "image_id_003",
        "tag": [ "building" , "catedral" , "history"]
      }
    ]

    function goToPage(pageNum, count) {

    let filter = $("#inputValue").val().toLowerCase();
    let imgIndex = pageNum * count;
    goToItem(filter,imgIndex, count);

}

function goToItem(filter,imgIndex,count) {
     let imagesToDisplay =  getImageArray(filter, imgIndex, count); /// This is the function where the filtering is happening////
     const imgCount = getImagesCount();
     RenderPagingView(imgCount);
     renderImages(imagesToDisplay);
}


function getImageArray(filter, imgIndexStart, numberOfImages ) {
    let filteredArrayPhotos = [];
    let ofsCntr = 0;

    if ( numberOfImages <1 ) {
        numberOfImages = arrayPhotos.length;
    }

    if ( filter !== '') {

        const tmpFiltered = arrayPhotos.filter(image => image.title.toLowerCase().indexOf(filter) >= 0);
        for ( let arrayKey in tmpFiltered ) {
            const elem = tmpFiltered[arrayKey];
            if ( ofsCntr < imgIndexStart )
            {
                ofsCntr++;
                continue;
            }
            ofsCntr++;

            filteredArrayPhotos.push(elem);
            if ( filteredArrayPhotos.length >= numberOfImages )
                break;
        }
    }else {
        for (let arrayKey in arrayPhotos) {
            const elem = arrayPhotos[arrayKey];
            if (ofsCntr < imgIndexStart ){
                ofsCntr++;
                continue;
            }
            ofsCntr++;

            filteredArrayPhotos.push(elem);
            if ( filteredArrayPhotos.length >= numberOfImages ) break;
        }
    }
    return filteredArrayPhotos;
}

arrayPhotos=[{
“位置”：“照片/_DSC0150.jpg”，
“标题”：“标题001”，
“id”：“image_id_001”，
“标签”：[“建筑”、“城市”、“酒店”]
},
{
“地点”：“照片/_DSC0226.jpg”，
“标题”：“标题002”，
“id”：“image\u id\u 002”，
“标签”：[“水果”、“棕榈”]
},
{
“位置”：“照片/_DSC0442.jpg”，
“标题”：“标题003”，
“id”：“image\u id\u 003”，
“标签”：[“建筑”、“目录”、“历史”]
}
]
函数goToPage（pageNum，count）{
let filter=$（“#inputValue”）.val（）.toLowerCase（）；
让imgIndex=pageNum*count；
goToItem（过滤器、imgIndex、计数）；
}
函数goToItem（过滤器、imgIndex、计数）{
让imagesToDisplay=getImageArray（filter，imgIndex，count）；///这是进行筛选的函数////
常量imgCount=getImageScont（）；
RenderPagingView（imgCount）；
渲染（图像显示）；
}
函数getImageArray（过滤器、imgIndexStart、numberOfImages）{
让FiltereDarray照片=[]；
let of scntr=0；
if（numberOfImages image.title.toLowerCase（）.indexOf（filter）>=0）；
用于（让arrayKey在TMP中过滤）{
常数=TMP过滤[arrayKey]；
如果（ofsCntr=numberOfImages）
打破
}
}否则{
for（让arrayKey在arrayPhotos中）{
const elem=arrayPhotos[arrayKey]；
如果（ofsCntr=numberOfImages）中断；
}
}
返回滤镜照片；
}

也许这样更好：

function getImageArray(filter, imgIndexStart, numberOfImages) {
  let output = [];
  let searchByTag = filter[0] === '#';
  let searchTerm = searchByTag ? filter.slice(1) : filter;

  numberOfImages = numberOfImages < 1 ? arrayPhotos.length : numberOfImages;

  let filteredPhotos = arrayPhotos.filter(searchByTag
    ? image => image.tag.findIndex(a => a.toLowerCase().includes(searchTerm)) >= 0
    : image => image.title.toLowerCase().indexOf(searchTerm) >= 0);

  for (let i = imgIndexStart; i < filteredPhotos.length; i++) {
    output.push(filteredPhotos[i]);

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

  return output;
}

函数getImageArray（过滤器、imgIndexStart、numberOfImages）{ 让输出=[]； 让searchByTag=filter[0]=='#'； 让searchTerm=searchByTag？filter.slice（1）：过滤器； numberOfImages=numberOfImages<1？阵列照片。长度：numberOfImages； 让filteredPhotos=arrayPhotos.filter（searchByTag ？image=>image.tag.findIndex（a=>a.toLowerCase（）.includes（searchTerm））>=0 ：image=>image.title.toLowerCase（）.indexOf（searchTerm）>=0； for（让i=imgIndexStart；i=numberOfImages）{ 打破 } } 返回输出； } 实际上，您希望在开始时根据

filter

变量的值定义filter函数。如果是“标记”搜索，则使用

filter.slice（1）

将

searchTerm

设置为

#

后面的字符串，否则保持原样

---

通过使用标准for loop，可以在正确的位置开始循环索引，从而大大简化循环。

也许这样更好：

function getImageArray(filter, imgIndexStart, numberOfImages) {
  let output = [];
  let searchByTag = filter[0] === '#';
  let searchTerm = searchByTag ? filter.slice(1) : filter;

  numberOfImages = numberOfImages < 1 ? arrayPhotos.length : numberOfImages;

  let filteredPhotos = arrayPhotos.filter(searchByTag
    ? image => image.tag.findIndex(a => a.toLowerCase().includes(searchTerm)) >= 0
    : image => image.title.toLowerCase().indexOf(searchTerm) >= 0);

  for (let i = imgIndexStart; i < filteredPhotos.length; i++) {
    output.push(filteredPhotos[i]);

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

  return output;
}

函数getImageArray（过滤器、imgIndexStart、numberOfImages）{ 让输出=[]； 让searchByTag=filter[0]=='#'； 让searchTerm=searchByTag？filter.slice（1）：过滤器； numberOfImages=numberOfImages<1？阵列照片。长度：numberOfImages； 让filteredPhotos=arrayPhotos.filter（searchByTag ？image=>image.tag.findIndex（a=>a.toLowerCase（）.includes（searchTerm））>=0 ：image=>image.title.toLowerCase（）.indexOf（searchTerm）>=0； for（让i=imgIndexStart；i=numberOfImages）{ 打破 } } 返回输出； } 实际上，您希望在开始时根据

filter

变量的值定义filter函数。如果是“标记”搜索，则使用

filter.slice（1）

将

searchTerm

设置为

#

后面的字符串，否则保持原样

---

通过使用标准for loop，可以在正确的位置启动循环索引，从而大大简化循环。

有效，谢谢，但它不会显示标记名中写入部分单词的其他图像。例如，如果我键入#cat，我会得到标签中包含“cat”的所有图像，但不会得到标签中包含“CATedral”的图像。有办法解决这个问题吗？可以通过一个或多个标签进行搜索（写“猫狗”）并显示包含这些标签的所有图像吗？抱歉，我又看了一遍你的数据。因为标记是一个数组，所以您需要检查标记中的每个项，以查看其中一项是否与搜索项匹配。我已经更新了我的答案。编辑：重新更新了，就是这样，非常感谢你，詹姆斯。你太棒了。这取决于你的物品有多大。如果要通过多次迭代来运行每个图像，这将是一个真正的性能瓶颈，那么这可能是保持线性性能的一个好方法，但是如果您拥有的项目少于1000个，性能的提高可能不值得在构建动态正则表达式的代码中花费大量的精力。@Jefry90您应该在另一个问题中问这个问题，因为您正在超越or的范围