我将matchingText改为一个数组，您可以在其中放置所有想要匹配的文本。然后在RegExp中，我们将textToMatch与|连接。这将匹配“Aloe Vera”或“skin”。

function App() {
  const highlightMatchingText = (text, textToMatch) => {
    let matching;

    const matchRegex = RegExp(textToMatch.join('|'), "ig");

    // Matches array needed to maintain the correct letter casing
    const matches = [...text.matchAll(matchRegex)];
    console.log(matches);
    return text.split(matchRegex).map((nonBoldText, index, arr) => (
      <React.Fragment key={index}>
        {nonBoldText}
        {index + 1 !== arr.length && <mark>{matches[index]}</mark>}
      </React.Fragment>
    ));
  };
  return (
    <p>
      {highlightMatchingText(
        "The aim of this study was to determine in vitro the potential of Aloe Vera juice as a skin permeation enhancer; a secondary aim was to probe the extent to which Aloe Vera itself permeates the skin. Saturated solutions of caffeine, colchicine, mefenamic acid, oxybutynin, and quinine were prepared at 32 degrees C in Aloe Vera juice and water (control) and used to dose porcine ear skin",
        ["Aloe Vera", "skin"]
      )}
    </p>
  );
}

在此处检查live version
希望这对你的项目有帮助！

试试这个：https://www.npmjs.com/package/react-multi-highlightreact组件根据每个配置突出显示文本中的多个单词

import Highlighter from 'react-multi-highlight';

export default () => (
  <Highlighter
    config={[
      {
        word: 'and',
        className: 'a',
        style: {
          color: 'blue',
        },
      },
      {
        word: 'nd light-off tim',
        className: 'c',
        style: {
          textDecoration: 'underline',
          textDecorationColor: 'green',
        },
      },
    ]}
    highlightTag="span"
    normalTag="span"
    text="Life, thin and light-off time and time again"
  />
);