I want to take a string and wrap it in tags like this:

<!-- What I've got: -->    
<div class="calendar">Feb 22</div>

<!-- What I want:
<div class="calendar">
    <div class="calendarMonth">Feb</div>
    <div class="calendarDay">22</div>
    </div>
-->​

I tried to cook some jQuery, but I'm kind of stuck:

var calendarText = $(".calendar").html();
var calendarArray = calendarText.split(" ");
var calendarMonth = calendarArray[0];
var calendarDay = calendarArray[1];

/* 

Then I tried something like this:
calendarMonth.wrap("div").addClass("calendarMonth");

But I guess calendarMonth is just a string, not an object.

*/

​How would you go about something like this? Any ideas is highly appreciated.

JSFiddle example here: /

I want to take a string and wrap it in tags like this:

<!-- What I've got: -->    
<div class="calendar">Feb 22</div>

<!-- What I want:
<div class="calendar">
    <div class="calendarMonth">Feb</div>
    <div class="calendarDay">22</div>
    </div>
-->​

I tried to cook some jQuery, but I'm kind of stuck:

var calendarText = $(".calendar").html();
var calendarArray = calendarText.split(" ");
var calendarMonth = calendarArray[0];
var calendarDay = calendarArray[1];

/* 

Then I tried something like this:
calendarMonth.wrap("div").addClass("calendarMonth");

But I guess calendarMonth is just a string, not an object.

*/

​How would you go about something like this? Any ideas is highly appreciated.

JSFiddle example here: http://jsfiddle/timkl/u23wY/

• javascript
• jquery

6 Answers 6

You could do it like this:

$(function(){
   var calendarText = $(".calendar").html();
   var calendarArray = calendarText.split(" ");
   var calendarMonth = calendarArray[0];
   var calendarDay = calendarArray[1];

   var html = "<div class=\"calendarMonth\">"+calendarMonth+"</div>"+
           "<div class=\"calendarDay\">"+calendarDay+"</div>";

   $(".calendar").html(html);
});

Updated your fiddle: http://jsfiddle/u23wY/1/

I don't use jquery, but if I understand correctly what you're trying to do...

var calendarText = $(".calendar").html();
var calendarArray = calendarText.split(" ");
var calendarMonth = calendarArray[0];
var calendarDay = calendarArray[1];

var calendarDiv = document.getElementsByClassName("calendar")[0];
var calendarMonthDiv = document.createElement("div");
calendarMonthDiv.className = "calendarMonth";
calendarMonthDiv.appendChild(document.createTextNode(calendarMonth));
calendarDiv.appendChild(calendarMonthDiv);

var calendarDayDiv = document.createElement("div");
calendarDayDiv.className = "calendarDay";
calendarDayDiv.appendChild(document.createTextNode(calendarDay));
calendarDiv.appendChild(calendarDayDiv);

​

http://jsfiddle/vPtsK/

    var calendarText = $(".calendar").html();
    var calendarArray = calendarText.split(" ");

    $(".calendar").html("");
    $(calendarArray).each(
        function(index, item){
            $("<div>").html(item).appendTo(".calendar").addClass((index == 0)?"calendarMonth":"calendarDay")
        }            
    );

$(function(){
    var a= $('.calendar').html().split(' ');
    $('.calendar').html('');
    $('.calendar').append($('<div>',{html: a[0], class:'calendarMonth'}));
    $('.calendar').append($('<div>',{html: a[1], class:'calendarDay'}));
})

http://jsfiddle/6XjVD/

Something like this will work:

$(".calendar").html(function() {
    var date = $(this).text().split(' ');
    return '<div class="calendarMonth">' + date[0] + '</div>' +
           '<div class="calendarDay">' + date[1] + '</div>';                
});​

http://jsfiddle/u23wY/2/

var string = '<div class="calendar">Feb 22</div>'; 
var elementFromString = getElementFromString(string); 

function getElementFromString(string) { 
var element; 

var elementInfo = new function () { 
    this.type = getInfoFromString("elementType"); 
    this.attributes = { 
        className: getInfoFromString("className"), 
        innerHTML: [ 
            "<" + this.type + " class = 'calendarMonth'>", 
                getInfoFromString("calendarMonth"), 
            "</" + this.type + ">", 
            "<" + this.type + " class = 'calendarDay'>", 
                getInfoFromString("calendarDay"), 
            "</" + this.type + ">", 
        ].join(""), 
    };
};

createElement(elementInfo); 

return element; 

function getInfoFromString(infoName) { 
    var info; 
    var setInfoTo = { 
        elementType: setInfoToElementType, 
        className: setInfoToClassName, 
        calendarMonth: setInfoToCalendarMonth, 
        calendarDay: setInfoToCalendarDay, 
    };

    setInfoTo[infoName](); 

    return info; 

    function setInfoToElementType() { 
        info = /<(\w+)/.exec(string)[1]; 
    }

    function setInfoToClassName() { 
        info = /="(\w+)"/.exec(string)[1]; 
    }

    function setInfoToCalendarMonth() { 
        info = /<.*>(\w+)/.exec(string)[1]; 
    }

    function setInfoToCalendarDay() { 
        info = /<.*>\w+ (\d+)/.exec(string)[1]; 
    }
}

function createElement() { 
    element = document.createElement(elementInfo.type);
    var attributeName;
    var attributeValue; 

    for (attributeName in elementInfo.attributes) {
        attributeValue = elementInfo.attributes[attributeName]; 

        element[attributeName] = attributeValue;
    }
}

}