Question

我在课程日期有以下html结构。

<div class="courses">
    <div class="row">
      <div class="start">01st Jan 2013</div>
      <div class="end">28th Jan 2013</div>
    </div>

    <div class="row">
      <div class="start">03rd Jan 2013</div>
      <div class="end">10th Jan 2013</div>
    </div>
</div>

我想用“SP”标签包装日期格式，如“st”，“th”和“rd”，如下面的输出结构。想知道如何实现这一点，以便我可以用css设计它。

<div class="courses">
    <div class="row">
      <div class="start">01<span>st</span> Jan 2013</div>
      <div class="end">28<span>th</span> Jan 2013</div>
    </div>

    <div class="row">
      <div class="start">03<span>rd</span> Jan 2013</div>
      <div class="end">10<span>th</span> Jan 2013</div>
    </div>
</div>

Answer 1

$('div.start, div.end').each(function() {
    var date = $(this).text();
    $(this).html(date.replace(/(st|nd|rd|th)/, '<span>$1</span>'));
});

jsFiddle Demo

Answer 2

您必须为position:relative标记设置样式<span>，然后使用CSS将其移至顶部。

DEMO：jsfiddle.net/zqr2Q/

Answer 3

    var start = $('.start');
    var end = $('end');

    $.each(start,function(e,item){
        var text = $(item).html();
        var finalCh = text.substr(2,2);
        var newFinalCh = "<span class=\"yourClass\">" + finalCh + "</span>";
        var newText = text.replace(finalCh,newFinalCh);
        $(item).html(newText);
    });

包含jquery库

后使用此脚本

Answer 4

试试这个

$("div .start:contains('st')").html().replace('st','<span>st</span');

alert($("div .start:contains('st')").html().replace('st','<span>st</span'))

Answer 5

制作自己的replacer（）函数：

function replacer(what, where) {
    where.html(where.html().replace(what, '<span>' + what + '</span>'));
}

在这里测试：

http://jsfiddle.net/NmHkh/6/

如何在html结构中包含带有html标记的某些单词

5 个答案: