javascript - react 突出显示和切片长文本

Question

让我们想象一下我有一个很长的文本:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

我输入了字母s，这些文本中的许多字母都突出显示了。我想将其切片并显示突出显示的字母。

我使用react-native-highlight-words来突出显示单词。 https://www.npmjs.com/package/react-native-highlight-words

文档中有一个清理方法，但我不确定如何使用它？清理 - 在比较之前处理每个搜索词和文本以突出显示(例如删除重音符号)；签名(文本:字符串):字符串

示例如下:

这是我的一段代码:

  <Highlighter
    highlightStyle={{ backgroundColor: 'yellow'}}
    searchWords={[searchWords]}
    textToHighlight={description}
  />

实现这一目标的最佳方法是什么？

Answer 1

从上面的库(react-native-highlight-words)中，您将仅突出显示文本。但是要获得突出显示的字符，您需要使用正则表达式提取单词

工作示例:https://snack.expo.io/@msbot01/graceful-blueberries

import React, { Component } from 'react';
import { Text, View, StyleSheet, ScrollView, FlatList } from 'react-native';
import Constants from 'expo-constants';
import Highlighter from 'react-native-highlight-words';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      textSearch: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
      higightedTexts:''
    }
  }

  componentDidMount(){
    this.findSearchedText()

  }

  findSearchedText(){
    var regex = RegExp("s");
    var wordList = this.state.textSearch.split(" ").filter((elem, index)=>{
        return regex.test(elem);
    })

    this.setState({
      higightedTexts:wordList 
    })
  }

  viewForSearchedText(){
    var array = []
    for(var i=0; i<=this.state.higightedTexts.length; i++){
      var b = <View><Text>{this.state.higightedTexts[i]}</Text></View>
      array.push(b)
    }
    return array
  }






  render() {
    return (
      <View style={{ flex: 1 }}>
        <Highlighter
          highlightStyle={{backgroundColor: 'yellow'}}
          searchWords={['s']}
          textToHighlight= {this.state.textSearch}
        />
        <View>
          <Text style={{color:'green', marginTop:20}}>Higlighted Texts</Text>
          {
            this.viewForSearchedText()
          }
        </View>
      </View>
    );
  }
} 

const styles = StyleSheet.create({});