mutiny-web/src/components/layout/Linkify.tsx

import { JSX } from "solid-js";

interface LinkifyProps {
    initialText: string;
}

export function Linkify(props: LinkifyProps): JSX.Element {
    // By naming this "initialText" we can prove to eslint that the props won't change
    const text = props.initialText;
    const links: (string | JSX.Element)[] = [];

    const pattern = /((https?:\/\/|www\.)\S+)/gi;
    let lastIndex = 0;
    let match;

    while ((match = pattern.exec(text)) !== null) {
        const link = match[1];
        const href = link.startsWith("http") ? link : `https://${link}`;
        const beforeLink = text.slice(lastIndex, match.index);
        lastIndex = pattern.lastIndex;

        if (beforeLink) {
            links.push(beforeLink);
        }

        links.push(
            <a
                href={href}
                class="break-all"
                target="_blank"
                rel="noopener noreferrer"
            >
                {link}
            </a>
        );
    }

    const remainingText = text.slice(lastIndex);
    if (remainingText) {
        links.push(remainingText);
    }

    return <>{links}</>;
}