javascript 将Next.js链接插入到html字符串中

iq0todco 于 2023-05-16 发布在 Java

关注(0)|答案(2)|浏览(98)

我有一个html字符串，我从API检索。

const htmlString = "<p>Hello World</p>";

我使用react的dangerouslySetInnerHTML在我的页面上显示这些内容。
现在，在显示它之前，我想处理它并在“World”上放置一个链接。但不是<a>标记。我需要一个实际的Next.js <Link>标记。所以一个字符串替换可能无法完成这项工作。
我想在jsx中实现的结果是：

const processed = <p>Hello <Link href="/my-route"><a>World</a></Link></p>

我曾经想过使用React.createElement，但我不确定如何在字符串中插入内容。
有什么想法我可以做到这一点？

JavaScript

来源：https://stackoverflow.com/questions/65090429/inserting-next-js-links-into-an-html-string

2条答案

按热度按时间

nimxete21#

我知道这是一个老问题，但我遇到了这个问题，发现这是一个有趣的问题。
假设来自API的字符串总是"<p>Hello World</p>"，你可以这样做：

const string = '<p>Hello World</p>';
    
const processed = string.replace(/\bWorld\b/, `<Link href="/my-route">$&</Link>`);
    
console.log(processed);

我们使用.replace方法和一个正则表达式来替换“World”，使其本身被<Link>标记包围。.replace允许我们通过在第二个参数中写入$&来指定字符串作为替换。
.替换文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace

赞(0）回复(0）举报 2023-05-16

jaxagkaj2#

Hello<Link href="https://github.com">World</Link>

您不需要在链接内指定另一个锚标记。这个应该没问题

赞(0）回复(0）举报 2023-05-16

我来回答

javascript 将Next.js链接插入到html字符串中

2条答案

相关问题

热门标签

最新问答