Convert @mentions, #hashtags, and URLs Into Clickable Links – MentionerJS

Category: Javascript | June 23, 2024
Author:JarisGV
Views Total:18 views
Official Page:Go to website
Last Update:June 23, 2024
License:MIT

Preview:

Convert @mentions, #hashtags, and URLs Into Clickable Links – MentionerJS

Description:

MentionerJS is a lightweight JavaScript library that automates the creation of social media links and URL formatting.

It converts @mentions to Twitter/X profile links, #hashtags to Instagram tag links, and formats URLs for easy viewing.

How it works:

MentionerJS uses regular expressions to identify and format specific text patterns. The script defines three main parsing rules:

  • @mentions: It matches text starting with “@” followed by alphanumeric characters, dots, underscores, or hyphens. The script replaces these with links to the corresponding Twitter/X profiles.
  • #hashtags: It identifies text starting with “#” followed by alphanumeric characters, dots, underscores, or hyphens. The script converts these into links to Instagram tag exploration pages.
  • URLs: It detects web addresses with or without “http://”, “https://”, or “www” prefixes. The script formats these as clickable links and removes the prefixes for cleaner display.

How to use it:

1. Download the MentionerJS script and include it in your HTML file.

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

2. Once the script is included, it will automatically parse your document. The library searches for matching patterns and replaces them with corresponding links. For example:

@jquery => https://twitter.com/jqueryscript
#javascript => https://instagram.com/explore/tags/javascript
www.cssscript.com => <a href="https://cssscript.com" target="_blank">cssscript.com</a>

You Might Be Interested In:


Leave a Reply