Change format after a certain sign with javascript and jquery

i'm new here.

I'm using wordpress with the jquery library.

Wordpress generates with <?php the_title() ?> a string in a div tag for each article. P.e:

<div class="title">Building XY | Switzerland</div>

This generates Building XY | Switzerland with the css formating:

My question is, how to change the formating of the part after "Building XY" (from | till end of the string).

I would like to have this: Building XY | Switzerland

I'm sure the solution is a really simple script. But I'm not well-versed. Or it's may be easier with php?

Thank you for your support :-)


You'll have to wrap the last part in an element to apply styles to it, and then set the appropriate styles, probably font-weight : normal

jQuery(function ($) {
    $('.title').html(function (_, html) {
        return html.split('|').join('| <span style="font-weight:normal">') + '</span>';
    });
});

FIDDLE