文字列内の日付の動的上付き文字

Question

文字列に表示される日付の "th"と "st"を動的に変更しようとしています。例えばDIVの中には <div class="date">Thursday, September 14th 2017</div> があります。「th」を探してそれを上書きしたいと思います。私は動作する以下のコードが見つかりましたが、それはまた、日と月にも文字を上書きします。お互いに隣り合っている文字「th」だけをどのように対象にしているのかよく分かりません。

$('.date').contents().filter(function() { 
    return this.nodeType === 3; 
}).replaceWith(function() { 
    return this.nodeValue.replace(/[th]/g, '<sup>$&</sup>'); 
}); 

http://jsfiddle.net/QTfxC/133/

Answer 1

あなたは、4つの異なる序をサポートしたいと思います日付の小文字部分が上付き文字になるようにしたい（例：mo nd ay、th ursday）。文字列または句読点が続くなど

マッチ彼らは数字を追跡し、任意の英数字以外の文字または文字列の末尾が続いている4序のいずれか：

$(function() { 
 
    $("button").click(function() { 
 
    $("li").each(function() { 
 
     var original = $(this).text(); 
 
     $(this).html(original.replace(/(\d)(st|nd|rd|th)(\W|$)/g, "$1<sup>$2</sup>$3")); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>Monday, May 1st</li> 
 
    <li>Monday, May 1st!</li> 
 
    <li>Monday, May 1st.</li> 
 
    <li>Monday, May 1st&nbsp;</li> 
 
    <li>Monday, May 1st 2017</li> 
 
    <li>Monday, May 1st 2017 until Tuesday, May 2nd 2017</li> 
 
    <li>Tuesday, May 2nd 2017</li> 
 
    <li>Wednesday, May 3rd 2017</li> 
 
    <li>Thursday, May 4th 2017</li> 
 
    <li>thursday, May 4th 2017</li> 
 
</ul> 
 

 
<button>Run Demo</button>

TL; DRreplace(/(\d)(st|nd|rd|th)(\W|$)/g, "$1<sup>$2</sup>$3")

Answer 2

あなたがしようとしている正規表現は、あなたが間違った結果を得ている理由です、トンまたはhのどちらかを意味し、目の周りの[]を持っています。ちょうどあなたのコード内の行の下に変更：ST、ND、RD、おそらく

あなたのドン番目：

return this.nodeValue.replace(/th/g, '<sup>$&</sup>');