javascript - 用于转换网页上显示的时间时区的用户脚本？

Question

是否可以在 Chrome 版 Tampermonkey 中转换时区？

我在网站的 table/td 元素内有一个给定的日期。例如:

<td align="center">8:00 PM ET</td>

我想将 ET/EST 更改为我的时区 (CET)。例如:

<td align="center">2:00 AM CET</td>

脚本如何做到这一点？

Answer 1

要转换时区，您需要:

1. 获取正确的节点和/或表格单元格。
2. 解析无论使用什么日期/时间格式的内容。
3. 转换该值，重新设置其格式，然后使用新值更新页面。

<小时/>

获取正确的节点:

要获取节点，请使用类似 waitForKeyElements() 的内容。它使用灵活的 jQuery 选择器^{(EG:“td:contains('M ET')”)}，并且适用于静态和动态页面。

阅读:how to choose good selectors 。该问题没有提供足够的信息来选择一个好的选择器。

解析日期/时间文本:

由于使用了无数的格式、不断变化的时区以及“节省时间”的干预，解析时间(和日期)很棘手。
因此，使用擅长时间/日期格式和转换的库。
我推荐the Moment Timezone library对于大多数这样的事情。请参阅下面的代码。

转换并更新日期/时间:

转换由同一库(Moment Timezone)处理。在本例中，更新页面是通过 jQuery 的 .text() 完成的。

完整、有效的 Tampermonkey 脚本^{_{(只是第一个灰色 block )}}:

// ==UserScript==
// @name     _Convert displayed times from one timezone to another
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @require  https://momentjs.com/downloads/moment.min.js
// @require  https://momentjs.com/downloads/moment-timezone-with-data-2012-2022.min.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

const pagesTimezone     = "America/New_York";   // Old style = EST/EDT
const desiredTimezone   = "Europe/Luxembourg";  // Old style = CET

//-- You need to provide a more selective selector.
waitForKeyElements ("td:contains('M ET')", convertTimezone); // installed script line

function convertTimezone (jNode) {
    var timeStr     = jNode.text ().trim ();  // expected like "8:00 PM ET"
    var origTime    = moment.tz (timeStr, "hh:mm a", pagesTimezone);
    var localTime   = origTime.tz (desiredTimezone).format ("h:mm A z");

    jNode.text (localTime);
}

/*--------------------------------------*/
/*--- Simulated target page follows: ---*/
/*--------------------------------------*/
table {border-collapse: collapse;  border: 1px solid gray;}
td {padding: 0.5ex 1em;  text-align: right;  border: 1px solid gray;}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//greasyfork.org/scripts/2199-waitforkeyelements/code/waitForKeyElements.js"></script>
<script src="//momentjs.com/downloads/moment.min.js"></script>
<script src="//momentjs.com/downloads/moment-timezone-with-data-2012-2022.min.js"></script>
<table>
  <caption>Some times (EST/EDT)</caption>
  <tr><td>12:01 AM ET</td><td> 2:02 AM ET</td><td> 4:03 AM ET</td><td> 6:04 AM ET</td></tr>
  <tr><td> 8:05 AM ET</td><td>10:06 AM ET</td><td>12:07 PM ET</td><td> 2:08 PM ET</td></tr>
  <tr><td> 4:09 PM ET</td><td> 6:10 PM ET</td><td> 8:11 PM ET</td><td>10:12 PM ET</td></tr>
</table>

注释:

1. 参见the Moment parsing docs有关 .tz() 调用中使用的格式说明符的说明。
2. 参见the docs for parsing the timezone .
3. 参见a list of timezone identifiers选择最适合您的目的的。