您可以创建一个函数，用<b> Package 器替换''中的字符串。

const highlight = (text) => text.replace(/'([^']+)'/g, "<b>$1</b>")

然后像这样设置innerHTML：

return options.map(({ description }) => 
          <p dangerouslySetInnerHTML={{ __html: highlight(description) }}></p>
        )

如果这些字符串是用户输入，则在执行此操作之前需要清理字符串。
一个二个一个一个
您可以完全避免innerHTML路径，在这种情况下，您需要将每个字符串拆分为片段，然后呈现它们。

const highlight = (text) =>
  Array.from(text.matchAll(/([^']*)'*([^']*)'*([^']*)/g), ([m, p1, p2, p3]) =>
    m ? (
      <>
        {p1}
        <b>{p2}</b>
        {p3}
      </>
    ) : null
  );

并将其渲染为：

return options.map(({ description }) => 
          <p>{highlight(description)}</p>
        )

这可能是最简单的方法，只需从处理加粗文本部分的函数返回一块JSX。
Stackblitz运行代码：https://stackblitz.com/edit/react-ts-gewz6v?file=App.tsx,index.tsx

const options = [
    {
      text: 'this is the text',
      description: "The word 'test' should be bold",
    },
    {
      text: 'this is the text',
      description: "The word 'another-word' should be bold",
    },
  ];

  const boldText = (text) => {
    const termToBold = text.match(/'([^']+)'/)[1];
    const startIndex = text.toLowerCase().indexOf("'");
    return (
      <React.Fragment>
        {text.slice(0, startIndex)}
        <strong>
          {text.slice(startIndex, startIndex + 2 + termToBold.length)}
        </strong>
        {text.slice(startIndex + 2 + termToBold.length)}
      </React.Fragment>
    );
  };

  return (
    <div>
      {' '}
      {options.map((option) => {
        return <p className="text-green-500">{boldText(option.description)}</p>;
      })}
    </div>
  );