Replace Wordpress-style shortcodes with anything. No dependencies required.
Shortcode accepts 2 arguments: an element, and an object of tags to match.
Each tag method returns a string to replace the original tag (in the DOM) and accepts an (optional) asynchronous callback. this is bound to the match object.
/* Replaces [hello text="Hello world"] in `body` with "Hello world" */
new Shortcode(document.querySelector('body'), {
hello: function() {
return this.options.text;
}
});Tip: Because shortcode replaces an element's html, you will lose existing event bindings inside that element. Use delegated bindings where possible and call shortcode at the start of your code.
- Supports multiple tag instances
- Supports single and start-end tags
- Supports multi-line tags
- Supports asynchronous callbacks
- Supports DOM or jQuery selectors
- Includes jQuery plugin definition
- Ignores tags inside
preandcode - Tested with Jasmine
Shortcode.js should work in any browser that supports Function.prototype.bind (Sorry IE7 & 8). If you need to support <IE9, try the polyfill published in MDN.
Sometimes you need to do asynchronous work. Don't return anything from the shortcode method. Instead, call done with your return value to update the DOM.
new Shortcode(document.querySelector('body'), {
hello: function(done) {
var self = this;
/* setTimeout is used here to simulate an async event */
setTimeout(function() {
done(self.options.text);
}, 1000);
}
});Shortcode.js supports tags like [note]This is a note[/note]. The content between tags will be availble in your callback under this.contents.
new Shortcode(document.querySelector('body'), {
note: function(done) {
return this.contents;
}
});While shortcode.js doesn't rely on jQuery, you may find it convenient to use. Shortcode can accept a jQuery object or a DOM object as the first argument.
Alternatively, a jQuery plugin wrapper is supplied.
$('body').shortcode({
hello: function() {
return this.options.text;
}
});See Releases for current version and release notes.
See CONTRIBUTING.md
MIT (c) 2014 Nic Aitch