Question

我的应用程序中有一个SearchBar，它从该SearchBar的输入开始提供建议。

例如：在SearchBar中键入skrillex将产生以下建议：

skrillex
skrillex kyoto
skrillex cinema
skrillex bangarang
skrillex live

我正在尝试对建议中的单词进行粗体，使其与SearchBar的输入相匹配。

对于上述相同示例，结果将是：

<b>skrillex</b>
<b>skrillex</b> kyoto
<b>skrillex</b> cinema
<b>skrillex</b> bangarang
<b>skrillex</b> live

我当前使用的代码如下：

item.startsWith(this.state.searchText.trim()) ?
                        [<Text style={{ fontWeight: "bold" }}>{this.state.searchText.replace(/\s\s+/g, ' ')}</Text>,
                        <Text>{item.slice((this.state.searchText.replace(/\s\s+/g, ' ').length)).replace(/\s\s+/g, ' ')}</Text>]
                        : (<Text>{item}</Text>)

这适用于大多数情况，但是在某些极端情况下，上面的代码错误地输出了建议。例如，键入skrillex.（点后有一个空格）将输出以下建议：

skrillex. cinema 
skrillex.bangarang
skrillex. live 
skrillex. songs 
skrillex.com

从上面运行我的代码以加粗匹配的单词后，这是输出：

<b>skrillex.</b> cinema 
<b>skrillex.</b>angarang
<b>skrillex.</b> live 
<b>skrillex.</b> songs
<b>skrillex.</b>om

基本上，.slice已将b（bangarang中的skrillex.bangarang和c中的com（skrillex.com ）。

谁能发现错误所在？我也乐于接受任何其他替代方法，因为我认为我的效率不高。

Answer 1

您的代码中的问题是以下表达式：/\s\s+/g, ' '。您正在用空格替换空格。

如果您在Chrome控制台上进行此操作：'skrillex. '.replace(/\s\s+/g, ' ').length，则会看到长度为10，对于 skrillex.com 和 skrillex.bangarang 位于第10位的字符分别为 o 和 a 。

无法正确修剪和删除两个字符串中匹配的单词

1 个答案: