reactjs - 反应用标签替换 URL

Question

我有一个带有字符串道具的文本组件。字符串 prop 只是可能包含或不包含 URL 的句子。Text 组件如何返回包含字符串 prop 的 ap 标签，并将 URL 替换为标签？

所以<Text str="go to example.com" />应该返回<p>go to <a target="blank" href="https://example.com">example.com</a></p>

我想我必须对字符串 prop 中的 URL 进行正则表达式匹配，用标签替换这些子字符串，然后将该字符串 prop 正确放置<p dangerouslySetInnerHTML={here} />。

有没有更好的办法？

score 1 · Accepted Answer

如果我正确理解了这个问题，您可以使用简单的正则表达式来解析 html：

const TextComponent = ({ stringProp }) => {
  const parsed = stringProp.replace(/<[^>]*>?/gm, '');
  return <p>{parsed}</P>
}

1 回答 1