使用javascript和jquery进行特定符号后的格式更改

Question

我对这里一无所知。

我在jquery库中使用wordpress。

Wordpress用<?php the_title() ?>在div标记中为每一篇文章生成一个字符串。体育：

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

这将生成具有css格式的Building _Building：

我的问题是，如何在"Building“之后更改部分的形状(从_

我想要这个：大楼，XY，，瑞士

我确信解决方案是一个非常简单的脚本。但我不是很精通。或者使用php更容易呢？

谢谢你的支持：)

Answer 1

您必须将最后一部分封装在元素中才能应用样式，然后设置适当的样式，可能是font-weight : normal

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

FIDDLE

Answer 2

我相信这也能奏效:匹配字母数字从字符串的末尾到\。然后返回围绕着span的匹配。类"yournewclass“将是要应用于匹配文本的类。

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

Answer 3

@adeneo的答案非常简单，将适用于90%的案例。

但是，如果您的标题中没有一个\\分隔符，会发生什么情况呢？

我建议使用一个优秀的Wordpress扩展，称为“高级自定义字段”。

这个扩展可以极大地增强您的新领域，如副标题或第二个标题(例如，您的标题的国家部分)或任何您想要的新版本！

通过这种方式，您只需在本机编写html，而不需要像这样的JS：