🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

tweetParser is a minimal jQuery plugin that automatically parses @usernames, #hashtags and URLs within your text and turns them into Twitter links by using regular expressions.

Other API Plugins

Documentation

tweetParser.js - demo

Parse Twitter Usernames, Hashtags and URLs tweetParser.js Parse elements containing a tweets and turn URLS, @users & #hashtags into working urls

tweetParser is also available as a Django Template Filter

PARAMETERS

Parameters Type default description
urlClass String tweet_link css Class used for url in the tweet
userClass String tweet_user css Class used for @user profil url in the tweet
hashtagClass String hashtag css Class used for hashtags url in the tweet
target HTML attribute for anchor tags _blank target used for all generated
searchWithHashtags Boolean true generate hashtag link, if true : "twitter.com/hashtag/", if false : "twitter.com/search?q="
ParseUsers Boolean true will parse @users if is set to true
parseUrls Boolean true will parse URLS if is set to true
parseHashtags Boolean true will parse hashtags if is set to true

INITIALISATION

You can install tweetParser.js with Bower

if you want to use bower just type :

bower install tweetparser.js 
Or via npm
npm install --save-dev tweetparser.js 
Add tweetParser.min.js to your HTML document
    <script src="js/tweetParser.min.js"></script>
Your tweet in your html document
    <p class="tweet">This is my awesome text only tweet ! #web #twitter @twitter http://www.twitter.com/ !!</p>
getting started with tweetParser
    //basic usage     tweetParser('.tweet');          //With Default parameters     tweetParser('.tweet', {         urlClass : "tweet_link", //this is default         userClass : "tweet_user", //this is default         hashtagClass : "hashtag", //this is default         target : "_blank", //this is default         searchWithHashtags : true //this is default         parseUsers : true,         parseHashtags : true,         parseUrls : true     });          // Note that '.tweet' is your own CSS selector
Want to use it in the jQuery way ?
  <script src="path/to/jquery.min.js"></script>   <script src="path/to/tweetParser.js"></script>

and call tweetParser like in v1 :

$([SELECTOR]).tweetParser([PARAMETERS]);

RESULT EXAMPLE

Check out the demo

you can customize your tweet with css classes used in parameters

Result After parsing tweets

Contributing

Pull Requests

  • Solve a problem
  • For code enhancement, use JSLint as a code quality tool.
  • Small is better than Big.

Changelog

  • v2.2.0

    • Add Babel in dev dependecies
    • Port dev code to es6 syntax
  • v2.1.3

    • Fix #10 - target link parameter issue
  • v2.1.2

    • Emojis support
  • v2.1.1

    • resolve issue #9 - Wrap tweetParser and the jQuery compatibility file in the same file.
  • v2.1.0

    • Add a jQuery compatibility file.
    • You can now use Both VanillaJS or jQuery.
    <!-- To use it with jQuery : add tweetParser.js and jquery.tweetParser.js --> <script src="dist/tweetParser.js"></script> <script src="dev/jquery.tweetParser.js"></script>

    and call tweetParser like in v1 :

    $([SELECTOR]).tweetParser([PARAMETERS]);

    It is always easier to use it without jQuery just don't add jquery.tweetParser.js and :

    tweetParser([SELECTOR], [PARAMETERS]);
  • v2.0.2

    • Code refactoring
  • v2.0.1

    • Fix issue #8 - is now Firefox compatible - replace innerText by textContent
  • v2.0.0

    • REMOVE jQuery dependecies...
    • ...But it still easy to use it as simple as a jQuery Plugin.
    • Improve URL regex : white spaces are not eaten anymore

NB : For you, there is just some small changes in the syntax to call tweetParser.

use

tweetParser([SELECTOR], [PARAMETERS]);

instead of :

$([SELECTOR]).tweetParser([PARAMETERS]);
  • v1.3.1

    • Remove Gruntfile to switch to gulpfile
    • Prepare to publish to npm
    • Improve the Demo
    • Add sourcemaps
  • v1.3.0

    • Improve (one more time) URL regex 🙌
  • v1.2.1

    • Better URL regex
  • v1.2.0

    • add parameter parseUsers, parseHashtags, parseUrls
    • Makeover on the demo
    • JSLint passed
  • v1.1.0

    • searchWithHashtags parameter added

      You can now choose where hashtags links will point to. when searchWithHastags = true (default), tweetParser will generate the following link for each hashtags : "twitter.com/hashtag/THE_HASHTAG".
      if you set it to false, the link will be : "twitter.com/search?q=THE_HASHTAG"

    • code optimisation, remove useless var.

  • v1.0.0

    Initial Version


You May Also Like