Removing whitespace from {{ tag.name }}

Question

I'm using tags to do some Javascripting.

Is there any way that I can tell Craft to remove whitespace from {{ tag.name }} if the tag.name has spaces (for example 'apples and carrots'), and add dashes ('apples-and-carrots') ?

Answer 1

There are multiple ways to solve this:

Native:

Twigs url_encode filter:

{{ "apples and carrots"|url_encode }}
{# outputs "apples%20and%20carrots" #}

Twigs replace filter:

{{ "apples and carrots"|replace(' ', '-') }}
{# outputs "apples-and-carrots" #}

Plugins:

Twig PCRE Filters - Plugin:

{{ "apples and carrots"|preg_replace('/ /', '-') }}
{# outputs "apples-and-carrots" #}

Low Regex - Plugin:

{{ "apples and carrots"|regex('/ /', '-') }}
{# outputs "apples-and-carrots" #}

Slugify - Plugin:

{{ "apples and carrots"|slugify }}
{# outputs "apples-and-carrots" #}

Answer 2

Craft has a filter for "Kebab Case", which I think is what you need. It strips out punctuation and replaces spaces with dashes. Useful if you need to format a field as a HTML attribute.

{{ tag.name|kebab }}

Answer 3

I'm not sure if this feature is newer than this question but you can also say {{ tag.slug }} to get apples-and-carrots. All letters become lowercase as well so the result is more "scripting-friendly".

Answer 4

one more example with array parameter in replace method:

{{ "apples and carrots"|replace({" ":"-"}) }}
{# outputs "apples-and-carrots" #}