Remove hyphens and replace with spaces and capitalize in liquid

Question

Using liquid, I am using product tags to generate page titles. I want to the page titles to be free from hyphens and each word capitalized.

EXAMPLE:

If the tag (used to generate the title) is "potato-chips". I want the title to be "Potato Chips".

If I use:

{{current_tags.first}}

It generates a title of "potato-chips".

If I use:

{{current_tags.first | replace: '-', ' '}}

It generates a title of "potato chips".

If I use

{{current_tags.first | replace: '-', ' ' | capitalize}}

we get a title of "Potato chips".

If any one knows how I can get the title "Potato Chips", that would be great.

If it matters, some tags (used to generate the titles) are "word"; some are "word-word"; some are "word-word-word"; and so on.

Thanks.

Answer 1

You can split the tag on '-' then loop over the words capitalising each one:

  {% assign words = current_tags.first | split: '-' %}
  {% for word in words %}{{ word | capitalize }} {% endfor %}  

Answer 2

According to the docs, the camelize (or camelcase) filter should work:

camelize

Converts text into CamelCase.

Input

{{ 'coming-soon' | camelcase }}

Ouptut

Coming Soon

But when I tested it, I found the filter doesn't seem to be adding the spaces like the doco says it should.

In this case, BBG's answer is the workaround I would use (split on '-' and capitalize each word in the array).

Answer 3

If using CSS is an option, I'd just do that instead of dealing with the splitting and looping in Liquid.

<span style="text-transform: capitalize">
  {{current_tags.first | replace: '-', ' '}}
</span>