Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tweetparser.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tweetParser.js - Live Demo

Parse Twitter Usernames, Hashtags, and URLs

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.