Javascript 對象數組，根據部分字符串或 substring 搜索匹配

Question

我正在嘗試創建一個搜索框，用戶在其中鍵入搜索查詢，然后下拉菜單開始顯示匹配結果。 我正在嘗試下面的 function，它確實返回基於 quoteCategory、quoteText 或 quoteAuthorName 的匹配值。 問題是它只返回 object 當查詢在 object 的數組中與EXACT單詞匹配時，例如，如果用戶鍵入LOVE ，它將匹配並在下拉列表中顯示結果，但是當用戶鍵入LOVE 任何其他字符時它不會顯示任何結果。

我想要實現的是，如果任何單詞與對象數組中的用戶查詢匹配，它應該返回結果。 基本上匹配應該基於部分字符串或substring。

import React from 'react'

 
export const GlobalSearch = () => {

    const [textQuote, setTextQuote] = useContext({
{
            userId: '123',
            quoteAuthorName: 'Any Two',
            quoteCategory: 'Motivational',
            quoteType: 'textQuote',
            quoteText: 'If there’s no',
            
        },
        {
            userId: '124',
            quoteAuthorName: 'Any One',
            quoteCategory: 'Love',
            quoteType: 'textQuote',
            quoteText: 'If there’s no market, then it may not be one',
        }
)
    const [searchTerm, setSearchTerm] = useState("");

let resultsObj = textQuote.filter(quote =>
            quote.quoteCategory.toLowerCase().includes(searchTerm.toLowerCase())
            || quote.quoteAuthorName.toLowerCase().includes(searchTerm.toLowerCase())
            || quote.quoteText.toLowerCase().includes(searchTerm.toLowerCase())
        );
}

Answer 1

您可以在正則表達式中轉換字符串。 使用香草 Javascript 的示例：

textQuote = [
                {
            userId: '123',
            quoteAuthorName: 'Any Two',
            quoteCategory: 'Motivational',
            quoteType: 'textQuote',
            quoteText: 'If there’s no',
            
        },
        {
            userId: '124',
            quoteAuthorName: 'Any One',
            quoteCategory: 'Love',
            quoteType: 'textQuote',
            quoteText: 'If there’s no market, then it may not be one',
        }
];
let searchTerm = "love is blind";

let searchArray = searchTerm.trim().split(" ");

let re = new RegExp(searchArray.join("|"), "i");

let resultsObj = textQuote.filter(quote =>
    re.test(quote.quoteCategory) ||
    re.test(quote.quoteAuthorName) ||
    re.test(quote.quoteText)
);

document.write(JSON.stringify(resultsObj));

Output：

[{"userId":"124","quoteAuthorName":"Any One","quoteCategory":"Love","quoteType":"textQuote","quoteText":"If there’s no market, then it may not be one"}]

Answer 2

可以試試js的搜索方式

更新=====

function findWordByReg(word, str) {
  return RegExp('\\b'+ word +'\\b').test(str)
}



let resultsObj = textQuote.filter(q=>
            findWordByReg(q.quoteCategory.toLowerCase(),searchTerm.toLowerCase())
            || findWordByReg(q.quoteAuthorName.toLowerCase(),searchTerm.toLowerCase())
            || findWordByReg(q.quoteText.toLowerCase(),searchTerm.toLowerCase())
        );