搜索文本的突出显示问题 - React Native

Question

我有一个 React Native 应用程序，我有一个搜索栏和一个平面列表。当我在 SearchBar 中搜索某些内容时，必须在列表中突出显示文本。

单字符串搜索工作正常：

但是现在当我输入“访问时间”时，访问或时间都不会突出显示

我正在使用一个函数来突出显示文本。 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”或“M D”，则不会突出显示任何内容。它必须突出字符而不是单词。请帮我修复代码！！！！！！

更新了我的代码

所以我将拆分搜索值，然后尝试突出显示每个搜索文本。如果我输入“访问时间”，它将分为“访问”和“小时”。 由于某种原因，循环仅针对“访问”而不是“小时”执行。我的代码中有一些错误。我只添加了一个 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(" ");拆分为数组，并将数组中的每个字符串映射到突出显示

UPD2：

您不必使用 for 循环！只需将其添加到您的条件中，例如：

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