使用 JavaScript 更改 HTML 中的日期格式答案

【问题标题】：Change date format inside HTML with JavaScript使用 JavaScript 更改 HTML 中的日期格式
【发布时间】：2015-01-13 20:22:23
【问题描述】：

我在一个页面上有以下代码：

<span class="release-date"><i class="fa fa-calendar"></i> 2014-11-16</span>

2014-11-16 是日期，由我的 CMS 自动生成。我需要更改此日期。基本上我需要改变月份以不同的方式阅读，因为这个网站有国际观众。在上面的例子中，我希望它看起来像这样：2014-Nov-16。

我知道这可以使用 RegEx 来完成，但是，我不知道如何编写这个 RegEx，因为我不擅长它们。当然，在我上面的示例中，11 = 11 月，12 月等于 12 月，依此类推。

【问题讨论】：

你不应该使用正则表达式。选择元素并更改其文本内容。
@Vohuman - 你能详细说明一下吗？
我发布了一个答案，但随后意识到您可能不想要 Javascript。您在哪里尝试修复这些日期？客户端还是服务器端？如果是服务器端，服务器是用什么语言编写的？
@mrrogers - 客户端所以 JS 是我所追求的。

标签： javascript regex

【解决方案1】：

这也有效..

var months = {
  1: 'jan',
  2: 'feb',
  3: 'march',
  4: 'apr',
  5: 'may',
  6: 'june',
  7: 'july',
  8: 'aug',
  9: 'sep',
  10: 'oct',
  11: 'nov',
  12: 'dec'
};

var currentDate = "2014-11-16"; // your date string would go here. Note, I left the retrieval of it out. This is trivial w/ jQuery... $('.release-date').text();

var redrawnCurrentDate = currentDate.replace(/(\d{2})-(\d{2})$/,function(_,$1,$2){
    return months[$1] + "-" + $2;
});

$('.release-date').text(redrawnCurrentDate);

【讨论】：

【解决方案2】：

你可以这样做：

Fiddle

var elem = document.getElementsByClassName('release-date')[0];
var text = elem.innerHTML;
var regex = /-(\d{1,2})-/m
var month = regex.exec(text);
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'August', 'Sept', 'Oct', 'Nov', 'Dec']

if (month[1]) {
    elem.innerHTML = text.replace(regex, "-" + months[parseInt(month[1], 10) - 1] + "-")
}

【讨论】：

【解决方案3】：

如果要选择span元素的textNode，可以遍历它们的childNodes并过滤textNode：

[].forEach.call(document.querySelectorAll('.release-date'), function(el) {
    var n = el.childNodes, inputDate;

    for ( var i = n.length; i--; ) {
        if ( n[i].nodeType === 3 && n[i].nodeValue.trim().length ) {
              inputDate = n[i].nodeValue.trim();
              n[i].nodeValue = // modify the input date        
        }
    }
});

【讨论】：

【解决方案4】：

这是一个带有 jQuery 和 Moment.js 的 sn-ps，可以满足您的需求，我将格式设置为变量，以便您可以使用它。

$('.release-date').each( function() {
  
  var format = "Do MMM YYYY";

  var $this = $( this );
  var old_date = $.trim($this.text());
  var new_date = moment(old_date , 'YYYY-MM-DD').format( format );

  $this.text($this.text().replace(old_date, new_date));
});

<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<span class="release-date"><i class="fa fa-calendar"></i> 2014-11-16</span>

【讨论】：

@Lynda It supports locales 以及
有趣。如果我想要上面的示例，我将如何包含语言环境？

【解决方案5】：

您可以使用 Javascript Date 为您节省一些丑陋的正则表达式

new Date("2014-11-16")
>> Sat Nov 15 2014 16:00:00 GMT-0800 (PST)
new Date("2014-11-16 PST")
>> Sun Nov 16 2014 00:00:00 GMT-0800 (PST)

除非您添加另一个库，例如 momemt.js 或其他库，否则您可能需要添加一个小助手来将月份作为字符串获取。比如：

function monthToString(month) {
  var months = [ 'Jan', 'Feb', ... , 'Dec' ];
  return months[month % months.length]
}

然后你可以像这样构建新的日期字符串

function convertDateString(dateFromCms) {
   var date = new Date(dateFromCms);
   return date.getFullYear() + "-" + monthToString(date.getMonth()) + "-" + date.getDate();
}

或者类似的东西。查看MDN 了解更多关于Date 工作原理的信息。

【讨论】：