tweetParser.js - Live Demo

tweetParser.js is a JavaScript library that parses elements containing Twitter-like content, turning URLs, @usernames, and #hashtags into clickable links. This library supports both x.com (formerly twitter.com) links and is flexible enough for other domains.

Key Features

• Automatically converts URLs, @usernames, and #hashtags into clickable links.
• Supports customization with CSS classes for easy styling.
• Compatible with both Vanilla JavaScript and jQuery.
• Option to hide the "@" symbol in @usernames and the protocol (https://) in URLs.

Installation

Install with npm

npm install --save-dev tweetparser.js

Include tweetParser.js in your HTML

<script src="path/to/tweetParser.min.js"></script>

Parameters

| Parameter | Type | Default | Description | |---------------------|-----------|-------------------|-----------------------------------------------------------------------------------------------| | urlClass | String | tweet_link | CSS class used for URLs in the tweet text. | | userClass | String | tweet_user | CSS class used for @user profile URLs in the tweet. | | hashtagClass | String | hashtag | CSS class used for hashtag URLs in the tweet. | | target | String | _blank | HTML target attribute for all generated <a> tags. | | searchWithHashtags| Boolean | true | If true, hashtags link to x.com/hashtag/; if false, link to x.com/search?q=. | | parseUsers | Boolean | true | Enables parsing of @user mentions if set to true. | | parseUrls | Boolean | true | Enables parsing of URLs if set to true. | | parseHashtags | Boolean | true | Enables parsing of hashtags if set to true. | | baseURL | String | https://x.com | Base domain for generated links (e.g., https://x.com or https://twitter.com). | | hideUserSymbol | Boolean | false | If true, hides the "@" symbol in displayed usernames. | | hideProtocol | Boolean | false | If true, hides "https://" or "http://" in the displayed text for URLs, but keeps it in href.|

Getting Started

Basic Usage with JavaScript

To start using tweetParser.js, apply it to your desired CSS selector. Here’s an example using the .tweet class:

<p class="tweet">This is my awesome tweet! #web #twitter @twitter https://www.twitter.com/</p>

// Basic usage
tweetParser('.tweet');

// Usage with custom parameters
tweetParser('.tweet', {
    urlClass: "tweet_link",           // CSS class for URLs
    userClass: "tweet_user",           // CSS class for @user profiles
    hashtagClass: "hashtag",           // CSS class for hashtags
    target: "_blank",                  // Open links in new tab
    searchWithHashtags: true,          // Hashtags link to hashtag search
    parseUsers: true,                  // Parse @user mentions
    parseHashtags: true,               // Parse hashtags
    parseUrls: true,                   // Parse URLs
    baseURL: "https://x.com",          // Base domain for links
    hideUserSymbol: true,              // Hide "@" symbol in usernames
    hideProtocol: true                 // Hide "https://" in displayed URLs
});

jQuery Usage

If jQuery is included, tweetParser.js can be used as a jQuery plugin:

<script src="path/to/jquery.min.js"></script>
<script src="path/to/tweetParser.min.js"></script>

$('.tweet').tweetParser({
    urlClass: "tweet_link",
    userClass: "tweet_user",
    hashtagClass: "hashtag",
    target: "_blank",
    searchWithHashtags: true,
    parseUsers: true,
    parseHashtags: true,
    parseUrls: true,
    baseURL: "https://x.com",
    hideUserSymbol: true,
    hideProtocol: true
});

Result Example

You can see the library in action in the live demo.

Contributing

If you’d like to contribute:

• Star the repository on GitHub
• Report issues via the Issues page
• Tweet about it to share with others!

Pull Requests

• Ensure your contribution solves a problem.
• For code quality, use JSLint before submitting.
• Keep your contributions small and focused.

Changelog

v3.0.0

• Added baseURL parameter: Allows easy switching between x.com and soon vintage twitter.com.
• New hideUserSymbol option: Hides the "@" symbol in usernames if set to true.
• New hideProtocol option: Hides "https://" or "http://" in displayed URLs, keeping the full URL in href.
• Remove bower support and uses. (was only used in demo).

Previous Versions

• v2.2.0: Added Babel, ported to ES6 syntax.
• v2.1.3: Fixed target link parameter issue (#10).
• v2.1.2: Emoji support.
• v2.1.1: Wrapped tweetParser and jQuery compatibility into the same file (#9).
• v2.1.0: Introduced jQuery compatibility file for dual VanillaJS and jQuery support.
• v2.0.2: Code refactoring.
• v2.0.1: Firefox compatibility fix for textContent.
• v2.0.0: Removed jQuery dependencies, but maintained jQuery compatibility as an option.

License

tweetParser.js is licensed under the MIT License.