Tag: handlebars

0

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:

{{text-2-html message}}

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

basic:
{{text-2-html item.message}}

defining target:
{{text-2-html item.message target='_system'}}

convert phone-number, note this is somehow buggy:
{{text-2-html item.message target='_system' phone=true}}

hash-tags and mentions, twitter links:
{{text-2-html item.message hashTagURLPrefix='https://www.twitter.com/hashtag/' mentionURLPrefix='https://www.twitter.com/'}}

hash-tags and mentions, hiding the @-sign for mentions, facebook style
{{text-2-html item.message hashTagURLPrefix='https://www.facebook.com/hashtag/' mentionURLPrefix='https://www.facebook.com/' mentionAtShown=false}}

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:

Hey\nHow're ya doin'?\nSorry you can't get through.\nWhy don't you leave me your name, mine is @planetcrypton, and your number, mine is +4560632840, and I'll get back to you.\nDon't forget to visit http://www.wearedelasoul.com/\nMail me at plug2@reversed-yogurt.com #oldschool #plug1 #plug2 #plug3

With this in your Handlebars:

{{text-2-html item.message hashTagURLPrefix='https://www.twitter.com/hashtag/' mentionURLPrefix='https://www.twitter.com/'}}

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:

Attr. name Type Default value Note
nl boolean true convert new-lines
url boolean true convert URLs
email boolean true convert e-mail-addresses
phone boolean false convert phone-numbers, might be buggy
target string _blank define target for all links
hashTagURLPrefix string null convert hash-tags and define the URL-prefix
mentionURLPrefix string null convert mentions and define the URL-prefix
mentionAtShown boolean true show / hide the @-sign for mentions