Реагировать на подсветку и нарезать длинный текст - PullRequest
Новая
       5

Реагировать на подсветку и нарезать длинный текст

0 голосов
/ 02 апреля 2020

Давайте представим, что у меня длинный текст: 

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

В документах есть метод очистки, но я не уверен, как его можно использовать? Sanitize - Process each search word and text to highlight before comparing (eg remove accents); signature (text: string): string

Вот пример:

enter image description here

Вот фрагмент моего кода: 

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

Каков наилучший подход для достижения этого?

1 Ответ

1 голос
/ 03 апреля 2020

Из приведенной выше библиотеки (act-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({});
...