Escape special characters in tags for filtering

Hi,

I’m trying to filter posts based on tags and some of my tags contain special characters like ‘:’, ‘=’ or ‘•’. Therefore, using these tags with the #get helper results in a blank template.

{{#get "posts" limit="3" include="tags" filter="tags:type=hike"}}

Is there anyway to escape characters for the #get helper?

Thanks!

Try surrounding them in quotes:

{{#get "posts" limit="3" include="tags" filter="tags:'type=hike'"}}

I’ve tried with no luck… When doing so, the helper will default to the else block in the following snippet.

{{#get "posts" limit="3" include="tags" filter="tags:'type=hike'"}}
    {{#foreach posts}}
	...
    {{else}}
        <div>
            <p class="font-semibold">No posts for now. Come back soon!</p>
        </div>
    {{/foreach}}
{{/get}}

I’ve also tried the following :
{{#get "posts" limit="3" include="tags" filter='tags:"type=hike"'}}
and
{{#get "posts" limit="3" include="tags" filter="tags:type\=hike"}}

Can you check what the slug is for that tag? I just realized the tag slugs are probably escaped. You can find it on the tags page

1 Like

Aaah! Slugs are in fact escaped. I’ve done a little bit of research and it turns out that all special characters are replaced with a dash.

Found this snippet of code in ‘slugify.js’ from the @tryghost/string package :

    // Replace URL reserved chars: `@:/?#[]!$&()*+,;=` as well as `\%<>|^~£"{}` and \`
    string = string.replace(/(\s|\.|@|:|\/|\?|#|\[|\]|!|\$|&|\(|\)|\*|\+|,|;|=|\\|%|<|>|\||\^|~|"|\{|\}|`|–|—)/g, '-')
    // Remove apostrophes
        .replace(/'/g, '')
        // Make the whole thing lowercase
        .toLowerCase();

So I guess the solution is to only use ‘-’ in tags. Thanks for your help!

use HTML the DOM createTextNode() Method to escape HTML special chars in JavaScript.

var text_node = document.createTextNode(escString);
var elem = document.getElementById('demo');
elem.appendChild(text_node);