时间戳

首页 > 解决方案 > 如何使用 ReactJS 在 javascript 中搜索段落中的多个关键字并用不同颜色突出显示每个关键字？

javascript - 如何使用 ReactJS 在 javascript 中搜索段落中的多个关键字并用不同颜色突出显示每个关键字？

问题描述

我想从多组文本中搜索一个或多个关键字，并尝试用不同的颜色突出显示每个关键字。我正在使用 ReactJS redux。

我尝试使用正则表达式做同样的事情，但我得到了我想要的相同结果。当我只搜索一个关键字时，它工作正常。但是当我搜索多个关键字时，它会多次显示相同的关键字。

请帮助用不同的颜色突出显示不同的关键字。我无法实现它。

export default class SolrSearchComponent extends Component {
render(){
      var allText = "Sea and Sky is your one-stop source for all things related. Sea and Sky is your one-stop source for all things related.";

      var KeywordsTosearch = ["Sea", "sky"];

      var parts = allText.split(new RegExp(`(${KeywordsTosearch.join("|")})`, "gi"));

      var tempKeyword=[];

        tempKeyword.push(
          <span>
            { parts.map((part, i) =>
              KeywordsTosearch.map((keyword,i) =>
             <span key={i} style={  part.toLowerCase() === keyword.toLowerCase() ?  { fontWeight: 'bold', color: 'red' } : {} }>
                { part }
              </span>)
            )
            }
          </span>
        );
        retrun(
        <div>
        {tempKeyword}
        </div>
        )
    }
}

我期望结果中以不同颜色突出显示多个关键字，并且文本不应多次打印。

如果我正在搜索“Sea Sky”，它会在结果中显示以下内容：

Sea and Sky Sea and Sky 是您所有相关事物的一站式来源，是您所有相关事物的一站式来源。Sea and Sky Sea and Sky 是您所有相关事物的一站式来源，是您所有相关事物的一站式来源。

我想要这样的结果：

Sea and Sky 是您所有相关事物的一站式来源。Sea and Sky 是您所有相关事物的一站式来源。

注意：海应该是红色文本，天空应该是蓝色文本。

标签： javascripthtmlreactjs

解决方案

您可以先定义一个对象来保存每个关键字的颜色，然后再使用它

const styles = {
  "sea": {
    fontWeight: "bold", color: "red"
  },
  "sky": {
    fontWeight: "bold", color: "blue"
  }
}

// use it
<span style={styles[keyword] || {}}>...</span>

零件和关键字搜索的下一个嵌套循环导致随机重复的文本

parts.map((part, i) => KeywordsTosearch.map((keyword,i) => { })

由于“KeywordsTosearch”已经完成了拆分句子的工作，您只需循环“parts”即可应用样式

var tempKeyword = [];
tempKeyword = parts.map((part, i) =>
  <span
    key={i}
    style={this.getStyle(part)}>
    {part}
  </span>
)

请参阅工作示例https://codesandbox.io/s/recursing-turing-7m56b

推荐阅读