Javascript 如何使用JSX突出显示字符串中的匹配项？

我有一个自定义的自动完成功能，因此当您键入时，它将根据输入值显示一个建议列表。在列表中，我想加粗与输入值相同的字符

因此，如果我有一个建议列表：“鳄鱼”、“利马”、“莱姆”，然后我输入“李”，那么建议如下所示：

• alligator
• lima
• 李我

我的jsx文件中有一个简单的

map

：

<ul>
  {matches.map(function(match, idx){
    let re = new RegExp(value, 'g');
    let str = match.replace(re, '<b>'+ value +'</b>');
    return <li key={idx}>{str}</li>
  })}
</ul>

---

您只需将映射器作为子对象附加到自动完成组件中

<CustomAutocomplete>
  <ul>
    {
      matches.map(function(match, idx){
        let re = new RegExp(value, 'g');
        let str = match.replace(re, '<b>'+ value +'</b>');
        return (<li key={idx}>{str}</li>)
      })
    }
  </ul>
</CustomAutocomplete>

{
matches.map（函数（match，idx）{
设re=newregexp（值'g'）；
设str=match.replace（re，“+值+”）；
返回（
{str}
）
})
}

编写自己的突出显示代码可能会导致兔子洞。在我的回答中，我假设只有简单文本（字符串中没有HTML，没有字符集边缘大小写）和有效的非转义

RegExp

模式字符串

---

您可以构建一个新数组，而不是构建一个新字符串，在其中可以放置JSX

:

在react中也一样，您如何在react中显示自动填充的数据？您可以将此

ui>li

作为子项附加到组件中。不确定我是否可以这样做，因为我在条件语句下有

ul

部分，我已经更新了上面的问题。这很好，尽管有一个问题。如果其中一个建议是“Ms.Adams”，而输入是“Ms”。理想情况下，

Ms

和

Ms

应该突出显示，我如何修改

拆分

。没有必要，但我想知道解决方法。@medev21您可以将

I

选项添加到正则表达式中（我也用它更新了答案）。唯一的缺点是，我用用户键入的字符串替换匹配的字符串。@medev21我在保留原始大小写的地方添加了一个改进的函数。@medev21通过实用函数和组件，保留突出显示字符串的大小写并转义正则表达式，再次得到了改进。

<CustomAutocomplete>
  <ul>
    {
      matches.map(function(match, idx){
        let re = new RegExp(value, 'g');
        let str = match.replace(re, '<b>'+ value +'</b>');
        return (<li key={idx}>{str}</li>)
      })
    }
  </ul>
</CustomAutocomplete>

render() {
  // No need to wrap list items in an extra element!
  return [
    // Don't forget the keys :)
    <li key="A">First item</li>,
    <li key="B">Second item</li>,
    <li key="C">Third item</li>,
  ];
}