将String拆分为各种Text元素

Question

我在Top上有一个搜索栏，结果会被渲染成一个相当基本的Listview。我希望在搜索结果（字符串）中突出显示在搜索栏中输入的每个单词（不区分大小写）。

目前我做了一个基本的分裂：

let split = question.title.split(this.state.searchInput);

并将其呈现给：

<Text style={styles.title}>
 {split[0]}
</Text>
  {split.length > 1 ?
    <View style={{flexDirection: 'row'}}>
      <Text style={styles.fatTextResult}>
       {this.state.searchInput}
      </Text>
      <Text style={styles.title}>
       {split[1]}
      </Text>
     </View>
   :
     null
  }

当键入搜索结果中未连接的2个单词时，此分割显然不起作用。我怎么能做到这一点？

atm看起来像这样......

Answer 1

试试这个：

highlightWord( word , search ){

    var newWord = word.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"");   

    if ( search.toLowerCase().indexOf(newWord.toLowerCase()) != -1 ){ // if word in question
        // highlight it
        return <Text style={{fontWeight:'bold'}}>{word}</Text>
    }
    else{
        return <Text>{word}</Text>
    }
}

renderRow( question ){

    let split = question.title.split(' '); //divide question in words
    textViews = [];
    for (var i=0 ; i<split.length ; i++){
        var word = split[i]; // get words
        textViews.push( highlightWord(word,this.state.searchInput) );
    }

    // return all words together (highlighted or not)
    return <View style={{flexDirection:'row'}}>{ textViews }</View>
}

修改

我在highlightWord添加了第一行来处理带有标点字符的单词。