jQuery Chunkify plugin

During the development process I often find useful to get more control over the single parts of the textual content of an element. Since CSS doesn't provide such a mechanism (at least until we don't make clear what a "word" is), I developed the Chunkify plugin that makes this job for us. Basically, this plugin splits the text of an element into chunks and return this text in an HTML format. Its syntax is:

$(element).chunkify(options);

Options

separator
A regular expression that tells the browser how the text must be split. Defaults to /\s/ (space).
wrapper
An HTML element that wraps up every chunk. Defaults to span.
klass
A CSS class to be added to the HTML elements in order to stylize the chunks. This class has an incremental trailing number, so if your text has been split into three parts, you'll get class1, class2, class3. Defaults to chunk.

Demo

jquery-chunkify-plugin.html

Download

jquery.chunkify.js

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

2 thoughts on “jQuery Chunkify plugin”

  1. It's a good plugin, no doubt. However oftenly when we want to use this kind of feature is to render our two words without space but with two different colors to avoid confusion. I agree, as your mentionned it, we need to definite what a "word" is, without space in this case. A trick could be: can we control space (/s/)?

  2. Thanks. The point is really confusing, especially among implementors. On www-style there are often discussion on what a word is or if we should define an nth-line() selectors. The latter would be the ideal subject for a new plugin, though some tweaks are required to deal with IE and its way of handling line breaks.

Leave a Reply

Note: Only a member of this blog may post a comment.