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

【问题标题】：How to make the part of search suggestion bold based on the user input?如何根据用户输入将搜索建议部分加粗？
【发布时间】：2021-07-27 22:47:53
【问题描述】：

我一直在尝试在 React 中开发搜索建议。搜索建议将在用户输入时显示。

您可以在链接上找到代码 - https://codesandbox.io/s/heuristic-shaw-rqp2k?file=/src/Autocomplete.js

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

示例 - 当用户在输入字段中输入“pa”时，我们会得到两个建议——Papaya 和 Paw Paw

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

我一直在尝试使用 replace 方法通过执行以下操作来实现这一点 -

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

这段代码不起作用，即代码和框链接上的第 66 行。

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

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

【问题讨论】：

标签： javascript arrays reactjs search replace

【解决方案1】：

下面的代码成功了。请检查。

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

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>
    );
  }

CSS：

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

链接：https://codesandbox.io/s/angry-sea-97k4w?file=/src/Autocomplete.js:1495-1898

【讨论】：

非常感谢@Gowtham ...真的很感激:) ..天才
如果可以的话，能否请您告诉我为什么使用替换方法不起作用？
replace 方法返回一个字符串，而不是一个反应元素。如果您查看 _getStyledSuggestion，它会返回 span 反应元素。
知道了...谢谢@Gowtham... :)

【解决方案2】：

您可以使用危险的SetInnerHTML。

dangerouslySetInnerHTML 是 React 在浏览器 DOM 中使用 innerHTML 的替代品

代替：

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

你可以使用：

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

【讨论】：

您认为使用它安全吗？我读到它会在我们的应用程序中创建 XSS 漏洞
在这种情况下是的，因为您将它与您生成的 html 一起使用，但从不将它与来自外部来源的任何内容一起使用。