Get Value Of Span Text In Tampermonkey

I am playing with Tampermonkey scripts in JS. I have a website that shows the user's location and timezone in UTC format.

var tzOffset    = "Not found!";
var tzNode      = document.querySelector (".UTCText");
if (tzNode) {
    let ndTxt   = tzNode.textContent;
    let tzMtch  = ndTxt.match (/(-?\d+:\d+)/);
    if (tzMtch  &&  tzMtch.length > 1) {
        tzOffset = tzMtch[1];
    }
}
console.log ("Found timezone offset: ", tzOffset);

<spanclass="optional-wrapper"><spanclass="UTCText"> ==$0
   <!-- react-text: 60 -->
   " (UTC "
   <!-- /react-text --><!-- react-text: 61 -->
   "-10:30"
   <!-- /react-text --><!-- react-text: 62 -->
   ") "
   <!-- /react-text --></span></span>

However, that page looks to be using reactjs, which means it's AJAX-driven.

For AJAX'd pages, you often have to use AJAX-aware techniques such as waitForKeyElements. Here's what that looks like in a complete Tampermonkey userscript:

// ==UserScript==// @name     _Get timezone offset text from a span// @match    *://YOUR_SERVER.COM/YOUR_PATH/*// @noframes// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js// @grant    GM_addStyle// @grant    GM.getValue// ==/UserScript==// @grant    none//- The @grant directives are needed to restore the proper sandbox./* global $, waitForKeyElements *//* eslint-disable no-multi-spaces, curly */

waitForKeyElements (".UTCText", getTZ_Offset);

functiongetTZ_Offset (jNode) {
    var tzOffset    = "Not found!";
    let ndTxt       = jNode.text ();
    let tzMtch      = ndTxt.match (/(-?\d+:\d+)/);
    if (tzMtch  &&  tzMtch.length > 1) {
        tzOffset    = tzMtch[1];
    }
    console.log ("Found timezone offset: ", tzOffset);
}