使用javascript和jquery進行某些符號的格式更改

我正在使用WordPress的jQuery庫。

Wordpress以<?php the_title() ?>生成每個文章的div標籤中的字符串。 P.e：

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

這產生了建築物XY |瑞士與css格式化：

我的問題是，如何更改「建築物XY」（從|到字符串的末尾）後部分的格式化。

我想要這樣： 建築XY |瑞士

我確定解決方案是一個非常簡單的腳本。但我不太熟練。或者它可能會更容易與PHP？

感謝您的支持:-)

來源

2014-01-11 Lighty

你必須到樣式應用到它的一個元素來包裝的最後一部分，然後設置適當的樣式，大概font-weight : normal

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

FIDDLE

來源

2014-01-11 09:05:43 adeneo

這正是我要找的。優秀:-) – Lighty

我相信這也可以工作：匹配字符串末尾的字母數字到|。然後返回包圍它的跨度的匹配。「yournewclass」類將是您想要應用於匹配文本的類。

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

來源

2014-01-11 09:12:54

@ adeneo的答案很簡單，將在90percents情況下工作。

但是如果你沒有|分隔符在你的標題？

我會建議使用稱爲「高級自定義字段」的出色的Wordpress擴展。

這個擴展可以極大地增強您的後期版本，如字幕或第二個標題（例如您的標題的國家部分）或任何你想要的新領域！

這樣你就只需要寫下你的HTML，原生，沒有JS是這樣的：

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

來源

2014-01-11 09:14:57

'但是如果你沒有| |會發生什麼？你的標題中是否有分隔符？「OP明確提到了 –

這也是一個有用的解決方案。謝謝。 :-) – Lighty

to ling.s：if |是強制性的，那麼你應該把它插入到其中一個變量中，或者最終在WP管理員內部的複選框中進行管理。 –

使用javascript和jquery進行某些符號的格式更改

回答

相關問題