Markup.js: Custom pipes for your piping pleasure

While Markup.js comes with more than 40 built-in pipes for everyday use, I always write a few custom pipes whenever I build an App Cloud app. Here are some of my favorites.

highlight

Use this pipe to highlight a search term or other pattern in a string. Note the use of backticks in the example to denote a context variable on the right side of the expression.

// Example: {{article|highlight>`searchTerm`}}

Mark.pipes.highlight = function (str, pattern) {
    return str.replace(new RegExp("(" + pattern + ")", "g"), "<em>$1</em>");
};

address

Use this pipe to wrap an address in a Google Maps link.

// Example: {{home_addr|address}}

Mark.pipes.address = function (addr) {
    return "<a href=\"http://maps.google.com/maps?q=" + encodeURI(addr) + ">" + addr + "</a>";
};

links

Use this pipe to convert all URLs in a string to links.

// Example:  {{story|links}}

Mark.pipes.links = function (str) {
    return str.replace(/\b(https?:[^\b\s]+)\b/g, "<a href=\"$1\">$1</a>");
};

repeat

Use this pipe to repeat a string. Note count defaults to 2 and separator defaults to "".

// Example: {{chorus|repeat>5}}

Mark.pipes.repeat = function (str, count, separator) {
    return new Array(+count || 2).join(str + (separator || "")) + str;
};

moment

Use this pipe to format a date with Moment.js.

// Example: {{created_at|moment>M/D/YYYY}}

Mark.pipes.moment = function (date, format) {
    return moment(new Date(+date || date)).format(format);
};

dollars

Use this pipe to format a number in dollars with Accounting.js.

// Example: {{price|dollars}}

Mark.pipes.dollars = function (num) {
    return accounting.formatMoney(+num);
};

phone

Use this pipe to format a U.S. phone number.

// Example: {{mobile_phone|phone}}

Mark.pipes.phone = function (str) {
    var s = str.replace(/[^\d]/g, "");
    return "(" + s.substr(0, 3) + ") " + s.substr(3, 3) + "-" + s.substr(6, 4);
};

ordinal

Use this pipe to express a number as an ordinal, e.g. "10th".

// Example: {{contestant.standing|ordinal}}

Mark.pipes.ordinal = function (num) {
    if (num > 10 && num < 20) {
        return num + "th";
    }
    return num + ["th","st","nd","rd","th","th","th","th","th","th"][num % 10];
};

runtime

Use this pipe to express a number in stopwatch notation ("mm:ss") given a factor of 1 (seconds) or 1000 (milliseconds). Note factor defaults to 1.

// Example: {{duration|runtime}}

Mark.pipes.runtime = function (time, factor) {
    var m = Math.floor(time / (60 * (factor || 1)));
    var s = Math.floor((time / (factor || 1)) % 60);
    return m + ":" + ("00" + s).substr(-2);
};

has

Use this pipe to determine if an array contains an object with the given property value.

// Example: {{if fruits|has>color>red}} ... {{/if}}

Mark.pipes.has = function (arr, prop, val) {
    return arr.some(function (item) {
        return item[prop] == val;
    });
};

sift

Use this pipe to filter an array of objects to only those having the given property value.

// Example: <ul> {{fruits|sift>color>red}} <li>{{fruit.name}}</li> {{/fruits}} </ul>

Mark.pipes.sift = function (arr, prop, val) {
    return arr.filter(function (item) {
        return item[prop] == val;
    });
};

stars

Use this pipe to print star and half-star characters given a decimal input. Note this requires Font Awesome.

// Example: {{rating|stars}}

Mark.pipes.stars = function (rating) {
    var n = Math.round(+rating * 2) / 2;

    return new Array(Math.floor(n) + 1).join("&#xf005;") + (n % 1 ? "&#xf089;" : "");
};

Get more pipes in the Markup.js repository on GitHub.

p.s. Get more tips and tricks (and share your own) by joining the Brightcove App Cloud discussion group on Google.