String filters

String filters are used to manipulate outputs and variables of the string type.

append

Appends characters to a string.

{{ 'sales' | append: '.jpg' }}

sales.jpg

camelcase

Converts a string into CamelCase.

{{ 'coming-soon' | camelcase }}

ComingSoon

capitalize

{{ 'capitalize me' | capitalize }}

Capitalize me

downcase

Converts a string into lowercase.

{{ 'UPPERCASE' | downcase }}

uppercase

escape

Escapes a string.

{{ "<p>test</p>" | escape }}

<p>test</p>
 <!-- Note: a browser will visually display this as <p>test</p> -->

prepend

Prepends characters to a string.

{{ 'sale' | prepend: 'Made a great ' }}

Made a great sale

remove

Removes all occurrences of a substring from a string.

{{ "Hello, world. Goodbye, world." | remove: "world" }}

Hello, . Goodbye, .

remove_first

Removes only the first occurrence of a substring from a string.

{{ "Hello, world. Goodbye, world." | remove_first: "world" }}

Hello, . Goodbye, world.

replace

Replaces all occurrences of a string with a substring.

<!-- product.title = "Awesome Shoes" -->
{{ product.title | replace: 'Awesome', 'Mega' }}

Mega Shoes

replace_first

Replaces the first occurrence of a string with a substring.

<!-- product.title = "Awesome Awesome Shoes" -->
{{ product.title | replace_first: 'Awesome', 'Mega' }}

Mega Awesome Shoes

slice

The slice filter returns a substring, starting at the specified index. An optional second parameter can be passed to specify the length of the substring. If no second parameter is given, a substring of one character will be returned.

{{ "hello" | slice: 0 }}
{{ "hello" | slice: 1 }}
{{ "hello" | slice: 1, 3 }}

h
e
ell

split

The split filter takes on a substring as a parameter. The substring is used as a delimiter to divide a string into an array. You can output different parts of an array using array filters.

{% assign words = "Hi, how are you today?" | split: ' ' %}

{% for word in words %}
{{ word }}
{% endfor %}

Hi,
how
are
you
today?

strip

Strips tabs, spaces, and newlines (all whitespace) from the left and right side of a string.

{{ '   too many spaces      ' | strip }}

too many spaces

lstrip

Strips tabs, spaces, and newlines (all whitespace) from the left side of a string.

{{ '   too many spaces           ' | lstrip }}

<!-- Highlight to see the empty spaces to the right of the string -->
too many spaces

rstrip

Strips tabs, spaces, and newlines (all whitespace) from the right side of a string.

{{ '              too many spaces      ' | rstrip }}

<!-- Notice the empty spaces to the left of the string -->
              too many spaces

strip_html

Strips all HTML tags from a string.

{{ "<h1>Hello</h1> World" | strip_html }}

Hello World

strip_newlines

Removes any line breaks/newlines from a string.

{{ product.description | strip_newlines }}

truncate

Truncates a string down to the number of characters passed as the first parameter. An ellipsis (...) is appended to the truncated string and is included in the character count.

{{ "The cat came back the very next day" | truncate: 13 }}

The cat ca...

truncatewords

Truncates a string down to the number of words passed as the first parameter. An ellipsis (...) is appended to the truncated string.

{{ "The cat came back the very next day" | truncatewords: 4 }}

The cat came back...

upcase

Converts a string into uppercase.

{{ 'i want this to be uppercase' | upcase }}

I WANT THIS TO BE UPPERCASE

url_encode

Converts any URL-unsafe characters in a string into percent-encoded characters.

{{ "[email protected]" | url_encode }}

john%40liquid.com

Reversing strings

reverse cannot be used directly on a string, but you can split a string into an array, reverse the array, and rejoin it by chaining together other filters:

{{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}

.moT rojaM ot lortnoc dnuorG