Wix网站自定义评论框：将纯文本链接转为可点击橙色链接

Hey there, let's get those plain text URLs in your comments turned into nice, clickable orange links that open in a new tab! Since you already have your custom comment box up and running, we can add a small script to scan and transform those URLs automatically.

Here's the Step-by-Step Solution: #

First, head over to your Wix site's code editor (the one you used to set up the custom comment box). You'll want to add this code to the page where your comments are displayed, inside the page's onReady event.

$w.onReady(function () {
    // Helper function to convert plain text URLs to styled clickable links
    function convertUrlsToLinks(commentElement) {
        // Regex pattern to match URLs starting with http://, https://, or www.
        const urlPattern = /(\b(https?:\/\/|www\.)[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
        
        // Grab the original comment text
        let commentContent = commentElement.text;
        
        // Replace each matched URL with a formatted anchor tag
        commentContent = commentContent.replace(urlPattern, (matchedUrl) => {
            // Ensure www. links have a proper https:// prefix
            const fullUrl = matchedUrl.startsWith('www.') ? `https://${matchedUrl}` : matchedUrl;
            // Return the styled link - adjust color/text-decoration if needed
            return `<a href="${fullUrl}" target="_blank" style="color: orange; text-decoration: underline;">${matchedUrl}</a>`;
        });
        
        // Update the element's content with the linked version
        commentElement.html = commentContent;
    }

    // --- Adjust these selectors to match your Wix setup ---
    // If your comments are in a repeater (most common for dynamic lists):
    $w('#commentRepeater').onItemReady(($item, itemData) => {
        // Replace #commentContent with the ID of your comment text element in the repeater
        convertUrlsToLinks($item('#commentContent'));
    });

    // If you're using individual elements instead of a repeater:
    // $w('#commentText1, #commentText2, #commentText3').forEach(element => {
    //     convertUrlsToLinks(element);
    // });
});

Key Notes to Make This Work for Your Site: #

• Update Element IDs: Replace #commentRepeater with the actual ID of your comment repeater (if you're using one), and #commentContent with the ID of the text element inside each repeater item that holds the comment text. If you're not using a repeater, uncomment the second section and list your comment element IDs instead.
• Style Adjustments: The link is set to orange with underline, but you can tweak the style attribute in the anchor tag if you want a different color or no underline (e.g., text-decoration: none;).
• New Tab Behavior: The target="_blank" ensures links open in a new window, which is good practice for external links.

This script will run as soon as the page loads, and for each comment element, it'll scan the text, find all valid URLs, and convert them into functional, styled links.

内容的提问来源于stack exchange，提问作者Tristan