用javascript / jQuery包装日期序号

Question

我有一些这样的HTML结构：

<span class="time">Monday, December 24th</span>
<span class="time">Tuesday, December 25th</span>
<span class="time">Monday, December 31st</span>

我无法更改HTML输出。我想要的是将日期序号包装在一个标签中，以便可以使用CSS设置样式，因此它看起来像：

<span class="time">Monday, December 24<sup>th</sup></span>
<span class="time">Tuesday, December 25<sup>th</sup></span>
<span class="time">Monday, December 31<sup>st</sup></span>

我不能只在字符串中查找/替换字符串，因为例如，如果有人输入“ Thursday，April 11th”，则单词“ Thursday”包含“ th”。因此，我必须解析每个字符串，找到数字，然后查看日期序号是否跟随它们，以便将其包装在<sup></sup>标记中。

类似这样的东西可以找到数字，但是我该如何包装下两个字母而不是数字呢？

$('span.time').each(function() {
    $(this).html(function(i, v) {
      return v.replace(/(\d)/g, '<sup>$1</sup>');
    });
});

https://jsfiddle.net/8yao4rLu/

有什么想法吗？

Answer 1

是：您只需要两个“捕获组”，它们由正则表达式中的括号()界定。然后，您指定如何处理找到的每个组。

在这种情况下，您只需重新打印$1（数字）并将$2弹出到标签中即可。

$('span.time').each(function() {
    $(this).html(function(i, v) {
      return v.replace(/([0-9]+)(th|st|rd|nd)/g, '$1<sup>$2</sup>');
    });
});

<span class="time">Monday, December 23rd</span> <br/>
<span class="time">Tuesday, December 24th</span> <br/>
<span class="time">Monday, December 31st</span> <br/>
<span class="time">Monday, December 2nd</span> <br/>
<span class="time">Monday, 1st of December</span>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这是上面正则表达式的a visualization：

Answer 2

假设服务器的格式一致，则可以在最后2个字符上使用字符串replace()。

使用html(function)可以简化循环和访问现有内容

$('.time').html(function(_, existing){
    return existing.trim().replace(/(..$)/, '<sup>$1</sup>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="time">Monday, December 24th</span>
<span class="time">Tuesday, December 25th</span>
<span class="time">Monday, December 31st</span>