How to: Handle special characters in your Card

Sometimes the input the Card receives from the JSON or RSS feed source can contain special characters such as inverted commas " and ', ampersands & or greater and less than signs < and >.

For example you may have a news article with the title "Digital" services coming this year

If your Card uses this title, let's say as <at-link label="{item.title}">, then this would be rendered as <at-link label=""Digital" services coming this year">. Thus the rendered HTML is invalid through the use of the " inside the label attribute.

Liquid offers an escape function that automatically converts special characters into compatible character entities.

To use this function add | escape to your Liquid placeholder, for instance:

<at-link label="{{item.title | escape}}">

This is how the function converts special characters:

& → &
> → >
< → <
" → "
' → '