jQuery: split string and append html to split element

Question

There are multiple event date div.

HTML:

 <div class="event-dates">Aug 28</div>
 <div class="event-dates">Aug 28</div>
 <div class="event-dates">Aug 28</div>
 <div class="event-dates">Aug 28</div>

JQuery:

 jQuery.noConflict();
 jQuery(document).ready(function(){
      jQuery(".event-dates").each(function() {
           jQuery(this).html(jQuery(this).html().replace(/ /g, '<br />'));
      });

 });

I want output like first attached image.is it possible to split string and append with html?

OR

Any other way to get such a output?

Expected result as shown in first image

enter image description here output needed

it looks like some css problem jsfiddle.net/arunpjohny/8Vx3V/1 — Arun P Johny
– Arun P Johny, Commented Aug 23, 2013 at 10:02
got output like attched image with your code but i want to add html code to it.<span class="firest">Aug</sapn><span class="day">25</span> — Jack Torris
– Jack Torris, Commented Aug 23, 2013 at 10:07

Arun P Johny · Accepted Answer · 2013-08-23 10:15:09Z

2

Based on the comments

jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery(".event-dates").html(function(idx, html) {
        return html.replace(/([a-z]+)\s(\d+)/i, '<span class="firest">$1</sapn><span class="day">$2</span>')
    });
});

Demo: Fiddle

answered Aug 23, 2013 at 10:15

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stokedout Over a year ago

That's pretty cool, can you explain how the Regex works with $1 and $2?

Arun P Johny Over a year ago

those are used to refer to the groups specified in the regex expression

Richard Dalton · Accepted Answer · 2013-08-23 10:15:57Z

0

This code should do what you want:

JS

jQuery.noConflict();    
jQuery(document).ready(function(){
    jQuery(".event-dates").html(function(index, oldHtml) {
        var split = oldHtml.split(' ');
        return '<div class="month">' + split[0] + '</div><div class="day">' + split[1] + '</div>';
    });    
});

CSS

div.event-dates {
    width: 50px;
    height: 50px;
    border: 1px solid #666666;
}

div.month {
    width: 50px;
    height: 20px;
    text-align: center;
    font-size: 16px;
}

div.day {
    width: 50px;
    height: 24px;
    text-align: center;
    font-size: 24px;
}

Example - http://jsfiddle.net/ex8x7/

answered Aug 23, 2013 at 10:15

Richard Dalton

35.8k6 gold badges75 silver badges92 bronze badges

Collectives™ on Stack Overflow

jQuery: split string and append html to split element

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related