Javascript 如何根据用户输入将搜索建议部分加粗？

我一直在尝试在React中提出搜索建议。搜索建议将显示为用户类型

您可以在链接上找到代码-

我想要实现的是，出现的建议必须有用户键入的粗体部分

示例-当用户在输入字段中键入“pa”时，我们得到两个建议-木瓜和木瓜

因此，建议应显示为Papaya和Paw Paw

我一直在尝试使用replace方法来实现这一点，方法如下-

let optionName = optionName.replace(userInput,'<b>'+userInput+'</b>')

let optionName=optionName.replace（userInput，“+userInput+”）

这段代码不工作，这是codesandbox链接上的第66行

不使用替换方法的任何其他解决方案也是受欢迎的

---

如果您需要更多信息，请告诉我。

您可以使用危险的HTML

危险的是，React取代了在浏览器DOM中使用innerHTML

而不是：

  <li className={className} key={optionName} onClick={onClick}>
            {optionString}
  </li>

{optionString}

您可以使用：

<li className={className} key={optionName} onClick={onClick}>
                <span dangerouslySetInnerHTML={{__html: optionString}}  />
</li>

以下代码已完成。请查收

<li className={className} key={optionName} onClick={onClick}>
                {_getStyledSuggestion(optionName)}
</li>

---

链接：

您认为使用它安全吗？我已经了解到，它在我们的应用程序中创建XSS漏洞。在本例中，是的，因为您正在将其与您生成的html一起使用，但从未将其与来自外部源的任何内容一起使用。非常感谢@Gowtham。。。真的很感激：）。。Genius如果可能，您能告诉我为什么使用replace方法它不工作吗？

replace

方法返回一个字符串，而不是react元素。如果查看

\u getStyledSuggestion

，它将返回

span

react元素。明白了。。。谢谢@Gowtham…：）

const _getStyledSuggestion = (suggestion) => {
    if(!suggestion.toLowerCase().startsWith(userInput)) {
      return <span>{suggestion}</span>;
    }
    const userInputLength = userInput.length;
    return(
      <span>
        <span className="bold-span">{suggestion.substring(0, userInputLength)}</span>
        {suggestion.substring(userInputLength)}
      </span>
    );
  }

.bold-span {
  font-weight: 700;
}