Получить временные числа внутри div с помощью JQuery

Question

Я создаю сайт электронной коммерции на wordpress, и я хочу стилизовать обратный отсчет до предзаказа woocommerce. Обратный отсчет создается с помощью jQuery обратного отсчета Кейт Вуд. Мне нужно стилизовать только числа: изменить их размер и фон . Я не знаком с Jquery, и я не знаю, как разбить текст или что-то в этом роде. Кроме того, я не знаю, действительно ли это возможно.

<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

Вот решение со вкусом ванили, которое захватывает содержимое div, оборачивает каждое число как стилизованный элемент span и перезаписывает содержимое div новой версией.

Вы можете выбрать желаемый размер и цвет , изменив значения переменных sizeMultiplier и background. Было бы чище использовать класс CSS для обеспечения форматирования (и сценарий просто применил бы класс CSS), но я не знал, насколько легко вам будет изменить файлы CSS.

См. Дополнительные пояснения в комментариях в коде.

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>