vincentloy / tweetparser.js

tweetParser.js Parse an element containing a tweet and turn URLS, @user & #hashtags into working urls

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

tweetparser.js's Issues

Make vanillaJS version

target parameter doesn't work properly

TweeParser + Handlebarsjs

Hello,

Thanks for this great tool. I am trying to parse tweets from Google Spreadsheets into html using Tabletop.js + Handlebarsjs. Once I parse the tweet into Handlebar template the
<p class="tweet">This is my awesome text only tweet ! #web #twitter @twitter http://www.twitter.com/ !!</p>
the great tweetParser.js effect doesn't work. Do you know how can I fix this?

Thanks!

How to hide a specific symbol?

Hello,

I'd like to hide a specific symbol in the rendered HTML. e.g. I'd like to type @username but in the HTML I would like to have it rendered without the @ before the username. In the same way I'd like to hide https:// from the output. E.g.: https://mysite.com becomes mysite.com in HTML output.

How can I achieve it?

Screenshot in README no longer available

The embedded screenshot in the README.md file is no longer available. It seems to be deleted from Flickr.

Wrap tweetParser and the jQuery compatibility file in the same file

Space between text and url gets "eaten"

I've noticed one more thing - following tweet would turn up like this:

Awesome page: http://example.com

Awesome page:<a href="http://example.com"> http://example.com</a>

Noticed the space issue? Would you have time to look into this? Thanks again!

Issue when there is anchor tags which follow each other

For example :

travel #cool #awesome

Will give :

travel#cool#awesome

innerText incompatible with FireFox

Need a quick fix

Feature request: Eclipses on urls

Thanks for an awesome parser! I have a quick feature request though.

Would you consider to also include hiding long URLs behind the eclipse as Twitter does?