{Keyworder} is a lightweight and versatile jQuery plugin providing an easy way to manage your content keywords, acronyms and abbreviations in a tooltiped way. But this is not the only application for this code, as it can also be used to detect text patterns such as emails, URLs, IP addresses, numbers, dates and smileys and format them with default or custom templates. It comes with a whole set of built-in detectors and converters, such as the smileys dictionary, which automatically detects the text signs and converts them into smileys 8-|.

I hope you will like this jQuery plugin and find it useful and pleasant. It is available for purchase on CodeCanyon for only $6. Enjoy!

Main features

• Detects a defined list of keywords and shows their definitions
  • in the browser's default tooltip
  • in a third party jQuery tooltip (Tipsy)
  • just after a keyword occurrence
• Replaces a list of keywords with the terms defined in the corresponding definitions
• Matches predefined text patterns and formats them in desired fashion
• Comes with a set of pre-defined dictionaries
• Templates and CSS styles fully customisable
• Callbacks for events and delegates for most actions
• Easy to install and to use
• Well documented

Installation

To install {Keyworder} you need to unzip the download package and then include the following scripts and stylesheet in the head section of your page:

<!-- Begin dependencies -->
<script type="text/javascript" src="keyworder/scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="keyworder/scripts/jquery.tipsy.js"></script> <!-- optional -->
<!-- End dependencies -->

<link href="keyworder/css/keyworder.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="keyworder/scripts/keyworder.js"></script>
        

If you don't use the Tipsy tooltip you can remove it safely. If you use a dictionary you will need to import the corresponding javascript file and eventually the associated stylesheet:

<link href="keyworder/dictionaries/file-extensions/file-extensions.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="keyworder/dictionaries/file-extensions/detect-files.js"></script>
        

Once the scripts are imported, then {Keyworder} can be instantiated by using a selector usually when the document is ready, for example:

$(function () {
    var kwd = $('.my-class').keyworder({
		dictionary: [{ keyword: 'keyword', definition: 'definition' }]
	});
});

Examples & usage

Tooltips

By default {Keyworder} will show the definition of a keyword in the browser's deafult tooltip:

$('.default').keyworder({
	dictionary:[
		{
			keyword: 'keyworder',
			definition: 'A lightweight jQuery plugin providing an easy way to manage keywords, acronyms and tooltips'
		},
		{ keyword: 'sed', definition: 'Latin conjunction' }
	]
});
			

$('.tooltip').keyworder({
	dictionary:[
		{
			keyword: 'keyworder',
			definition: 'A lightweight jQuery plugin providing an easy way to manage keywords, acronyms and tooltips'
		},
		{ keyword: 'sed', definition: 'Latin conjunction' }
	],
	type: 'tooltip'
});

			

Inline definition

{Keyworder} let you also place the keyword definition just after the keyword occurence, this is the inline definition type:

$('.inline-def').keyworder({
	dictionary:[
		{ keyword: 'World Wide Web', definition: 'WWW' },
		{ keyword: 'HyperText Markup Language', definition: 'HTML' },
		{ keyword: 'Hypertext Transfer Protocol', definition: 'HTTP' },
		{ keyword: 'MIME', definition: 'Multipurpose Internet Mail Extensions' }
	],
	type: 'inline'
});
		

Keyword replacement

{Keyworder} can also perform keywords replacements, this is the replace type:

$('.replace').keyworder({
	dictionary:[
		{ keyword: 'Vivamus', definition: '<b>VIVAMUS</b>' },
		{ keyword: 'keyworder', definition: '<i>KEYWORDER</i>' },
		{ keyword: 'dictumst', definition: '<strong>HELLO WORLD!</strong>' }
	],
	type: 'replace'
});
		

Pattern match

Another powerful feature of {Keyworder} is the pattern match, which allows you to search defined patterns and template occurences in desired fashion. This is the match type. In the following text {Keyworder} searches for all the words starting with a capital letter:

$('.match').keyworder({
	dictionary:[{ definition: 'This word starts with a capital letter' }],
	regExpPattern: '(\\b|^)[A-Z][a-z]+(\\b|$)',
	caseSensitive: true,
	template: '<span title="{def}"><b>{key}</b></span>',
	type: 'match'
});
//Note: the pattern match does not need a keyword property to be defined. You could assign a null value to keyword in this case.
		

Dictionaries

{Keyworder} comes with a set of predefined utility dictionaries that can be very useful when dealing with your content:

Smileys

The Smileys dictionary detects automatically most of the text signs and converts them into smileys:

You need to import the smileys dictionary javascript file in the head section of your page:

<script type="text/javascript" src="keyworder/dictionaries/smileys/smileys.js"></script>
		

and then call {Keyworder} with the smileys configuration object:

$('.smileys').keyworder(smileysConfig);
		

File extensions

This dictionary detects a set of predefined file extensions and inserts an extension icon before the occurrences. These are the recognised file types: jpg, gif, png, bmp, swf, mov, wma, mpg, mp3, wav, pdf, txt, doc, docx, csv, xls, xlsx, ppt, pptx. You can add any missing extension by editing the dictionary javascript file and adding the corresponding icons.

First import the file extensions dictionary js file in the head section of your page:

<script type="text/javascript" src="keyworder/dictionaries/file-extensions/detect-files.js"></script>
		

and then call {Keyworder} with the file extensions configuration object:

$('.files').keyworder(kwdFileExtensions);
		

Emails

This dictionary detects the email occurences in your text and converts them into mailto links. As usual, you need to import the dictionary js file in the head section of your page:

<script type="text/javascript" src="keyworder/dictionaries/email/mailto.js"></script>
		

$('.mailto').keyworder(kwdMailto);
		

To mask the email occurrences in your content, import the following dictionary:

<script type="text/javascript" src="keyworder/dictionaries/email/nospam.js"></script>
		

$('.nospam').keyworder(kwdMaskMail);
		

URLs

If you have URLs in plain text and need to convert them into links, import the following dictionary in the head section of your page:

<script type="text/javascript" src="keyworder/dictionaries/url/detect-url.js"></script>
		

$('.urls').keyworder(kwdUrl);
		

IP addresses

This dictionary detects the IP addresses in your text. This is the javascript file that needs to be included in your page:

<script type="text/javascript" src="keyworder/dictionaries/ip/detect-ip.js"></script>
		

$('.ips').keyworder(kwdIP);
		

Dates

With this dictionary you can easily convert different dates formats into a defined one. Include this js file:

<script type="text/javascript" src="keyworder/dictionaries/date/convert-to.js"></script>
		

//The default converted format is 'yyyy-mm-dd', iso date format
$('.default-date').keyworder(kwdConvertDate);
		

You can easily convert the same dates into an another format:

//Custom format
kwdConvertDate.to_format = 'dddd, mmmm d, yyyy';
$('.custom-date').keyworder(kwdConvertDate);
		

Check the possible conversion date formats in the dictionary js file by locating the dateFormat.masks property

Currencies

It is also possible to convert numeric values into currency formats. Include this dictionary in the head section of your page :

<script type="text/javascript" src="keyworder/dictionaries/currency/formater.js"></script>
		

$('.currency-dollar').keyworder(kwdToUSCurrency);
		

$('.currency-euro').keyworder(kwdToEUCurrency);
		

//Custom currency formating
kwdToCurrency.dictionary[0].thousand_separator = ' '; //thousand separator property
kwdToCurrency.dictionary[0].currency = '£'; //curency property
kwdToCurrency.dictionary[0].precision = 4; //number of digit after ,
$('.currency-custom').keyworder(kwdToCurrency);
		

Numbers

With this dictionary you can convert unformatted numeric values in formated numbers. As usual you will need to include the dictionary's js document in the head section of your page:

<script type="text/javascript" src="keyworder/dictionaries/number/formater.js"></script>
		

$('.number-us').keyworder(kwdToUSNb);
		

$('.number-eu').keyworder(kwdToEUNb);
		

$('.number-us-eu').keyworder(kwdFromUSToEUNb);
		

$('.number-eu-us').keyworder(kwdFromEUToUSNb);
		

Finally a custom numeric format:

//Custom formating
kwdFromEUToUSNb.dictionary[0].thousand_separator = ' '; //thousand separator property
kwdFromEUToUSNb.dictionary[0].decimal_separator = ' .';	//decimal separator property
kwdFromEUToUSNb.dictionary[0].precision = 4; //precision property
$('.number-eu-custom').keyworder(kwdFromEUToUSNb);
		

Customisation

{Keyworder} is really flexible and allows you to customise almost everything :-). Every single keyword of the dictionary can implement a different style and template.

Templates

It is possible to define a different template for each keyword:

$('.templates').keyworder({
	dictionary:[
		{
			keyword: 'World Wide Web', definition: 'WWW',
			template: '<span class="{css}" title="{def}">{key}</span>', css: 'tpl1'
		},
		{
			keyword: 'HTML', definition: 'HyperText Markup Language',
			template: '<abbr title="{def}">{key}</abbr>'
		},
		{
			keyword: 'HTTP', definition: 'Hypertext Transfer Protocol',
			template: '<span title="{def}" style="color:blue; font-weight:bold;">{key}</span>'
		},
		{
			keyword: 'MIME', definition: 'Multipurpose Internet Mail Extensions',
			template: '<a href="javascript:;" title="{def}" class="{css}">{key}</a>', css: 'tpl2'
		}
		]
	});
});
		

Styles

{Keyworder} comes with 4 predifined styles for highlighting keywords, and each keyword can have a predefined or custom CSS class applied:

$('.styles').keyworder({
	dictionary:[
		{ keyword: 'dolor', definition: 'A latin word' }, //default style
		{ keyword: 'Vivamus', definition: 'A latin word', css: 'kwd-grey' }, //grey style
		{ keyword: 'keyworder', definition: 'A useful script', css: 'kwd-blue', type: 'tooltip' }, //blue style
		{ keyword: 'dictumst', definition: 'funny word!', css: 'kwd-green kwdt', type: 'inline' }, //green style
		{ keyword: 'pharetra', definition: 'A quiver in latin', css: 'my-css' } //custom style
	]
});
		

Callbacks

{Keyworder} gives also the possibility to hook-up the text replacement events to provide even more flexibility. The following example shows how to implement a custom tooltip by taking advantage the of script's callbacks. It also adds a fade in and out transition effect during the replacement operation:

var kwdCallbacks = $('.callbacks').keyworder({
	dictionary:[
		{
			keyword: 'dolor', definition: 'A latin word',
			onBeforeReplaceText: onBeforeReplaceKeyCallback,
			onAfterReplaceText: onAfterReplaceKeyCallback
		},
		{
			keyword: 'Vivamus', definition: 'Another latin word',
			onBeforeReplaceText: onBeforeReplaceKeyCallback,
			onAfterReplaceText: onAfterReplaceKeyCallback
		},
		{
			keyword: 'keyworder', definition: 'A useful script',
			onBeforeReplaceText: onBeforeReplaceKeyCallback,
			onAfterReplaceText: onAfterReplaceKeyCallback
		},
		{
			keyword: 'dictumst', definition: 'funny word!',
			onBeforeReplaceText: onBeforeReplaceKeyCallback,
			onAfterReplaceText: onAfterReplaceKeyCallback
		},
		{
			keyword: 'pharetra', definition: 'A quiver in latin',
			onBeforeReplaceText: onBeforeReplaceKeyCallback,
			onAfterReplaceText: onAfterReplaceKeyCallback
		}
	],
	css: 'kwd-grey',
	template: '<div class=\'tlp\'><a href=\'#\' class=\'{css}\'>{key}</a><div class=\'custom-tlp\'>{def}</div></div>',
	onBeforeReplace: function(config){ //config = configuration object
		//this = keyworder instance
		$(this).fadeOut('slow');
	},
	onAfterReplace: function(config){ //config = configuration object
		//this = keyworder instance
		$(this).fadeIn('slow');
		//Custom tooltip event handlers
		$('.tlp').on('mouseover', function(){ $(this).children().eq(1).css({'display':'inline'}).fadeIn(); });
		$('.tlp').on('mouseout', function(){ $(this).children().eq(1).fadeOut(); });
	}
});
function onBeforeReplaceKeyCallback(text, item) {
	$('#output').append('Replacing <i>' + item.keyword + '</i><br/>');
}
function onAfterReplaceKeyCallback(text, item) {
	$('#output').append('<i>'+item.keyword+ '</i> replaced' + '<br/>');
}
		

Delegates

{Keyworder} let you also use your own functions to perform the text replacements and templating operations. Those actions can be quickly and easily delegated to your own logic:

$('.delegates').keyworder({
	dictionary:[
		{ keyword: 'dolor', definition: 'A latin word' },
		{ keyword: 'Vivamus', definition: 'Another latin word' },
		{ keyword: 'keyworder', definition: 'A useful script' },
		{ keyword: 'dictumst', definition: 'funny word!' },
		{ keyword: 'pharetra', definition: 'A quiver in latin' }
	],
	template: '<span style="text-decoration:line-through;">{key}</span> <b>{def}</b>',
	//This delegate function is used to perform the text replacement
	fnReplaceText: function(text, o){
		//public method to get the template
		var tpl = this.getTemplate(o);
		//definition is injected in the template
		var html = tpl.replace(new RegExp('{def}', 'g'), o.definition);
		//public method to get the regular expression facilitating the replacement
		var rgx = this.getRegularExpression(o);
		//matched occurrence is replaced with template filled with the matching text
		return text.replace(rgx, function(m){ return html.replace(new RegExp('{key}', 'gi'), m); });
	}
});
		

The same result could be obtained by using a templating delegate function:

$('.more-delegates').keyworder({
	dictionary:[
		{ keyword: 'dolor', definition: 'A latin word' },
		{ keyword: 'Vivamus', definition: 'Another latin word' },
		{ keyword: 'keyworder', definition: 'A useful script' },
		{ keyword: 'dictumst', definition: 'funny word!' },
		{ keyword: 'pharetra', definition: 'A quiver in latin' }
	],
	// In this case, the template is generated and returned by the delegate function
	fnFormatTemplate: function (m, o){// this = keyworder instance
		// m = regular expression match, o = current dictionary item
		return '<span style="text-decoration:line-through;">'+ m +'</span> <b>'+ o.definition +'</b>';
	}
});
		

Why use this plugin?

If you need to maintain keywords, acronyms, abbreviations or any particular terms in your content, this could be a very convenient, smart and effortless solution. On the other hand, users will appreciate the presence of visual helpers whenever 'mysterious' or technical words are encountered in your text.
If you need to perform operations on your text, such as, converting values into formated numbers, or for example generate links from plain text URLs, or detect smileys ;), or why not all of that at the same time, this plug-in will save you a lot of headaches and will put a smile on your face :)

Documentation

{Keyworder}'s documentation is available in the purchased package.