如何创建一个帖子，内容中的网络链接将起作用？答案

【问题标题】：How to create a post where the web links present in the content will be functional?如何创建一个帖子，内容中的网络链接将起作用？
【发布时间】：2022-08-19 23:25:04
【问题描述】：

我创建了一个solid-js 应用程序，可以在其中创建帖子。我想确保当用户在他的帖子中插入一个 url 链接时，这个链接可以被使用，从而在点击时导致另一个网页。因此，我希望我的应用程序能够识别内容中的 url 并将其转换为链接。但是，我不知道该怎么做，目前当用户在他的帖子中插入一个 url 地址时；该地址在帖子中显示为普通文本，即黑白显示，无处可寻。我尝试在互联网上搜索解决方案，但一无所获。这是我的solid-js代码：

<Show when={merged.content}>
        <section className=\"px-4 py-4 flex flex-col space-y-2\">
          <p className=\"text-[.9375rem] text-gray-700 dark:text-gray-200\">
            {merged.content}
          </p>
        </section>
      </Show>

期待您的解答，谢谢！

标签： javascript solid-js

【解决方案1】：

这是一个不平凡的问题。您可以做的是基于正则表达式字符串解析动态构建一个实体组件。这是我将如何做到的一些代码：

<div>
    <For each={merged.content.split(" ")}>
    {
        (word) => {
            if(word.match(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/gi)) {
                return <a href={word}>word</a>
            } else {
                return <p>word</p>
            }
        }
    }
    </For>
</div>

这显然需要一些造型，但看起来你对顺风有很好的把握，所以你应该没问题。

我使用的正则表达式来自这个堆栈溢出帖子：What is a good regular expression to match a URL?

【讨论】：