如何在 React.js 应用程序中将字符串中的特定文本加粗

Question

我有一个带有类似于 Google 搜索栏的 React.js 应用程序。用户可以在输入字段中输入一些文本，匹配的数据被提取并显示在输入下方的下拉菜单中。

我的问题：我想将下拉列表中显示的某些单词加粗 - 特别是用户自己没有在输入字段中输入的字符串中的单词。

因此，例如，如果用户在搜索栏中键入“blue”，则其下方将显示数据库中包含“blue”一词的所有数据，即“blue shoes”或“blue sky”。我希望未在搜索栏中输入的单词加粗 --> 天空或鞋子

我的 makeBold 函数不起作用，因为 a) 它在浏览器上显示为<b>blue</b> sky粗体，而不是实际粗体；b）它会加粗用户输入的关键字而不是其他单词）

**keyword由父组件传递给该组件，它包含用户在输入字段中写入的文本

**searchResults包含作为对象数组传递的获取的搜索结果列表

const SearchResults = ({ keyword, searchResults }) => {
  
   const showDropdown = () => {
    return searchResults.map((item) => {
      if (item.term.includes(keyword.toLowerCase())) {
        return (
          <div key={item.term}>
            <ul>
              <li className="input-fields search-results">
                {makeBold(item.searchterm)} ({item.nrResults})
              </li>
            </ul>
          </div>
        );
      }
    });
  };

  const makeBold = (input) => {
      var re = new RegExp(keyword, 'g')
      return (
          input.replace(re, '<b>'+keyword+ '</b>')
      )
  }

  return <div>{keyword ? showDropdown () : null}</div>;
};

所以我的问题是如何在我的字符串中加粗未输入输入字段的特定文本？谢谢！

Answer 1

你需要危险地设置InnerHTML

下面的示例代码。这就是它的作用。

1. 通过 CSS 将所有文本设为粗体
2. 我们的关键字包含在i标签中。这是通过 CSS 规则以正常字体粗细呈现的。

请注意，下面是在 React context/OP 应用程序中使用的代码示例，这在本网站中不起作用。

const makeBold = (item, keyword) => {
      var re = new RegExp(keyword, 'g')
      return (
          item.replace(re, '<i>'+keyword+ '</i>')
      )
  }
  
  console.log(makeBold('blue shoes', 'blue'));

.text-bold {
 font-weight: bold;
}

.text-bold i {
 font-weight: normal;
}

<div className="text-bold">
   <ul>
      <li dangerouslySetInnerHTML={{__html: makeBold(item, 'blue')}} />
   </ul>
</div>

除了危险地设置 html，您还可以使用包react-html-parser。这避免了使用dangerouslySetInnerHTML

那么代码看起来像

import ReactHtmlParser from 'react-html-parser';

<div className="text-bold">
       <ul>
          <li> {ReactHtmlParser(makeBold(item, 'blue')) }
       </ul>
    </div>