Javascript 部分字符串搜索和突出显示-反应本机

下面是我用来突出显示列表中搜索值的代码。我使用了一个函数

getHighlightedText

，并将此函数传递到我的列表中

getHighlightedText = text => {
  // search value stored in this.state.value
  const { value } = this.props;
  const space = new RegExp('\\b\\B\\W+\\B\\b]', 'g');
  // value is split
  const findWords = value.split(space).map(fw => fw.toLowerCase());
  console.log('split the value:', findWords)
  // text is split
  const textWords = text.split(space);
  console.log('split the search:', textWords)

  // each word in the array is mapped
  const output = textWords.map(word => {
    const lower = word.toLowerCase();
    // logic to check search value includes word
    if (findWords.includes(lower)) {
      return <Text style = {{backgroundColor: 'coral'}}>{word}</Text>
    } else {
      return <Text>{word}</Text>
    }
  });
  return <Text>{output}</Text> 
}

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

getHighlightedText=text=>{
//存储在此.state.value中的搜索值
const{value}=this.props；
const space=new RegExp（'\\b\\b\\W+\\b\\b]'，'g'）；
//价值被分割
const findWords=value.split（space.map）（fw=>fw.toLowerCase（））；
log（'splitthevalue:'，findWords）
//文本被拆分
const textWords=text.split（空格）；
log（'splitthesearch:'，textWords）
//数组中的每个单词都被映射
const output=textWords.map（word=>{
const lower=word.toLowerCase（）；
//检查搜索值的逻辑包括单词
if（FindWord.includes（下））{
返回{word}
}否则{
返回{word}
}
});
返回{output}
}
//在renderItem中使用我的getHighlightedText
返回{getHighlightedText（Desc）}；

此逻辑仅适用于完整字符串，而不适用于部分字符串。在下图中，“json”和“url”正确高亮显示。但是当我输入“Noti”而不是“Notification”时，这个字符串并没有突出显示

---

我怎样才能做到这一点？？任何想法请参见

更改了我的突出显示功能，效果良好

<Text numberOfLines={3} 
  style = {
    [subTitle, {
      fontSize: normalizeFontSize(14),
      lineHeight: normalizeLineHeight(14)
    }]
  }>
  {getHighlightedText(alert)}
</Text>

{getHighlightedText（警报）}

突出显示功能：

getHighlightedText = text => {
  // search text user inputs
  const {value} = this.props;

  if (value == "" || value == null || value == 0) {
    return <Text>{text}</Text>
  } else {
    // split the search value
    const words = value.split(/\s+/g).filter(word => word.length);
    // join if search value has more than 1 word
    const pattern = words.join('|');

    const re = new RegExp(pattern, 'gi')
    const children = [];

    let before, highlighted, match, pos = 0;
    // match using RegExp with my text
    const matches = text.match(re);

    if (matches != null) {
      // loop all the matches
      for (match of matches) {
        match = re.exec(text)

        if (pos < match.index) {
          // before has all the text before the word
          // that has to highlighted
          before = text.substring(pos, match.index);

          if (before.length) {
            children.push(before)
          }
        }
        highlighted = <Text style=
            {{backgroundColor: 'coral'}}>{match[0]}</Text>
        // text is highlighted
        children.push(highlighted);

        pos = match.index + match[0].length;
      }
    }
    if (pos < text.length) {
      // text after the highlighted part
      const last = text.substring(pos);
      children.push(last);
    }
    // children array will have the entire text
    return <Text>{children}</Text>
  }
}

getHighlightedText=text=>{
//搜索文本用户输入
const{value}=this.props；
如果（值=“”| |值==null | |值==0）{
返回{text}
}否则{
//拆分搜索值
const words=value.split（/\s+/g）.filter（word=>word.length）；
//如果搜索值超过1个单词，则加入
const pattern=words.join（“|”）；
const re=new RegExp（模式'gi'）
const children=[]；
让在前面，突出显示，匹配，位置=0；
//使用RegExp与我的文本匹配
常量匹配=text.match（re）；
如果（匹配！=null）{
//循环所有的比赛
对于（匹配的匹配）{
match=re.exec（文本）
如果（位置<匹配索引）{
//before在单词前面有所有的文本
//必须强调这一点
before=text.substring（pos，match.index）；
如果（长度前）{
儿童。推（前）
}
}
突出显示={匹配[0]}
//文本突出显示
儿童。推（突出显示）；
pos=match.index+match[0]。长度；
}
}
如果（位置<文本长度）{
//突出显示部分后的文本
const last=文本子字符串（pos）；
儿童。推（最后）；
}
//子数组将包含整个文本
返回{children}
}
}

您好，它看起来比上一个问题更好！这个问题是，include并不像你们想的那个样工作，上次我用include是，但这次你们的是。数组include与元素类似

if（a==b[0]）

比较，所以问题是希望这能有所帮助。类似

findWords.findIndex（element=>element.includes（“substring”））

的情况下，如果它

-1

（没有找到return-1）嗨，是的，我已经更改了几次代码，但遗憾的是没有一个代码能够正确工作：D我尝试了findIndex方法，但没有成功。如果我的条件类似于myArray.findIndex（element=>element.includes（“Catalina”）），那么现在就使用myArray[dog，cat，car]。这不起作用。我尝试了这个

myArray.findIndex（element=>element.includes（“ca”）

可能返回正确的结果。未找到时返回-1。所以你可以像我说的那样设置条件，如果它返回

-1

有这个词。如果（myArray.findIndex（element=>element.includes（“ca”））>-1{return…}或者{return…}没有那么混乱，我知道：在我的代码中，我已经在myArray中存储了我的搜索值。因此，如果我的搜索值是“猫狗”，那么我的数组将有[“猫”，“狗”]。现在我用这个数组检查我的列表，而不是相反。