{Keyworder} v1.0
Purchase

Manage keywords with a smile :)

{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

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' }]
	});
});

top ↑

Examples & usage

Tooltips

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, commodo tempus lorem keyworder. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst.

$('.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' }
	]
});
			

The keywords' definitions can also be placed in a cool jQuery toolip feature (tipsy), this is the tooltip type:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, commodo tempus lorem keyworder. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst.

$('.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'
});

			

top ↑

Inline definition

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

The World Wide Web is composed primarily of HyperText Markup Language documents transmitted from web servers to web browsers using the Hypertext Transfer Protocol. However, HTTP is used to serve images, sound, and other content, in addition to HTML. To allow the Web browser to know how to handle each document it receives, other information is transmitted along with the document. This meta data usually includes the MIME type (e.g. text/html or application/xhtml+xml) and the character encoding.

$('.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'
});
		

top ↑

Keyword replacement

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

Before:
After:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, commodo tempus lorem keyworder. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, commodo tempus lorem keyworder. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst.

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

top ↑

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:

Before:
After:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, commodo tempus lorem keyworder. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, commodo tempus lorem keyworder. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst.

$('.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.
		

top ↑

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:

Before:
After:

Lorem ipsum :-*dolor sit amet, consectetur adipiscing elit. >:-(Vivamus magna elit, porttitor vel euismod:$ sed, porttitor quis nibhO:). Vestibulum eu diam sed 8-|est commodo porta. :) Vivamus ac elit diam,:-r commodo tempus lorem keyworder. Proin posuere pharetra ullamcorper. In hac =0habitasse platea dictumst ;).

Lorem ipsum :-*dolor sit amet, consectetur adipiscing elit. >:-(Vivamus magna elit, porttitor vel euismod:$ sed, porttitor quis nibhO:). Vestibulum eu diam sed 8-|est commodo porta. :) Vivamus ac elit diam,:-r commodo tempus lorem keyworder. Proin posuere pharetra ullamcorper. In hac =0habitasse platea dictumst ;).

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);
		

top ↑

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.

Before:
After:

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);
		

top ↑

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>
		
Before:
After:

Lorem ipsum dolor sit amet, kaiser.soze@email.com consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, name@email.com, commodo tempus lorem. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst. Vestibulum mollis diam diam. Nulla hello.world@email.com ornare suscipit orci vel venenatis. In hac habitasse platea dictumst.

Lorem ipsum dolor sit amet, kaiser.soze@email.com consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, name@email.com, commodo tempus lorem. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst. Vestibulum mollis diam diam. Nulla hello.world@email.com ornare suscipit orci vel venenatis. In hac habitasse platea dictumst.

$('.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>
		
Before:
After:

Lorem ipsum dolor sit amet, kaiser.soze@email.com consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, name@email.com, commodo tempus lorem. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst. Vestibulum mollis diam diam. Nulla hello.world@email.com ornare suscipit orci vel venenatis. In hac habitasse platea dictumst.

Lorem ipsum dolor sit amet, kaiser.soze@email.com consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, name@email.com, commodo tempus lorem. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst. Vestibulum mollis diam diam. Nulla hello.world@email.com ornare suscipit orci vel venenatis. In hac habitasse platea dictumst.

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

top ↑

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>
		
Before:
After:

Lorem ipsum dolor sit amet, http://www.google.com consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, http://tablefilter.free.fr, commodo tempus lorem. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst. Vestibulum mollis diam diam. Nulla http://edittable.free.fr ornare suscipit orci vel venenatis. In hac habitasse platea dictumst.

Lorem ipsum dolor sit amet, http://www.google.com consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, http://tablefilter.free.fr, commodo tempus lorem. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst. Vestibulum mollis diam diam. Nulla http://edittable.free.fr ornare suscipit orci vel venenatis. In hac habitasse platea dictumst.

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

top ↑

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>
		
Before:
After:

Lorem ipsum dolor sit amet, 170.138.54.19 consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, 170.138.54.13, commodo tempus lorem. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst. Vestibulum mollis diam diam. Nulla 170.138.54.17 ornare suscipit orci vel venenatis. In hac habitasse platea dictumst.

Lorem ipsum dolor sit amet, 170.138.54.19 consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, 170.138.54.13, commodo tempus lorem. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst. Vestibulum mollis diam diam. Nulla 170.138.54.17 ornare suscipit orci vel venenatis. In hac habitasse platea dictumst.

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

top ↑

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>
		
Before:
After:
//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:

Before:
After:
//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


top ↑

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>
		
Before:
After:
$('.currency-dollar').keyworder(kwdToUSCurrency);
		
Before:
After:
$('.currency-euro').keyworder(kwdToEUCurrency);
		
Before:
After:
//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);
		

top ↑

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>
		
Before:
After:
$('.number-us').keyworder(kwdToUSNb);
		
Before:
After:
$('.number-eu').keyworder(kwdToEUNb);
		
Before:
After:
$('.number-us-eu').keyworder(kwdFromUSToEUNb);
		
Before:
After:
$('.number-eu-us').keyworder(kwdFromEUToUSNb);
		

Finally a custom numeric format:

Before:
After:
//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);
		

top ↑

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:

The World Wide Web is composed primarily of HTML documents transmitted from web servers to web browsers using the HTTP. However, HTTP is used to serve images, sound, and other content, in addition to HTML. To allow the Web browser to know how to handle each document it receives, other information is transmitted along with the document. This meta data usually includes the MIME type (e.g. text/html or application/xhtml+xml) and the character encoding.

$('.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'
		}
		]
	});
});
		

top ↑

Styles

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, commodo tempus lorem keyworder. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst.

$('.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
	]
});
		

top ↑

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:

Original text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam, commodo tempus lorem. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst. Vestibulum mollis diam diam. Nulla ornare suscipit orci vel venenatis. In hac habitasse platea dictumst.

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/>');
}
		

top ↑

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:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam keyworder, commodo tempus lorem. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst. Vestibulum mollis diam diam. Nulla ornare suscipit orci vel venenatis. In hac habitasse platea dictumst.

$('.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:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna elit, porttitor vel euismod sed, porttitor quis nibh. Vestibulum eu diam sed est commodo porta. Vivamus ac elit diam keyworder, commodo tempus lorem. Proin posuere pharetra ullamcorper. In hac habitasse platea dictumst. Vestibulum mollis diam diam. Nulla ornare suscipit orci vel venenatis. In hac habitasse platea dictumst.

$('.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>';
	}
});
		

top ↑

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 :)


top ↑

Documentation

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


top ↑