javascript - 如何将句子输出到 JSX，同时将与给定单词匹配的单词着色为不同的颜色？

Question

我有以下代码:

    export default function App() {
      const defaultText = "Your partner for software innovations";
      const colorText = "software";

      const result = defaultText.split(" ").map((txt) => txt);
      return <div className="App">{result}</div>;
    }

defaultText 是我来自后端的数据。

colorText 是一个应该着色的单词。

所以我正在尝试执行以下操作。我想通过 defaultText 进行映射，如果 txt === colorText，则以红色显示该单词，因此最终结果将显示为“您的软件创新合作伙伴”红色的“软件”一词​​。

我可以轻松映射 defaultText 如您所见，但我无法理解如何实现该过滤逻辑。

Answer 1

您可以将文本分成几部分，然后向文本添加一个类以突出显示。

伪代码:

const defaultText = "Your partner for software innovations";
const colorText = "software";

const segments = defaultText.split(colorText);

return (
  <div className="App">
    {segments.map((segment, index) => (
      <Fragment key={index}>
        <span>{segment}</span>
        {(index !== segments.length - 1) && (<span>{colorText}</span>)}
      </Fragment>
    )}
  </div>
);

和CSS:

span.highlight {
  color: red;
}

如果您希望关键字无论字母大小写如何都匹配，则可以在分割时使用RegEx。