This is a small jQuery plugin that transforms @mention texts into hyperlinks pointing to the actual Twitter profile, #hashtag texts into real hashtag searches, as well as hyperlink texts into actual hyperlinks.
The hyperlink text transforming was based off of jLinker.js by Michalis Tzikas and Vasilis Lolos.
Let's say you have this tweet:
This is a test tweet to @terenceponce http://t.co/something #YOLO
<p class="tweet">This is a test tweet to @terenceponce http://t.co/something</p> #YOLO
Doing $('p.tweet').tweetLinkify();
will transform the text into this:
This is a test tweet to @terenceponce http://t.co/something #YOLO
<p class="tweet">This is a test tweet to <a href="http://twitter.com/terenceponce">@terenceponce</a> <a href="http://t.co/something">http://t.co/something</a> <a href="https://twitter.com/search/?src=hash&q=%23YOLO">#YOLO</a></p>
The plugin accepts multiple options:
excludeHyperlinks
- Excludes hyperlink texts from being transformed. Defaults tofalse
excludeMentions
- Excludes @mention texts from being transformed. Defaults tofalse
excludeHashtags
- Excludes #hashtag texts from being transformed. Defaults tofalse
hyperlinkTarget
- Thetarget
attribute for hyperlinks. Options areblank
,self
,parent
, andtop
mentionTarget
- Thetarget
attribute for mentions. Options areblank
,self
,parent
, andtop
mentionIntent
- Transforms the mention into a Twitter web user intent. Defaults tofalse
hashtagTarget
- Thetarget
attribute for hashtags. Options areblank
,self
,parent
, andtop
hyperlinkClass
- Theclass
attribute for hyperlinks.mentionClass
- Theclass
attribute for mentions.hashtagClass
- Theclass
attribute for hashtags.hyperlinkRel
- Therel
attribute for hyperlinks.mentionRel
- Therel
attribute for mentions.hashtagRel
- Therel
attribute for hashtags.
Let's say I want the hyperlinks and mentions to have a class name and the hyperlinks to open to a new tab instead of the same window. Using the previous example:
var options = {
hyperlinkTarget: 'blank',
hyperlinkClass: 'yolo',
mentionClass: 'swag'
};
$('p.tweet').tweetLinkify(options);
Will transform into this:
<p class="tweet">This is a test tweet to <a href="http://twitter.com/terenceponce" class="swag">@terenceponce</a> <a href="http://t.co/something" target="_blank" class="yolo">http://t.co/something</a> <a href="https://twitter.com/search/?src=hash&q=%23YOLO">#YOLO</a></p>