Format change after a certain sign with javascript and jquery

1 Views

i’m new here.

I’m using wordpress with the jquery library.

Read More

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 🙂

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. 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

  2. I believe this could also work:
    Matches alphanumerics from the end of the string up to the |. Then returns the match with span wrapped around it. The class “yournewclass” would be the class you want to apply to the matched text.

    jQuery('.title').html().replace(/(|s?w+)$/, function(_,$1){
   return '<span class="yournewclass">' + $1 + '</span>';
});

  3. @adeneo’s answer is quite simple and will work in 90percents case.

    But what happens if you don t have a | separator in your title ?

    i would suggest using a excellent WordPress extension called “Advanced Custom Field”.

    This extension can hugely enhance your post edition with new field like a subtitle or a second title ( for example the country part of your title ) or whatever you want !

    this way you will just have to wrote your html, natively, without JS like this : 

     <div id=`title`><? the_title()?></div><<div id=`secondtitle`><? get_field(`scdtitle`); ?></div>