如何将从 object 的数组中获取的一部分文本包装在 span 标记中？

Question

给定 json object 如下：

const data = [
  {
    id: "text1",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin odio a luctus ornare. Pellentesque nisl tis tellus nec, dapibus turpis. In hac habitasse platea vitae.",
  },
];

如果我想包含在<span>标签内获取的部分文本，例如：

<p>Lorem ipsum <span>dolor sit amet</span>. </p>

我该怎么做呢？

Answer 1

根据您的评论，我想您知道应该将哪些文本放在 span 下

const data = [
  {
    id: "text1",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin odio a luctus ornare. Pellentesque nisl tis tellus nec, dapibus turpis. In hac habitasse platea vitae.",
  },
];

const textToSpan = 'dolor sit amet';

在这种情况下，您可以拆分字符串并使用如下内容进行渲染：

const aText = data.text.split(textToSpan);

const aTextRender = aText.reduce((result, t) => {
  if (result.length) {
    result.push(<span>{textToSpan}<span>);
  }
  result.push(t);
  return result;
}, [])

return (
  <p>
    {aTextRender}
  <p>
);

代码虽然没有测试：o

Answer 2

这应该做你的工作！

    data[0].text.replace("dolor sit amet", "<span>dolor sit amet</span>");