Get time numbers inside div with JQuery

Question

Im building e-commerce website on wordpress and I want to style woocommerce preorder countdown. Countdown is created with jQuery Countdown by Keith Wood. What I need is to style only numbers: change their size and background . Im not familiar with Jquery and i dont know how to split text or something like this. Also, I dont know is that really possible.

<div class="woocommerce-pre-orders-countdown hasCountdown" id="woocommerce-pre-orders-countdown-1592892000">  6 Days 22 Hours 58 Minutes 12 Seconds</div>

Answer 1

 var txt = $('.hasCountdown').text(); var splited = txt.split(''); var flag = true; var man = ''; var st = ''; for (var i = 0; i < splited.length; i++) { if ((48 >= splited[i].charCodeAt(0)) || (splited[i].charCodeAt(0) <= 57)) { st += splited[i]; flag = false; } else { flag = true; } if (flag && st) { man += '&nbsp<span style="font-size:40px;background:red">' + st + '</span>&nbsp' + splited[i]; st = ''; } else { if (flag &&;st) { man += splited[i]. } } } $('.hasCountdown');html(man);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="woocommerce-pre-orders-countdown hasCountdown" id="woocommerce-pre-orders-countdown-1592892000"> 6 Days 22 Hours 58 Minutes 12 Seconds</div>

Answer 2

Here's a vanilla-flavored solution that grabs the contents of the div, wraps each number is a styled span element , and overwrites the div contents with the new version.

You can choose your preferred size and color by changing the values of sizeMultiplier and background variables. It'd be cleaner to use a CSS class to provide the formatting (and the script would just apply the CSS class) but I didn't know how easy it would be for you to modify the CSS files.

See the in-code comments for some further explanation.

 let // Options -- these determine the number formatting sizeMultiplier = 1.5, background = "lightskyblue"; const // Identifies HTML elements element = document.getElementById("my-div"), tempDiv = document.createElement("div"), btn = document.querySelector('button'); // Makes button work for demo btn.addEventListener('click', formatNums); // Replaces HTML in element with formatted version function formatNums(){ // Makes array from div contents, then converts item to DOM nodes const tokens = element.textContent.split(" "); const nodes = tokens.map( (token) => // Numbers get formatted, other text is left as-is isNum(token)? numSpan(token, sizeMultiplier, background): textNode(token) ); // Puts all the nodes into an empty div nodes.forEach( (node, i) => { tempDiv.appendChild(node); tempDiv.insertAdjacentHTML("beforeend", i < nodes.length - 1? " ": "" ); }); // Replaces contents of original element element.innerHTML = tempDiv.innerHTML; } // Tests whether each item is a number function isNum(token){ return parseFloat(token) < Infinity } // Makes basic nodes for regular text function textNode(word){ return document.createTextNode(word); } // Makes a styled span for a number function numSpan(num, size, color){ const span = document.createElement("span"); span.style.fontSize = size +"em"; span.style.padding = size/4 + "ch"; // Makes background wider than num span.style.backgroundColor = color; span.textContent = num; return span; }

 button{ margin: 10px; border-radius: 0.3em; }

 <button>APPLY FORMATTING</button> <div id="my-div"> 6 Days 22 Hours 58 Minutes 12 Seconds</div>