Опыт. Преобразование номера в объекты с помощью jQuery

§ 261

Задача

  • Телефонный номер должен иметь стандартный вид в коде
  • Номер нужно стилизовать согласно дизайну
  • Ширина символов имеет разную ширину

Решение

HTML:

<div class="Phone">+7(495)567-89-10</div>

JS (jQuery):

function wrap(target) {
  var newtarget = $("<div></div>");
  nodes = target.contents().clone();
  nodes.each(function() {
    if (this.nodeType == 3) {
        var newhtml = "";
        var text = $(this).text().split('');
      //for (var i = text.length; i >= 0; i--) {
        for (var i=0; i < text.length; i++) {
            if (text[i] == '+') newhtml += "<span class='numP'></span>";
            if (text[i] == '-') newhtml += "<span class='numM'></span>";
            if (text[i] == '\(') newhtml += "<span class='numS'></span>";
            if (text[i] == '\)') newhtml += "<span class='numS'></span>";
            if (text[i] == '1') newhtml += "<span class='num1'></span>";
            if (text[i] == '2') newhtml += "<span class='num2'></span>";
            if (text[i] == '3') newhtml += "<span class='num3'></span>";
            if (text[i] == '4') newhtml += "<span class='num4'></span>";
            if (text[i] == '5') newhtml += "<span class='num5'></span>";
            if (text[i] == '6') newhtml += "<span class='num6'></span>";
            if (text[i] == '7') newhtml += "<span class='num7'></span>";
            if (text[i] == '8') newhtml += "<span class='num8'></span>";
            if (text[i] == '9') newhtml += "<span class='num9'></span>";
            if (text[i] == '0') newhtml += "<span class='num0'></span>";
             else newhtml += "";
         }
         newtarget.append($(newhtml));
     } else {
         $(this).html(wrap($(this)));
         newtarget.append($(this));
     }
 });
 return newtarget.html();
}
$(".Phone").html(wrap($(".Phone")));

//примечание: Если необходима обратная последовательность построения содержимого

Результат: