tweetParser.js - demo

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

Contributing

• Give it a star !
• Report a bug
• Tweet about it :)

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