Question

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

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

并且请帮助突出显示具有不同颜色的不同关键字。我无法实现。

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

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

如果我正在搜索“海天”，则会在结果中显示以下内容：

海洋与天空海洋与天空是所有相关事物的一站式资源，也是您所有相关事物的一站式资源。海洋与天空海洋与天空是您所有相关事物的一站式资源，也是您一站式所有相关事物的资源。

我想要这样的结果：

海洋和天空是您所有相关事物的一站式来源。海洋与天空是您所有相关事物的一站式来源。

注意：海洋应为红色文字，天空应为蓝色文字。

Answer 1

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

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

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

1 个答案: