Split String in verschiedene Textelemente

Question

Ich habe eine Suchleiste oben, die Ergebnisse werden zu einem ziemlich einfachen Listview gerendert. Ich möchte jedes Wort, das in die Suchleiste eingegeben wurde (nicht Groß- und Kleinschreibung), im Suchresultat (String) markiert haben.

Im Moment habe ich eine grundlegende Spaltung tun:

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

und wodurch es zu:

<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 
    } 

Diese Spaltung offensichtlich nicht funktioniert, wenn in zwei Wörter eingeben, die verbunden sind nicht in das Suchergebnis. Wie kann ich das erreichen?

atm sieht es so aus ..

Answer 1

Try this:

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> 
} 

EDIT

ich die erste Zeile auf highlightWord hinzugefügt Wörter mit Satzzeichen zu handhaben .