melchiorb / jquery-textgrep

Grep through text with jQuery and do fun stuff with the result.

textGrep for jQuery

The textGrep plugin allows you to find text inside elements. The occurences are wrapped in span, or other elements and returned. This lets you apply classes, styles and dom manipulations to pieces of text.

This plugin is meant to simplify applying styles to certain text patterns, for example for typographic purposes.

TextGrep does pretty much what Grep Styles do in Adobe® InDesign®.

Basic use

Add the class number to all numbers.

<p>Copyright 2013 ACME Corp.</p>

$('p').textGrep(/\d+/).addClass('number');

<p>Copyright <span class="number">2013</span> ACME Corp.</p>

Add the class capitals to all words written in captial letters.

<p>Copyright 2013 ACME Corp.</p>

$('p').textGrep(/[A-Z0-9]{2,}/).addClass('capitals');

<p>Copyright 2013 <span class="capitals">ACME</span> Corp.</p>

Presets

TextGrep provides presets for commonly used regular expressions.

<p>Copyright 2013 ACME Corp.</p>

$('p').textGrep('number').addClass('number');

<p>Copyright <span class="number">2013</span> ACME Corp.</p>

Presets can be added easily as well.

$.textGrep.presets.test = /test/g;
$('p').textGrep('test').addClass('test');