Tag: handlebars

For a project I’ve been working on recently I needed to convert text, retrieved from an API, to HTML.
The text isn’t “mark-down” but does contain line-breaks, URLs, hash-tags etc. etc. Since there wasn’t any add-on or snippet doing exactly this, I decided to roll my own.
Now I want to share my ‘snippet’ (only one file) with you, so you hopefully can benefit from it too, or modify it if needed.

You can find it here on Github Gist

As you can see I’ve included my test-file as well. Download both files and place “text-2-html.js” into your “app/helpers” directory (and “text-2-html-test.js” into your “tests/units/helpers” directory).

Now you can use the helper like this:

By default the helper converts:

• new-lines (attribute “nl”)
• URLs (attribute “url”)
•  e-mails (attribute “email”)

When configured it also converts:

• phone-numbers (attribute “phone”) — note: buggy!!
• hash-tags (attribute “hashTagURLPrefix”)
• mentions (attribute “mentionURLPrefix” and “mentionAtShown”)

Usage

Here are some examples to illustrate these options:

Handlebars template

See full reference below

I must tell that the phone-number feature might act a bit buggy (that’s why it’s not a default feature); it does recognize must phone-number formats but also other numbers, intended for something else. Try and see if it works for your purposes, otherwise I might work on that one day.

Assume we have the following text:

With this in your Handlebars:

Would result in the following HTML-output:
Hey<br>
How&#39;re ya doin&#39;?<br>
Sorry you can&#39;t get through.<br>
Why don&#39;t you leave me your name, mine is <a href=”https://www.twitter.com/planetcrypton” target=”_system”>@planetcrypton</a>, and your number, mine is <a href=”tel:+4560632840″>+4560632840</a>, and I&#39;ll get back to you.<br>
Don&#39;t forget to visit <a href=”http://www.wearedelasoul.com/” target=”_system”>http://www.wearedelasoul.com/</a><br>
Mail me at <a href=”mailto:plug2@reversed-yogurt.com”>plug2@reversed-yogurt.com</a> <a href=”https://www.twitter.com/hashtag/oldschool” target=”_system”>#oldschool</a> <a href=”https://www.twitter.com/hashtag/plug1″ target=”_system”>#plug1</a> <a href=”https://www.twitter.com/hashtag/plug2″ target=”_system”>#plug2</a> <a href=”https://www.twitter.com/hashtag/plug3″ target=”_system”>#plug3</a>

Just what we needed, eh? 🙂

Reference

Here’s a documentation of the available attributes, so you can go ahead and use it: