Here’s my approach.
function generateLinksHTML(urlString) {
// Splits the comma-delimited string into an array of URLs
const urls = urlString.split(',');
// Decodes URL-encoded characters using decodeURIComponent
const decodeUrls = urls.map(url => decodeURIComponent(url));
// Defines the inline CSS for the pill-style links
const linkStyle = 'padding: 8px 15px; background-color: #613DC7; color: white; text-decoration: none; border-radius: 20px; margin: 5px; display: inline-block; font-size: 14px;';
// Creates an HTML string with anchor tags for each URL, including the ↗ emoji
const linksHTML = decodeUrls.map(url => {
const fileName = url.split('/').pop();
return `<a href="${url}" target="_blank" style="${linkStyle}">↗ ${fileName}</a>`;
}).join('');
// Returns the full HTML string
return `<div class="links-component" style="margin-bottom: 10px;">${linksHTML}</div>`;
}
return generateLinksHTML(p1)