hello. There is a bug if the text to higliht start with a "+" fo

I tested with this: <div class="highlight highlight-source-js notranslate position

buf if word start with "+" char about react-native-highlight-words HOT 6 OPEN

clauderic commented on September 14, 2024

buf if word start with "+" char

from react-native-highlight-words.

Comments (6)

CyxouD commented on September 14, 2024 7

autoEscape={true} helps to avoid these types of errors if you don't need to process regular expressions, maybe make it true by default?

from react-native-highlight-words.

alainib commented on September 14, 2024 2

hello, the problem is when searchWords contain "+"
this is how i get the error :

  this.state.valueForModal = "+ Lab"; // the content is filled from user input searching for string starting with '+ lab'
  const display = "+ Laburnocytisus adami" ;
 
 <Highlighter
                  highlightStyle={thisstyles.highlighter}
                  searchWords={[this.state.valueForModal]}
                  textToHighlight={display}
                  style={thisstyles.fontSize15}
                />

from react-native-highlight-words.

fungilation commented on September 14, 2024

Tested "+ Laburnocytisus adami" as textToHighlight prop, cannot reproduce.

from react-native-highlight-words.

lytieunuong1 commented on September 14, 2024

I got that bug when I type "+" or "*" into the search words.
I think you should catch some special characters in Regular expression
For hotfix we can replace the search key before assign to the searchWords like the code bellow:

let searchKey = props.searchKey ? props.searchKey : ""
  const specialKey=["[", "?", "+", "*"]`
  for(i = 0 ; i < specialKey.length; i++ ) {
    searchKey = searchKey.replace(specialKey[i],'\\'+specialKey[i])
  }

from react-native-highlight-words.

fungilation commented on September 14, 2024

I tested with this:

<Highlighter
  style={{ color: '#888', fontSize: 13, fontFamily: 'System', padding: 10 }}
  highlightStyle={{ backgroundColor: '#FEF3A2' }}
  numberOfLines={3}
  ellipsizeMode="middle"
  searchWords={["+ Lab", "* Lab", "? Lab", "[ Lab"]}
  textToHighlight={"+ Laburnocytisus adami"}
  autoEscape={true}
/>

I get:

No error, so I still can't reproduce. My env:

React Native 0.57.0

> react-native info

  React Native Environment Info:
    System:
      OS: Windows 10
      CPU: x64 Intel(R) Core(TM) i7-8700K CPU @ 3.70GHz
      Memory: 4.65 GB / 15.95 GB
    Binaries:
      Yarn: 1.12.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
      npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD

from react-native-highlight-words.