Replace german special chars in every H-tag

[Anton]

Hi community, 

I'm looking for a solution for following problem:

a customer has a 'great' new design guide from an external design agency. This company decided to capitilize every german umlaut (ü,ä,ö) in headlines (H-tags). By default (CSS) all headlines are displayed uppercase.

I could manage this in custom modules by using the replace function.

e.g

{{ module.headline|replace('ü','<span class="cap">ü</span>')}}

It works for cusotm modules but since the customer will maintain the page by himself, we can't expect that he will use only custom modules.

Therefor it would be great to have somekind of global script which would check every H-tag (h1-h6) if it has one of those letters (ö, ä, ü) and wrap it into this span class or maybe even without wrapping spans. 

thanks in advance

Anton

[sharonlicari]

Hey @Anton 

 Apologies for the delayed answer. Do you still need help with this matter?  

Thank you

Sharon 

[Anton]

Hi @sharonlicari, 

yes - I'm still looking for a solution

[sharonlicari]

Hey @Anton 

Of course! I'll tag a few of our experts 🙂

Hey @Kevin-C @alyssamwilie @prosa anything you would like to share with @Anton?

Thank you

Sharon

[Kevin-C · Accepted solution]

Hey @Anton and thanks @sharonlicari 

This could be done on load of the page with JQuery and a regex, but i'm not sure about the back end.

See here

[Anton]

Hi @Kevin-C,

thanks for your link. 

After some testing I've came up with following solution which works for me:

$( document ).ready(function() {
            if($("h1").length){
                $("h1").each(function(index) {
                    var x = $(this).text().replace(/\u00dc/g, "ü").replace(/\u00c4/g, 'ä').replace(/\u00d6/g, 'ö');
                    $(this).html(x);
                });
            }
            if($("h2").length){
                $("h2").each(function(index) {
                    var x = $(this).text().replace(/\u00dc/g, "ü").replace(/\u00c4/g, 'ä').replace(/\u00d6/g, 'ö');
                    $(this).html(x);
                });
            }
            if($("h3").length){
                $("h3").each(function(index) {
                    var x = $(this).text().replace(/\u00dc/g, "ü").replace(/\u00c4/g, 'ä').replace(/\u00d6/g, 'ö');
                    $(this).html(x);
                });
            }
            if($("h4").length){
                $("h4").each(function(index) {
                    var x = $( this ).text().replace(/\u00dc/g, "ü").replace(/\u00c4/g, 'ä').replace(/\u00d6/g, 'ö');
                    $(this).html(x);
                });
            }
            if($("h5").length){
                $("h5").each(function(index) {
                    var x = $(this).text().replace(/\u00dc/g, "ü").replace(/\u00c4/g, 'ä').replace(/\u00d6/g, 'ö');
                    $(this).html(x);
                });
            }
        });

[Anton]

Hi @Kevin-C , 

thank you for the link.

I will try it. 

best, 

Anton