Auto-add File Type Emojis to Your Document Links – Filemoji

Filemoji is a lightweight JavaScript library that automatically prepends corresponding emojis to links pointing to files.

How to use it:

1. Download the package and load the Filemoji library in the document.

<script src="filemoji.js"></script>

2. Call Filemoji.init() after the script is loaded and the DOM is ready.Filemoji will then scan all a[href] elements on the page and modify them if they link to a file with a recognized extension.

Filemoji.init();

How It Works

When initialized, the library performs a DOM query to find all anchor (<a>) elements with href attributes. For each link found, it analyzes the URL to extract the file extension using a regular expression pattern.

The core of Filemoji is a mapping object that associates file extensions with their corresponding emojis. This dictionary contains entries for common document types (PDFs, Word documents), spreadsheets, archives, media files, and more.

When Filemoji finds a match between a link’s extension and an entry in its mapping object, it creates a new <span> element containing the appropriate emoji. This span is then prepended to the link text.

FAQs

Q: What happens if a link doesn’t have a file extension in its href?
A: Filemoji will simply skip it. The regular expression /.([a-z0-9]+)([?#].*)?$/i looks for a dot followed by alphanumeric characters. If that pattern isn’t found (e.g., /about-us or https://example.com), the link remains unchanged.

Q: How can I customize the emojis or add support for new file types?
A: As of version 1.0.0, Filemoji doesn’t offer a public API to modify the iconMap at runtime. To change emojis or add new ones, you would need to modify the iconMap object directly in the filemoji.js source file. For instance, if you wanted to add a specific icon for .json files:

// Inside filemoji.js, within the iconMap
const iconMap = {
  // ... existing entries
  json: 'u{1F5C4}', // 🗂️ (example emoji)
  // ... more entries
};

Q: Will Filemoji process links that are added to the page dynamically after Filemoji.init() has run?
A: No. Filemoji.init() scans the DOM at the time it’s called. If new <a> elements are injected into the page later by other JavaScript, Filemoji won’t automatically detect them. You would need to call Filemoji.init() again to re-scan the entire document, or, if you’re comfortable modifying the library, you could expose a function that processes a specific DOM element or a collection of new links.

The post Auto-add File Type Emojis to Your Document Links – Filemoji appeared first on CSS Script.