搜索文本的突出顯示問題 - React Native

Question

我有一個 React Native 應用程序，我有一個搜索欄和一個平面列表。 當我在 SearchBar 中搜索某些內容時，必須在列表中突出顯示文本。

單字符串搜索工作正常：

但是現在當我輸入“訪問時間”時，訪問或時間都不會突出顯示

我正在使用 function 來突出顯示文本。 SearchBar 值存儲為 this.state.value ，我將其作為道具傳遞。 我在 Flatlist 的 renderItem 中使用的邏輯如下

getHighlightedText = text => {
  const {value} = this.props
  const parts = text.split(new RegExp(`(${value})`, 'gim'));
  console.log('split:', parts);
  return (
    <Text>{parts.map(part => (
      part.toLowerCase() === value.toLowerCase()) ?
        <Text style = {{backgroundColor: 'red'}}>{part}</Text> :
        part)}
    </Text>
  );
}
return <Text>{getHighlightedText(Desc)}</Text>;

當我搜索一個單詞時，這很好用。 例如，如果我的平面列表有 2 個項目 - “我的狗”和“她的貓”。 如果我的搜索文本是“狗”，那么“狗”會以紅色突出顯示。 但是，如果我搜索“M Dog”或“MD”，則不會突出顯示任何內容。 它必須突出字符而不是單詞。 請幫我修復代碼！！！！

更新了我的代碼

所以我將拆分搜索值，然后嘗試突出顯示每個搜索文本。 如果我輸入“訪問時間”，它會分為“訪問”和“小時”。 由於某種原因，循環僅針對“訪問”而不是“小時”執行。 我的代碼中有一些錯誤。 我只添加了一個 for 循環。 請幫忙：！！ ：

getHighlightedText = text => {
  // search value is split and stored in val array. "list" and "hour"
  const val = value.split(' ');

  // below my item Description is split based on my search
  // terms "visit" n "hour" and then stored in vals array
  const vals = val.map(valu => {.
    var regex = new RegExp(`(${valu})`, 'gim');
    return text.split(regex);
  })

  // vals is merged into 1 array
  const merged = [].concat.apply([], vals);

  // below I am looping for each of my search text 1st
  // "visit" then "hour"         
  for (i = 0; i < val.length; i++) {
    const l = val[i];

    return (
      <Text>{merged.map(part => (
          part.toLowerCase() === l.toLowerCase()) ?
          <Text style = {{backgroundColor: 'red'}}>{part}</Text> :
          part
        )}
      </Text>
    );
  }
}

// using my getHighlightedText in my renderItem
return <Text>{getHighlightedText(Desc)}</Text>;

由於 return 語句，循環正在終止。 “訪問”突出顯示，但“小時”不是因為循環從未達到“小時”。

請幫忙！！！

Answer 1

只需使用string.includes(substring) === 。

因為使用===代表相同的值。 但包括只需要“包含”。

這可能解決了你的問題，試試看。 :)

return (
  <Text>{parts.map(part => (value.toLowerCase().includes(part.toLowerCase())) ?
      <Text style={{backgroundColor: 'red'}}>{part}</Text> : part)}
  </Text>);
}

UPD1：

如果您想達到類似的效果，我建議您將搜索字符串拆分為.split(" "); 到數組，並 map 數組中的每個字符串突出顯示

UPD2：

您不必使用 for 循環：只需將其添加到您的條件中，例如：

{parts.map(part =>
  (part[0].toLowerCase() === valu.toLowerCase()
  || part[1].toLowerCase() === valu.toLowerCase()) // change to your parameter