React-native自动完成功能使正则表达式遇到特殊字符'()*?'

时间:2019-03-02 21:39:52

标签: javascript regex reactjs react-native

我正在使用react-native-autocomplete-input在React Native中编写一个自动完成输入。到目前为止,一切正常,除非我为输入输入了特殊的正则表达式字符,例如'(',我得到一个错误'无效的正则表达式:missing)或'*',错误为'无效的正则表达式,无可重复

我正在尝试匹配国家/地区名称,并且某些国家/地区带有括号,但是如果用户键入?或*,我不希望该应用崩溃。

以下是搜索名称为的国家/地区的对象的功能

  findCountry = (query) => {
    if (query === '') {
      return [];
    }
    const regex = new RegExp(`${query.trim()}`, 'i');
    return countries.filter(country => country.name.search(regex) >= 0);
  }

我认为错误在那儿。如何设置正则表达式过滤器,使其忽略输入中的特殊字符?

这是自动完成渲染功能:

  render() {

    const { query } = this.state;
    const countries = this.findCountry(query);
    const comp = (a, b) => a.toLowerCase().trim() === b.toLowerCase().trim();
    var { fetchingCountries, handleSearch } = this.props;
    return (
      <View style={styles.container}>
        <Autocomplete
          autoCapitalize="none"
          autoCorrect={false}
          containerStyle={styles.autocompleteInput}
          data={countries.length === 1 && comp(query, countries[0].name) ? [] : countries}
          defaultValue={query}
          onChangeText={text => this.setState({ query: text })}
          placeholder="Search for a Country or Territory"
          renderItem={({ name }) => (
            <TouchableOpacity onPress={() => this.setState({ query: name })}>
              <Text style={styles.queryText}>
                {name}
              </Text>
            </TouchableOpacity>
          )}
        />
        <TouchableOpacity
            style={styles.searchButton}
            onPress={() => handleSearch(query)}
          >
            {
              fetchingCountries
              ? <ActivityIndicator size="small" color="white" />
              : <Text style={styles.buttonText}>Search</Text>
            }
        </TouchableOpacity>
      </View>
    );
  }
}

0 个答案:

没有答案